How to add link on collage in dawn theme??

[da_bestess]

Hello! I need help adding a way to add a link on each image in my collage on my homepage. I have the dawn theme if anyone can help me please? Thank you in advance!

[lunaworks]

The collage section in dawn theme automatically is clickable to the collection/product item which is added to it. Not sure what issue you're facing specifically @da_bestess 

[da_bestess]

When I add an image to a block there is no where to add a link at all.

[da_bestess]

Hi! Right here please! I can copy and past whatever code or complete any necessary functions to add the link. Thank you for the help!!

[da_bestess]

If you'd like to help, it's much appreciated!! I just would like you to help me here please and thank you!

[lunaworks]

Sorry for the late reply. This is how you fix it. @da_bestess 

You got to Edit code > collage.liquid , then wrap the code img tag with the code in black.

Then scroll down to the schema and do this.

[da_bestess]

Okay. Can you tell me how to wrap the code img tag with the code in black please? Thank you in advance

[lunaworks]

Type what I have in the black rectangle in your code. Kindly follow the screenshots and then refer to your code and do the same thing. 

[lunaworks]

After you’ve edited your code. Go back to your customizer and try adding an
image in your collage again and you should see an option to add a url.

[karld]

Hi

This code works, but it puts the collage images of the 2 smaller images completely out of proportion.
It there a way to fix this?

[lunaworks]

Can you show me how it looks on your end because I tried with dawn theme and it looked okay.

[karld]

Top is original, bottom is with your code.
The big image is also affected, first I thought it was not. They all are zoomed in somehow.

This is the code I have:

