Using JPG in Moder Sliders Logo Carousel Slider

[MulderDSM]

I started by using this topic, but it gets off track and never actually shows you what the JSON code should look like for a jpg file.

Modern Sliders - Logo Carousel Slider

Hi, I have another query about the new Modern Sliders. In this case, Logo Carousel Slider. You have this example set-up using SVGs. Most of the logos I have and need to use are not available as SVG files, just JPGs or PNGs. Is it possible to convert this slider to use JPGs or PNGs? If so, how?! One other question, I have created a slider within a Global Block, which can be seen perfectly within the Global Block builder, but when the Global Block is used within a Page Element, the Global Block …

I tried this, but it doesn’t work

[
 {
   "company"     : "Themeco",
   "image"       : "https://mywebsite.com/wp-content/uploads/2019/02/DSM_Logo.png",
   "height"      : "0.5em",
   "positionTop" : "0.25em"
 },

[ruenel]

Hey @MulderDSM ,

Thanks for writing in!

Changing the svg to image, you will also need to change the structure. You can replace the raw Content element with the Image element and then supply the image URL with the dynamic content {{dc:looper:field key="image"}}.

If the above suggestion does not help, we would love to check your slider settings. Please provide us access to your site. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[MulderDSM]

I have this in the looper. {{dc:looper:field key=“image”}}

right now. Just text is showing up where the images should be showing, and it’s the file name.

[ruenel]

Hello @MulderDSM,

It displays the URL of the image because you have just inserted the dynamic content {{dc:looper:field key="image"}} code inside the Raw Content element. That code was previously intended for displaying the SVG. Now that you have change it to an image, you will need to insert an <img> HTML tag inside the Raw Content element like this:

<img src="{{dc:looper:field key="image"}}" alt="{{dc:looper:field key="title"}}" />

We highly recommend that you remove the Raw Content element and replace it with an Image element. You can then use the {{dc:looper:field key="image"}} as the image source.

Kindly check out the example slider in the secure note below.

Thanks.

[MulderDSM]

Thanks! Is there a way to not use JSON, and just use image objects instead?

[marc_a]

Hi @MulderDSM,

Currently, the best way to implement a slider with a looper is using JSON.

Thank you.