FROM CACHE - en_header

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

Solved
KLDC
Tourist
6 0 0

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.

 

Replies 28 (28)
made4Uo
Shopify Partner
2589 474 703

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

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
thefourthplace
Explorer
44 0 34

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.)

Ian Struckhoff
The Fourth Place
https://thefourthplaceforgeeks.com
HODU
New Member
1 0 1

Thank you very much Made4Uo. Your solution works perfectly!

Doug911
Tourist
3 0 1

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
New Member
2 0 0

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
New Member
2 0 0

@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
New Member
7 0 0

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
New Member
1 0 0

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
Tourist
8 0 0

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