How do I add <a href> tag to a collection of block images separately?

Highlighted
New Member
2 0 0

Hello!

I am trying to custom code and get my images clickable. 

So, I added <a href> tag and it is now clickable although all of the images redirect to the same link. In the code, there is only one image under one class and I cannot find where all of the images are. 

My theme is Narrative.

And here is the code for images that makes all of the images clickable.:

 

{% if block.settings.image != blank %}
<div class="custom__block-image-container" style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100}}%">
{% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<a href="https://mylink">
<img class="custom__block-image lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.image.alt | escape }}">
</a>

 

 

Thank you!

0 Likes