Edit: Disabled the country blocker - sry.
Okay, this drives me nuts. Did so much coding (and deleted again) by reading a lot of different posts. But I can't get it work.
I want all my images to be clickable. On the home page I have a collection list and a featured collection.
I can make them clickable - BUT I always land on the home page - not the collection page, or on a product detail page.
Within my collection pages e.g. https://creatado.com/collections/ace I can't click on the images. Even if I manage to make them clickable, again I only land on the same page.
Also I noticed that my images are clickable within the first second. After that they are not anymore.
Here is the a code I used to get a box with link to customize every collection image.
Collection list liquid
"blocks": [
{
"type": "featured_collection",
"name": "t:sections.collection-list.blocks.featured_collection.name",
"settings": [
{
"type": "url",
"id": "image_link",
"label": "Collection Link"
},
{
"type": "collection",
"id": "collection",
"label": "t:sections.collection-list.blocks.featured_collection.settings.collection.label"
}
This made my images clickable (collection list) - but I do always land on the home page.
card.collection.liquid
{%- if card_collection.featured_image -%}
<div class="card__media">
<a href="{{ block.settings.image_link }}">
<div class="media media--transparent media--hover-effect">
<img
srcset="
{%- if card_collection.featured_image.width >= 165 -%}{{ card_collection.featured_image | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_collection.featured_image.width >= 330 -%}{{ card_collection.featured_image | image_url: width: 330 }} 330w,{%- endif -%}
{%- if card_collection.featured_image.width >= 535 -%}{{ card_collection.featured_image | image_url: width: 535 }} 535w,{%- endif -%}
{%- if card_collection.featured_image.width >= 750 -%}{{ card_collection.featured_image | image_url: width: 750 }} 750w,{%- endif -%}
{%- if card_collection.featured_image.width >= 1000 -%}{{ card_collection.featured_image | image_url: width: 1000 }} 1000w,{%- endif -%}
{%- if card_collection.featured_image.width >= 1500 -%}{{ card_collection.featured_image | image_url: width: 1500 }} 1500w,{%- endif -%}
{%- if card_collection.featured_image.width >= 3000 -%}{{ card_collection.featured_image | image_url: width: 3000 }} 3000w,{%- endif -%}
{{ card_collection.featured_image | image_url }} {{ card_collection.featured_image.width }}w
"
src="{{ card_collection.featured_image | image_url: width: 1500 }}"
sizes="
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: columns }}px,
(min-width: 750px) {% if columns > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %},
calc(100vw - 3rem)
"
alt=""
height="{{ card_collection.featured_image.height }}"
width="{{ card_collection.featured_image.width }}"
loading="lazy"
class="motion-reduce"
>
</div>
</a>
</div>
Any help is highly appreciated!
Toby
