[Debut Theme] Make Images into Links in Text Column with Images

Highlighted
New Member
3 0 0

As the title says, I'd love to have the images in the "Text Columns with Images" link to other parts of my site. The small button you can add below just isn't cutting it.

Any ideas?

 

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
228 0 39

Hi, Jeff!
 
Anders from the Shopify Social Care team here. Hope you're doing well!

There is an option to add a feature like to this to your site but it would require some custom code changes. Instead of customizing the existing the section, you can create a custom 'Call-to-Action' button on your site which then links to another page, product or whatever else. Potentially, you could create many of these buttons for your website so they link elsewhere. The guide to that process can be found here:

1. Building a Clickable Call-to-Action Button for Your Shopify Theme

If you don't feel comfortable building this feature out yourself, you can hire a Shopify Design Expert and have them make the changes for you. If you do plan to build this out yourself, I highly recommend making a duplicate of your active theme to ensure you always have a 'master' copy to revert back to. 

Feel free to follow back up if you have any questions on this process!

Anders3 | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
3 0 0

Wonderful, thank you!

0 Likes
Highlighted
Tourist
10 0 5

I've been wracking my brain about this for the last hour but I think I've come up with a solution.

There's a couple steps to this.

First, open up feature-columns.liquid. Scroll down to the schema code and insert the following code into the blocks section:

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

