How do you make image clickable in refresh theme

[skilrexxx]

hello i need help with attaching a link to an image with text. 
I would like the image to be clickable so it redirects the customer to the page of the product. is it possible?
i have found only old posts on this topic and they didnt really work for me.
if anyone can help ill be really happy. thank you all in advance.
my store: https://resolvekicks.cz/
password: kundaaa

[layoutbase]

Hi @skilrexxx, 

Unfortunately, we weren't able to access your store with the provided password. However, let us suggest some edits for you: 

1. Go to Online Store->Theme->Edit code
2. Find sections/image-with-text.liquid

3. Find the img tag, then replace it with the code below

{% if block.settings.button_link != blank %} <a href="{{ block.settings.button_link }}">{% endif %} 
          <img
            srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
              {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
              {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
              {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
              {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
              {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
              {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
            src="{{ section.settings.image | img_url: '1500x' }}"
            sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
            alt="{{ section.settings.image.alt | escape }}"
            loading="lazy"
            width="{{ section.settings.image.width }}"
            height="{{ section.settings.image.height }}"
          >
          {% if block.settings.button_link != blank %} </a>{% endif %} 

Example below: 

Hope this works out for you. 

Cheers, 

Layoutbase - Drag & drop pagebuilder

[BSS-Commerce]

Hi @skilrexxx 

Please follow these steps:

- Go to Online store => Theme => Edit code, find the file image-with-text.liquid. Add the following code to schema -> settings, as shown below:

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

- Find the code:

<div class="image-with-text__media image-with-text__media--{{ section.settings.height }} gradient color-{{ section.settings.color_scheme }} global-media-settings {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
        {% if section.settings.height == 'adapt' and section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
      >
        {%- if section.settings.image != blank -%}
          {%- capture sizes -%}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2){%- endcapture -%}
          {{ section.settings.image | image_url: width: 1500 | image_tag:
            loading: 'lazy',
            sizes: sizes,
            widths: '165, 360, 535, 750, 1070, 1500'
          }}
        {%- else -%}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
      </div>
</div>

Replace it by:

<a href="{{ section.settings.image_link }}">
      <div class="image-with-text__media image-with-text__media--{{ section.settings.height }} gradient color-{{ section.settings.color_scheme }} global-media-settings {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
        {% if section.settings.height == 'adapt' and section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
      >
        {%- if section.settings.image != blank -%}
          {%- capture sizes -%}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2){%- endcapture -%}
          {{ section.settings.image | image_url: width: 1500 | image_tag:
            loading: 'lazy',
            sizes: sizes,
            widths: '165, 360, 535, 750, 1070, 1500'
          }}
        {%- else -%}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
      </div>
    </div>
</a>

- Save it and then go to Online Store -> Theme -> Customize. Click on the image to see the input box to enter the path

The above guide only applies to the Image with text section. You can do the same with the slideshow by editing the slideshow.liquid file.

[skilrexxx]

hello i applied the code. the link works but the image turned out massive, take a look
https://resolvekicks.cz/
is there a way to set it as before?

[layoutbase]

Hi @skilrexxx, 

Sorry to hear that happened. May I suggest these steps:

1. remove the line:

{% if block.settings.button_link != blank %} <a href="{{ block.settings.button_link }}">{% endif %}

- add the following close tag: 

<img
            srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
              {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
              {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
              {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
              {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
              {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
              {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
            src="{{ section.settings.image | img_url: '1500x' }}"
            sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
            alt="{{ section.settings.image.alt | escape }}"
            loading="lazy"
            width="{{ section.settings.image.width }}"
            height="{{ section.settings.image.height }}"
          >

2. Remove the line: 

{% if block.settings.button_link != blank %} </a>{% endif %} 

Replace with:

{% if block.settings.button_link != blank %} <a href="{{ block.settings.button_link }}" style="z-index: 1;">&nbsp;</a>{% endif %} 
          <img
            srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
              {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
              {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
              {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
              {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
              {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
              {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
            src="{{ section.settings.image | img_url: '1500x' }}"
            sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
            alt="{{ section.settings.image.alt | escape }}"
            loading="lazy"
            width="{{ section.settings.image.width }}"
            height="{{ section.settings.image.height }}"
          >

[omersharon]

i was on the same issue in my refresh theme. I tried what's advised here , it didnt work for me as is, but i finally made it work, with much simpler implementation.  

1. go to image-with-text.liquid (all happens here)

2. add this part to the schema part of the code under "settings (this will add a link imput field in the UI 😞

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

once pasted, should look like this:

3. now just add this one row: " <a href=" {{ section.settings.image_link }} " target="_blank"></a> " for the link to work, it will open the link in a new tab, if you want it in the same tab remove the " target="_blank".

where to put it: look for the {%- else -%}
{{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%} and put it just above it.

once pasted, should look like this

that's my contribution to this great community,  i hope it works for you.

[corynnsmith]

hi can you help me with this? which code is it?