Dawn theme - Making multicolumn images go to url? Code help please!

[KLDC]

Hello folks! I'm doing some homepage customizations for a client (in Dawn) and have hit a snag with the multicolumn section.

The client would like a row of images that each click to their own external URL. The theme only includes the option to link text, so I'm editing the theme code.

In multicolumn.liquid, I've added the following schema:

{
"type": "url",
"id": "image_link",
"label": "Image link"
},

... which worked great, the option to add an image link shows up in the theme editor.

And then back inmulticolumn.liquid I wrapped the following a tag around the div:

<a href="{{ section.settings.image_link }}">
<div class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}">
<div class="media media--transparent media--{{ section.settings.image_ratio }}"
{% if section.settings.image_ratio == 'adapt' %}
style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
{% endif %}>
<img
srcset="{%- if block.settings.image.width >= 275 -%}{{ block.settings.image | img_url: '275x' }} 275w,{%- endif -%}
{%- if block.settings.image.width >= 550 -%}{{ block.settings.image | img_url: '550x' }} 550w,{%- endif -%}
{%- if block.settings.image.width >= 710 -%}{{ block.settings.image | img_url: '710x' }} 710w,{%- endif -%}
{%- if block.settings.image.width >= 1420 -%}{{ block.settings.image | img_url: '1420x' }} 1420w,{%- endif -%}"
src="{{ block.settings.image | img_url: '550x' }}"
sizes="(min-width: 990px) {% if section.blocks.size <= 2 %}710px{% else %}550px{% endif %},
(min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %},
calc(100vw - 30px)"
alt="{{ block.settings.title }}"
height="{{ block.settings.image.height }}"
width="{{ block.settings.image.width }}"
loading="lazy"
>
</div>
</div>
</a>

So, the image is clickable, but instead of going to the URL I'd specified in the theme editor, it just goes back to the homepage (https://dherese.myshopify.com/). I'm so stumped. 

Any thoughts? Much appreciated folks.

K.

[made4Uo]

@tessastbury So the previous code should work. It should provide you different link when you click the column that you added

[thefourthplace]

I think I see what is happening here, as I try to implement this myself.

The Multicolumn section itself has a single "Button label" and "Button link" configuration. This adds a button to the entire section.

Then, each of the individual blocks has a "Store link" configuration. Each of these make the images in each block clickable.

There's also now no button in each section, just the clickable link.

Ideally, the "Button label" and "Button link" on the section would add a button to the section that goes to that link, the "Store link"  (or "Image Link" on each block would make the image clickable, and a "Button label" and "Button link" on each section would each make the button configurable. (Or just have "Link" and "Button label" and the "Link" applies to both.)

[HODU]

Thank you very much Made4Uo. Your solution works perfectly!

[Doug911]

Hello! And thank you. I was also needing a solution for linking images in multicolumn. 

I have one other question. I want the mobile slider to work on desktop as well. That currently is not a native option. How might I make the slider work in desktop mode as well? I have four images which I would like to slide horizontally on desktop.

Thank you!

[Avalon1]

Hello,

to fix your issue just replace the line
<a href=" {{ block.settings.image_link }}">

with
<a href=" {{ block.settings.link }}">

and it will work correctly

Regards

I am sorry I posted the same post twice 🙂

[Avalon1]

@tessastbury 

Hello,

to fix your issue just replace the line
<a href=" {{ block.settings.image_link }}">

with
<a href=" {{ block.settings.link }}">

and it will work correctly

Regards

[Candice13]

Hi, 

I just used the code that worked great but now the mobile slider does not work anymore. 

Can you help? 

Thanks,

Candice

[missblenny_2]

Your code worked great, thanks! Do you have any ideas what I could do if I have a second multicolumn where I don't want a link for the images? If I leave the 'image link' empty, the image is still clickable and refreshes the page when clicked.

[Pete_Hegn]

Hi! Thanks for the code! It works awesome! I was looking for that specific solution for a while. 

I just have one wish and I cannot figure out how to do it. Hoped you could help me. 

I wish to have a hover effect (something like 10% or 20% opacity  #000000) when we mouse over the image/column. So far its no indication which one you are about to click. 
Do you have an idea how and where to add it? 🙂 

Thank you!
/Kristina