Making Image on Homepage Clickable (Attaching a Link to it)

Solved
spasify
New Member
3 0 0

We have successfully added the codes, however Link placeholder is not showing in the page section editor. Where can we place our url? We wanted to make images below clickable.

Screenshot_2.jpg

0 Likes
spasify
New Member
3 0 0

Hi there,

We have successfully added the codes in the feature-columns.liquid section, however it ruins the homepage layout and the url attached is not working instead we are redirected to homepage when clicked.

0 Likes
blurio
Tourist
5 0 1

I am trying to do the same thing, add image link to "Image with Text" section in Minimal theme, but I can’t find hero.liqud can someone help please

0 Likes
Katieree13
Tourist
3 0 2

I'm having this exact issue. Was this ever resolved?

0 Likes
golden_ia
New Member
4 0 0

I was able to make the image header in a slideshow clickable by following this tutorial for the debut theme. https://youtu.be/WieMrvXDFrg

0 Likes
Kristina123
New Member
1 0 0

Hi!
Did you end up figuring this out?
I too was able to add a picture link but when I do nothing changes!

0 Likes
Chrisc1623
Tourist
7 0 2

Actualy solved here... 

First add the code to the schema as several people have commented. This creates the ability to link on the theme template. 

Next add <a href= "{{ block.settings.image_link }}"> further up in the same theme file. For Image with Text, this is the feature-row.liquid file. My code is shown below. In practise this creates the 'link' but will doesn't yet have an end point so will loop you back to the homepage. 

<div class="page-width feature-row">
{% capture image_layout %}
<div class="feature-row__item">
{% if section.settings.image != blank %}
{% capture img_id %}FeatureRowImage-{{ section.id }}{% endcapture %}
{% capture wrapper_id %}FeatureRowImageWrapper-{{ section.id }}{% endcapture %}
{%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style', image: section.settings.image, height: 545, wrapper_id: wrapper_id, img_id: img_id %}
<div id="{{ wrapper_id }}" class="feature-row__image-wrapper js">
<div style="padding-top:{{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100}}%;">
<a href= "{{ section.settings.image_link }}">
<img id="{{ img_id }}"
class="feature-row__image lazyload"
src="{{ section.settings.image | img_url: '200x200' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ section.settings.image.alt | escape }}">

FINALLY, make sure that your HREF is linking to the same part as the other lines of code. For the feature-row file, this is section.settings.image. However, when i did this for the Custom Content layout it was block.settings.image. If it is linking to your homepage, this is the issue you need to fix! 

Chris

0 Likes
AstridCioata
New Member
2 0 0

Hi Chris, I'm experiencing the same issue! If you found a solution can you please let me know! Thank you!!

0 Likes
alpheusc
New Member
1 0 0

Hi, have any of you figured out the solution to this? The link works but it is very zoomed in. Thank you for all the help in advance

0 Likes
CloudE5
New Member
4 0 0

I managed to get an image link field with this code. Thought that was it but after entering URL the image is still not clickable. Any thoughts would be super helpful. Thanks

0 Likes