<a href="{{ block.settings.img_link }}">
<img
srcset="{%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
{%- if block.settings.image.width >= 720 -%}{{ block.settings.image | image_url: width: 720 }} 720w,{%- endif -%}
{%- if block.settings.image.width >= 990 -%}{{ block.settings.image | image_url: width: 990 }} 990w,{%- endif -%}
{%- if block.settings.image.width >= 1100 -%}{{ block.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
{%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
{%- if block.settings.image.width >= 2200 -%}{{ block.settings.image | image_url: width: 2200 }} 2200w,{%- endif -%}
{%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
{{ block.settings.image | image_url }} {{ block.settings.image.width }}w"
src="{{ block.settings.image | image_url: width: 1500 }}"
sizes="(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px)"
alt="{{ block.settings.image.alt | escape }}"
loading="lazy"
width="{{ block.settings.image.width }}"
height="{{ block.settings.image.height }}"
>
</a>

[lunaworks]

I see what the issue is, you'll have to move the <a> </a> up. Kindly follow the screenshot attached.

[karld]

Thanks alot! That works 🙂

[modacarpet]

Hi, really thanks for the help. I succeed to make them clickable, however, even though I set them to go relevant catalog, when I click it redirects me to the main page. What is the issue? URL: rugsbycarpetde.com

[lunaworks]

@modacarpet I just checked your store and the links seems to pointing to different products. Has the issue been fixed? If not then lemme know the exact location where you have the collage so I check it out.

[scarlettpoppies]

Very Helpful!
I got stuck on trying to fix the images in the code here, I hope you can suggest: As I tried and maybe I have misplaced your content, so sending you here my original code so you can highlight where I should implement the code if possible please.

[lunaworks]

@scarlettpoppies you want to make your video clickable? And with that I already see there's a wrapping <a> that should make your video go to a url. If you can gimme more details on what you want to achieve 

[Nosremetnarg]

Hey @lunaworks I am trying to implement your code on a CRAVE theme. 

I've added the <a> Im unsure of how to add a link on the image now on the backend.

<div
          class="collage__item collage__item--{{ block.type }} collage__item--{{ section.settings.desktop_layout }}"
          {{ block.shopify_attributes }}
        >
          {%- case block.type -%}
            {%- when 'image' -%}
              <a href="{{  block.settings.img_link }}">
                <div class="collage-card {% if section.settings.card_styles == 'none' %}global-media-settings{% else %}card-wrapper {{ section.settings.card_styles }} color-{{ settings.card_color_scheme }}{% endif %}">
                  <div
                    class="media media--transparent ratio"
                    {% if block.settings.image != blank %}
                      style="--ratio-percent: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%"
                    {% else %}
                      style="--ratio-percent: 100%"
                    {% endif %}
                  >
                    {%- if block.settings.image != blank -%}
                      {%- capture sizes -%}(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px)}{%- endcapture -%}

                      {{
                        block.settings.image
                        | image_url: width: 3000
                        | image_tag: loading: 'lazy', sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
                      }}
                    {%- else -%}
                      {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
                    {%- endif -%}
                  </div>
                </div>
              </a>

[lunaworks]

You'll need to scroll down to the schema and add this. Then afterwards you head to the section in the customizer you should see the option to add a url

[Emily96]

Hey @lunaworks 

I'm trying witha collage with 3 images and I get it set up except all links go back to home. 

Is it possible to add 3 different links to 3 different images within 1 collage on Dawn v10.0.0.0?

Thanks!

[lunaworks]

Can you post a screenshot on how you're adding the links for the 3 images?

[Emily96]

Thanks for your prompt response. I actually managed to get it to work after many tries. I had to move up the href line even further basically wrapping up the whole "collage-card" section. Now works well also with 3 images.

Thanks a lot!

...

{%- when 'image' -%}
<a href="{{ block.settings.collage_image_link }}">
<div class="collage-card {% if section.settings.card_styles == 'none' %}global-media-settings{% else %}card-wrapper {{ section.settings.card_styles }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
<div
class="media media--transparent ratio"
{% if block.settings.image != blank %}

...

[mderrats]

Did you get all 3 images to link to 3 separate links? Mine is still linking me to my home page. I've followed all of the above! 

@Emily96 @lunaworks I'm SO grateful if you can take a look at the below please!

[lunaworks]

Can you send a screenshot of your customizer showing the url you're putting in the setting?

[jinkoniwashi]

Hello @mderrats, I recently encountered a similar issue and managed to solve it. The problem lies in the inconsistency between the id used in the schema and the anchor tag.

In your liquid code, you're using block.settings.img_link, while in the schema, it's referred to as image_link. To resolve this, make sure to synchronize both terms to be the same. This should resolve the issue you're facing.

[mderrats]

Thank you!!! This is what worked for me 😁

[Dazzleblind]

I'm having a similar issue with the images being the wrong size. If I move the </a>, they are no longer clickable, but if I put it in the correct spot, the images are a mess. I have previously customized the code for my image sizes to load full resolution photos into the collage. Here's what I'm working with:

{% endif %}
>
{%- if block.settings.image != blank -%}
<a href="{{ block.settings.image_link }}">
{%- capture sizes -%}(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px){%- endcapture -%}
{{
block.settings.image
| image_url: width: 3000
| image_tag: loading: 'lazy', sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
}}
</a>
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
</div>
</div>

[Nosremetnarg]

Is this still an issue?

[Dazzleblind]

Yes, I can have giant clickable images, or correctly-sized, non-clickable images but it seems I can’t figure out how to make them both correctly-sized AND clickable.

[SophieVision]

I am having the same issue.

[edc1]

Hello @lunaworks! I had tried using this method but wasn't able to find the img tag in the collage.liquid file, is this method still applicable for dawn theme 9.0.0? If not, could you see if you can find an updated solution, it will make a world of a difference in the usability of my site, thank you!

[lunaworks]

Hello @edc1 , can you send a screenshot of what you've tried so far, and how it looks?

[edc1]

Hello! @lunaworks Thank you and apologies for the late response, I have little experience coding, only copy and pasting snippets from time to time and mild css edits. I haven't tried anything as of yet. If you would like I can paste the default collage.liquid file here. 

[Dazzleblind]

I tried adding this to the schema but get a JSON error. Where did I go wrong?