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

[CDLC]

I have tried this method a few times and I am still not getting a clickable link when I try to add it to the feature-row.liquid in the Minimal theme. The link picker seems to work and I've assigned it to the same collection as the rest of the links, but the image still is not clickable. Can you tell if there is something I'm missing? https://carladelacruzjewelry.com/

[Chris_L_]

Hmm... I'm not entirely sure why it's not working although I haven't tried my code on Minimal theme just yet. I know this isn't an answer in itself but I will try to test it out sometime and will try to get back to you when I can. Been rather swamped lately unfortunately.

If you've already found a solution then fantastic! Otherwise, I'll get back to this soon.

Chris

[Swordpen]

Just wanted to say thanks, this answer was helpful and I was able to add a link to my images in the Debut theme! 

[jayahirsch]

This solution only works if you have just one column - or want to have the same link for every image in every column, right?

[YoKeto]

Thanks Chris! Worked great (Though I did need to add {% endif %} at the end to get it to save.) 

[WildStone]

Hey @Chris_L_ 

Thanks very much for taking the time to help us all out. It's much appreciated.

However, I'm a little stuck.

I'm using the Parallax theme, so different to the theme in your examples.

I've managed to get the link box to appear under the image, perfect!

However, I can't make the image clickable. Below are my two bits of code. Any help would be greatly appreciated.

One thing I did notice was that my schema didn't have 'Blocks' as a section. In fact, it didn't have any sections as such. You'll see why I mean in the below.

Thanks very much!

image-text.liquid

{% include 'include-image-text' %}

{% schema %}
  {
    "name": "Image with text",
    "class": "image-with-text-section",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image",
        "info": "1600 x 1000px recommended"
      },
{
            "type": "url",
            "id": "image_link",
            "label": "Image Link"
    },
      {
        "type": "select",
        "id": "layout",
        "label": "Image position",
        "default": "left",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ]
      },
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Image with text"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text",
        "default": "<p>Pair text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>"
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Button label"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      },
      {
        "type": "select",
        "id": "text_alignment",
        "label": "Text alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ],
        "default": "left"
      }
    ],
    "presets": [
      {
        "name": "Image with text",
        "category": "Image"
      }
    ]
  }
{% endschema %}

  include-image-text.liquid

<div class="container">
  <div class="sixteen columns">
    <div class="homepage_content section clearfix image_with_text image-text--align-{{ layout }}">
      {% capture image_layout %}
        <div class="eight columns image_column {% if layout == 'left' %}alpha animate_left{% else %}omega animate_right{% endif %}">
        {% if image != blank %}
          {% if block.settings.image_link != blank %}
              <a href="{{ block.settings.image_link }}">
            {% endif %}
            <img  src="{{ image | img_url: '300x' }}"
                  alt="{{ image.alt }}"
                  data-src="{{ image | img_url: '2048x' }}"
                  class="lazyload lazyload--fade-in"
                  data-sizes="auto"
                  data-srcset=" {{ image | img_url: '2048x' }} 2048w,
                                {{ image | img_url: '1600x' }} 1600w,
                                {{ image | img_url: '1200x' }} 1200w,
                                {{ image | img_url: '1000x' }} 1000w,
                                {{ image | img_url: '800x' }} 800w,
                                {{ image | img_url: '600x' }} 600w,
                                {{ image | img_url: '400x' }} 400w"
                   />
            {% if block.settings.image_link != blank %}
              </a>
{% endif %}
          {% else %}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
        </div>
      {% endcapture %}

[WildStone]

Hey All,

I ended up solving this myself last night after hours of reading!

In the include-image-text.liquid code I had to change 'block' to 'section'. So my final code looked like the below.

I hope this helps some people

{% capture image_layout %}
        <div class="eight columns image_column {% if layout == 'left' %}alpha animate_left{% else %}omega animate_right{% endif %}">
        {% if image != blank %}
          {% if section.settings.image_link != blank %}
              <a href="{{ section.settings.image_link }}">
            {% endif %}
            <img  src="{{ image | img_url: '300x' }}"
                  alt="{{ image.alt }}"
                  data-src="{{ image | img_url: '2048x' }}"
                  class="lazyload lazyload--fade-in"
                  data-sizes="auto"
                  data-srcset=" {{ image | img_url: '2048x' }} 2048w,
                                {{ image | img_url: '1600x' }} 1600w,
                                {{ image | img_url: '1200x' }} 1200w,
                                {{ image | img_url: '1000x' }} 1000w,
                                {{ image | img_url: '800x' }} 800w,
                                {{ image | img_url: '600x' }} 600w,
                                {{ image | img_url: '400x' }} 400w"
                   />
            {% if section.settings.image_link != blank %}
              </a>
{% endif %}
          {% else %}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
        </div>
      {% endcapture %}

[Chris_L_]

@WildStone

Sorry for the late response but glad you figured things out. Unfortunately, we're migrating off shopify so I won't have a lot of reason to contribute anything in here anymore. Wish all of you the best of luck though!