Add in image URL to modern slider to allow lightbox to work

I am trying to make the process of adding an image to a slider as simple as possible for my client. To make my slider images work with a lightbox i have changed the html tag of the slide to an a tag and added the image attachment path to the URL section of the link option. While this works it is somewhat fiddly for my client as they have to seek out the image file path before attaching the image as a background to the slider.
I am trying to find a way for making the link address dynamic i.e. getting the background image url so i can simply show the client how to duplicate the slide and swap the background image without having to find the URL of the background image used.

any advice much appreciated.

Hi @The_Capture_Factory,

Thanks for reaching out.
It is not very sure what exactly you are trying to achieve here. If you are trying to set the lightbox image through the Modern Slider, unfortunately, there is no such option for that. If you have already a structure for that, and you are not able to get the image into the lightbox, we need to know the exact structure and how you are getting the images.

Thanks

All i am trying to find out is, is there a way to dynamically set the URL under the link section to the URL of the background image

the images are background images on slides within the slide container element

Hi @The_Capture_Factory,

You can set the URL using the Dynamic Content tag like {{dc:looper:field key=“url”}}. Now if you are getting the data from Looper Provider > Query Builder or Looper Provider > Query String, you need to specify the field name in the key. If you are using JSON you need to set the attribute name into the key. If you are using the JSON like the following format, you can get the image URL by using ****{{dc:looper:field key=“image”}}**.

[
    {
        "name"  : "Gnarly",
        "price" : "1.276",
        "link"  : "#coverflow-01",
        "image" : "https://doodleipsum.com/1600x1600/avatar-5?i=67e60e13004a1852a4ce4aa44c52793c"
    },
    {
        "name"  : "Tubular",
        "price" : "0.763",
        "link"  : "#coverflow-02",
        "image" : "https://doodleipsum.com/1600x1600/avatar-5?i=a05a7d30f0e84e206c5089cb14792fd4"
    }
]

Hope it helps.
Thanks

hi thanks for your feed back but despite my screen shot showing looper consumers on each slide i was setting the image on each slide manually to make it simple for my client to administer. So it sounds like i cant retrieve the background image url from the slide container dynamically i would either need to use a JSON query or a post for each slide which makes the process of administration quite clunky. So following a discussions in our office, if we enabled categories within the media library could we build a query to pull images from the media library of a certain category and populate the slider dynamically. If you think this is possible can you point me to any documentation on building a query to access the media library.

many thank for your help

OR can i pull all images from a single post i.e a portfolio post with all the images i need in the slider or will the query only pull the featured image from a post

Hi @The_Capture_Factory,

If you are setting the image individually to the slides from the Media, you can copy the image URL from the Media and set it to the URL.

Hope it helps.
Thanks

i know this but i am trying to make the process as simple as possible for my client. I already have it working by doing as you suggest but i wanted to set the URL image dynamically or pull a group of images into a slider dynamically from one source such as a post or a category in the media library. I don’t want to have to make a post for each slide as that just makes the job very clunky

Hi @The_Capture_Factory,

In that case, you need to use the Looper Provider with Query Builder, Query String, or JSON.

Thanks

any chance you can point me in the direction of some documentation on building looper provider query strings?

Hi @The_Capture_Factory,

You can find the detailed documentation in the following link.

Hope it helps.
Thanks

thanks for your time. I would still like to understand more about how to create looper cistom queries so if you have more info that would be great but i think i am going to use the following form one of your themeco youtube channel videos

many thanks
Richard

Hi Richard,

I have already shared the documentation for the Query String and that will help you with this.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.