What's your biggest current challenge? Have your say in Community Polls along the right column.

Clickable Slideshow image and a clickable button - Dawn

Clickable Slideshow image and a clickable button - Dawn

Vilcka
Tourist
10 1 3
 

Hello everyone,

I managed to make the default slideshow in the Dawn theme clickable. This is the solution commonly found online, with several videos explaining the same method. However, the issue is that the clickable button on the default slideshow stops working. I need both the image and the button to be clickable.

The code I used to make the image clickable was adding the following code right after the </div> on line 152 of the slideshow.liquid file, in the default code:

 

<a href="{{ block.settings.image_link }}" style="display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 999;"></a>

Later, there’s this piece of code between lines 381–385.

 

{
"type": "image_picker",
"id": "image",
"label": "t:sections.slideshow.blocks.slide.settings.image.label"
},

 

I added this piece of code after the "," resulting in the following:

 

{
"type": "image_picker",
"id": "image",
"label": "t:sections.slideshow.blocks.slide.settings.image.label"
},
{
"type": "url",
"id": "image_link",
"label": "Image Link"
},

 

Is there a way to keep both options (Button and whole image clickable)?

 

Thanks

 

Reply 1 (1)
Vilcka
Tourist
10 1 3

Thank you very much for the answer!

 

Unfortunately it doesn't work, as I need the entire image to be clickable as well as the button with its respective effect when the mouse is over it. 

Need to consider that each image in the carousel will have the same link as the button.

 

I've been working on it and I can't find a solution