The location doesn't really matter, but I put it below the image picker since that's the thing we're trying to modify:

    "blocks": [
      {
        "type": "text_block",
        "name": "Column",
        "settings": [
          {
            "type": "checkbox",
            "id": "enable_image",
            "label": "Show image",
            "default": true
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "url",
            "id": "image_link",
            "label": "Image Link"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Add a title or tagline"
          },

What this does is add the option to attach a URL to the image.

Next, scroll back up to the top and we're going to insert some HTML link code. This took some experimentation but I placed the code here:

            {% if block.settings.image_link != blank %}
              <a href="{{ block.settings.image_link }}">
            {% endif %}
                <img id="{{ img_id }}"
                     class="feature-row__image lazyload"
                     src="{{ block.settings.image | img_url: '300x300' }}"
                     data-src="{{ img_url }}"
                     data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                     data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                     data-sizes="auto"
                     alt="{{ block.settings.image.alt | escape }}">
            {% if block.settings.image_link != blank %}
              </a>

The 3 lines at the top checks if there is a URL attached to the image or not. If it's true then the link code is inserted. The call is added at the end of this block to insert the </a> to close the link otherwise chaos will ensue.

Please note that this won't work if you are just using a placeholder image but it should be pretty easy to just add the above code around the placeholder image code.

Hope that helps!
Chris

Highlighted
New Member
1 0 0

Hi Chris,

Your solution was very helpful for me (a liquid newbie). I was able to get the image link box to show up, but I must still be doing something wrong as the image will not link to the page I've selected.

I added the code to the schema section. I also added an <a href> around the placeholder code. I want the site owner to be able to change the image so I don't want to hard code it. Please advise on what I have done, and what you meant when you stated you should wrap the placeholder code with your code.

{% else %}
            <p>
               <a href="{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}"> </a>
            </p>

{% endif %}

Thanks!

0 Likes
Highlighted
Tourist
10 0 5

Liz,

 

Hmm... so if you insert an image, the link should work fine. If you leave it blank then it won't because the link code isn't active on the placeholder-svg image. I haven't thought about exactly how to fix that but I'll try testing a few things and see if I can get it to work for the sake of completion.

 

If you just place the code I suggested in my previous post, it should work fine so long as an image is inserted that isn't the default placeholder image. If you could show me what you did to the section code I can see where things aren't working properly.

 

Chris

0 Likes
Highlighted
New Member
1 0 1

Thanks Chris! But where do I put the second piece of code? I can't figure that out.

Highlighted
New Member
3 0 0

I also can't figure out where to put that second piece of code...

The first part worked out fine though! Thanks!

0 Likes
Highlighted
Tourist
10 0 5

Sorry for the late reply. Been swamped with work.

 

...Okay, I think I see the problem here.

 

First off, do not put the code around the placeholder svg image code. I haven't quite figured out how to make that work and honestly, I think there's very few cases that you'd want the placeholder image to be clickable.

 

So if you don't put the code there, then where does it go? First, let's look at the image code above the placeholder svg code. I'll paste the original so it's fairly clear.

 

<div class="grid__item {{ column_width }} text-{{ section.settings.align_text }}" {{ block.shopify_attributes }}>
{% if block.settings.enable_image %}
{% if block.settings.image != blank %}
{% capture img_id %}TextColumnImage-{{ block.id }}{% endcapture %}
{% capture wrapper_id %}TextColumnImageWrapper-{{ block.id }}{% endcapture %}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style' with image: block.settings.image, width: max_height, height: max_height, small_style: true, 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: block.settings.image.aspect_ratio | times: 100}}%;"> <img id="{{ img_id }}" class="feature-row__image lazyload" src="{{ block.settings.image | img_url: '300x300' }}" data-src="{{ img_url }}" data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ block.settings.image.aspect_ratio }}" data-sizes="auto"
</div>
</div>

So this is the original code that's in your feature-columns.liquid file.

 

The part we need to focus on is the section in the bottom half which is essentially an <img> tag. You're going to add an if else statement at the front of that section to determine whether or not there is a link set on the image that's currently selected. You'll then cap off that block with an if else statement as well.

 

So what you get is this:

 

            {% if block.settings.image_link != blank %}
              <a href="{{ block.settings.image_link }}">
            {% endif %}
                <img id="{{ img_id }}"
                     class="feature-row__image lazyload"
                     src="{{ block.settings.image | img_url: '300x300' }}"
                     data-src="{{ img_url }}"
                     data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                     data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                     data-sizes="auto"
                     alt="{{ block.settings.image.alt | escape }}">
            {% if block.settings.image_link != blank %}
              </a>

What you're essentially doing is wrapping a link around the image tag and that's what makes it clickable. Again, don't place the code around the placeholder:

 

{% else %}
            <p>
               <a href="{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}"> </a>
            </p>

{% endif %}

That won't work because svg tags work differently than regular images. I read up a bit on how they work but I'm not entirely sure how it's implemented since that above turns into this on a webpage:

 

<svg class="placeholder-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 525.5 525.5"><path d="M324.5 212.7H203c-1.6 0-2.8 1.3-2.8 2.8V308c0 1.6 1.3 2.8 2.8 2.8h121.6c1.6 0 2.8-1.3 2.8-2.8v-92.5c0-1.6-1.3-2.8-2.9-2.8zm1.1 95.3c0 .6-.5 1.1-1.1 1.1H203c-.6 0-1.1-.5-1.1-1.1v-92.5c0-.6.5-1.1 1.1-1.1h121.6c.6 0 1.1.5 1.1 1.1V308z"></path><path d="M210.4 299.5H240v.1s.1 0 .2-.1h75.2v-76.2h-105v76.2zm1.8-7.2l20-20c1.6-1.6 3.8-2.5 6.1-2.5s4.5.9 6.1 2.5l1.5 1.5 16.8 16.8c-12.9 3.3-20.7 6.3-22.8 7.2h-27.7v-5.5zm101.5-10.1c-20.1 1.7-36.7 4.8-49.1 7.9l-16.9-16.9 26.3-26.3c1.6-1.6 3.8-2.5 6.1-2.5s4.5.9 6.1 2.5l27.5 27.5v7.8zm-68.9 15.5c9.7-3.5 33.9-10.9 68.9-13.8v13.8h-68.9zm68.9-72.7v46.8l-26.2-26.2c-1.9-1.9-4.5-3-7.3-3s-5.4 1.1-7.3 3l-26.3 26.3-.9-.9c-1.9-1.9-4.5-3-7.3-3s-5.4 1.1-7.3 3l-18.8 18.8V225h101.4z"></path><path d="M232.8 254c4.6 0 8.3-3.7 8.3-8.3s-3.7-8.3-8.3-8.3-8.3 3.7-8.3 8.3 3.7 8.3 8.3 8.3zm0-14.9c3.6 0 6.6 2.9 6.6 6.6s-2.9 6.6-6.6 6.6-6.6-2.9-6.6-6.6 3-6.6 6.6-6.6z"></path></svg>

I hope that helps!

Chris

0 Likes
Highlighted
Shopify Partner
2 0 2

Just wanted to add that I was getting errors until I added an {% endif %} after the </a> like below using the Artisan theme. 

 

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