Image/ Gallery Slider - two questions

[el3ctrofuzz]

Hi Guys,

I have two questions:

1. Use Dynamic Content in CSS for Background URL

I have identified an element that I would like to put a background image on. On the element, I used the custom CSS to input the following:

$el {
    background: URL("{{dc:looper:item}}");
}

But unfortunately, the results I get in the browser inspector is

 background: URL("")

where the dynamic content URL is not being inputted. Is this possible? Is there are way to force the URL to input into the custom CSS? I’ve double-checked and my gallery item from the looper (which is the current item) and it definitely is set to report back a URL.

2. Slider IMG element is draggable, stopping cursor from scrolling

On my page, I have a slider gallery. Each slide contains a Modal, with an element inside.
https://hackneywickboulder.co.uk/sessions/private-coaching/

I do not want page navigation, and I want mobile and desktop users to browse with their finger/cursor by swiping. However, when using desktop and trying to swipe over the images, the images actually just drag out of the browser as if I’m trying to paste it somewhere else. (I can’t capture a screenshot so I hope you understand).

Please could you let me know of a way to disable this effect. I already tried using the various user-select: none; CSS commands.

Thank you,

[tristup]

Hi @el3ctrofuzz

Thanks for reaching out.
Unfortunately, you can get the dynamic Looper values in the Element CSS. I would suggest you use the Background attribute where you can set the Looper value.

I went ahead and check by dragging the slide, and it works properly. But it shows the bigger images as the images are linked to the Modal.

Thanks

[el3ctrofuzz]

Hi @tristup,

Thanks for the reply.

2. I can’t seem to get the slider to behave correctly. Here’s a 10 sec clip of my problem. The slider works fine when swiping in between the images, but not at all when swiping on the images.

pro slider

1. Ah - that’s a shame. Unfortunately, the Modal Toggle element does not have a background image config. You have to select “Graphic” then Cornerstone basically input this graphic as an <img>. I’m trying to get the image to always “cover” the container it’s in, but as far as I know, you can’t do this with an <img> tag, only with the background-image of an element.

Am I wrong? Is there a way to make an <img> tag always “cover” the entire container without resizing the container?

Thanks

[ruenel]

Hello @el3ctrofuzz,

Thanks for the updates.

2.) You can swipe on the image because the image itself is a link. You can only click and drag or swipe in between your image.

1.) You can use a DIV and set a background with <img> image so that you will have the “Cover” object-fit property.

If you need to launch a modal, you can convert this Div into a link (which would serve as a toggle) to launch the modal window.

Hope this helps.

[el3ctrofuzz]

Hi @ruenel,

Thanks for those explanations.

I’ve used the toggle hash thingy in the past, so will remind myself how from a previous post.

That all seems like a great solution.

Kind Regards

[marc_a]

Hi @el3ctrofuzz,

You’re welcome! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.