Add link to image Dawn Theme

[Ulysse1234]

Hi,

I've got some issues, I’d like to add a link on the image on the left so it could redirect to another page but I don't know how to do it.

Somebody knows how to do it please? 

Website: https://rvmmpz-4s.myshopify.com

[htmlBurger]

Hello,

To do this, a new setting for the image link should be added to the section. However, for this, you'll need to hire a developer as it is not a very straightforward job.

As a workaround, and only if you use this section once, you can use the following approach.

Go to Online store -> Themes -> Edit code. Then open this file collapsible-content.liquid.

Locate this code:

<div
  class="collapsible-content__media collapsible-content__media--{{ section.settings.image_ratio }} media global-media-settings gradient"
  {% if section.settings.image_ratio == 'adapt' %}
    style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"
  {% endif %}
>
  {%- liquid
    assign padding_multiplier = 1
    if section.settings.layout == 'section'
      assign padding_multiplier = 2
    endif
    assign desktop_tablet_padding = 100 | times: padding_multiplier | append: 'px'
    assign mobile_padding = 30 | times: padding_multiplier | append: 'px'
  -%}
  {%- capture sizes -%}
    (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ desktop_tablet_padding }}) / 2),
    (min-width: 750px) calc((100vw - {{ desktop_tablet_padding }}) / 2),
    calc(100vw - {{ mobile_padding }})
  {%- endcapture -%}
  {{
    section.settings.image
    | image_url: width: 3200
    | image_tag:
      sizes: sizes,
      widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
  }}
</div>

and replace it with:

<a href="YOUR LINK GOES HERE">
  <div
    class="collapsible-content__media collapsible-content__media--{{ section.settings.image_ratio }} media global-media-settings gradient"
    {% if section.settings.image_ratio == 'adapt' %}
      style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"
    {% endif %}
  >
    {%- liquid
      assign padding_multiplier = 1
      if section.settings.layout == 'section'
        assign padding_multiplier = 2
      endif
      assign desktop_tablet_padding = 100 | times: padding_multiplier | append: 'px'
      assign mobile_padding = 30 | times: padding_multiplier | append: 'px'
    -%}
    {%- capture sizes -%}
      (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ desktop_tablet_padding }}) / 2),
      (min-width: 750px) calc((100vw - {{ desktop_tablet_padding }}) / 2),
      calc(100vw - {{ mobile_padding }})
    {%- endcapture -%}
    {{
      section.settings.image
      | image_url: width: 3200
      | image_tag:
        sizes: sizes,
        widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200'
    }}
  </div>
</a>

Change `YOUR LINK GOES HERE` with your actual link. If you want the link to be opened in a new tab, use this: `<a href="YOUR LINK GOES HERE" target="_blank">`

----

Please note, that the approach above will hardcode this link to all instances of this section. This means that if you have 3 different Collapsible content sections on 3 different pages, all of them will share the same link (as the link is hardcoded in the code). I hope this makes sense.

Let me know if this was helpful

[Ulysse1234]

Thanks for the help but the thing is that I want to add different link on the different section that's why It's a bit complex 

[devcoders · Accepted solution]

Hello @Ulysse1234 
Please check.

[Ulysse1234]

Thanks a lot