Links in "Text Columns with Images"

Comments

6 comments

  • Avatar
    Donna

    Would you share how you did this? It would be a great to have a link on the picture the cluttering up the page with buttons.

     

    1
    Comment actions Permalink
  • Avatar
    Robert Foster

    I couldn't figure this out either, Donna. For the other templates one can just paste a link and not use a button, but evidently not for this one.

    As long as we're on this, I'd also like to assign a link to an image in a gallery.

    1
    Comment actions Permalink
  • Avatar
    Christian from Epium

    Glad to hear it. And you're right - sections, not snippets. Fingers faster than brain! ;)

    1
    Comment actions Permalink
  • Avatar
    Christian from Epium

    I edited the code - in snippets/text-columns-with-images.liquid I changed:

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

    Around the IMG and H3:

    ORIGINAL:

    {% if block.settings.enable_image %}
    {% if block.settings.image != blank %}
    <p>
    {% include 'image-element', image: block.settings.image.src, alt: block.settings.image.alt %}
    </p>
    {% else %}
    <p>
    {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
    </p>
    {% endif %}
    {% endif %}
    {% if block.settings.title != blank %}
    <h3 class="{{ block.settings.heading_size }}">{{ block.settings.title | escape }}</h3>
    {% endif %}

    CHANGED TO:

    {% if block.settings.enable_image %}
    {% if block.settings.button_link != blank %}<a href="{{ block.settings.button_link }}">{% endif %}
    {% if block.settings.image != blank %}
    <p>
    {% include 'image-element', image: block.settings.image.src, alt: block.settings.image.alt %}
    </p>
    {% else %}
    <p>
    {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
    </p>
    {% endif %}
    {% if block.settings.button_link != blank %}</a>{% endif %}
    {% endif %}
    {% if block.settings.title != blank %}
    {% if block.settings.button_link != blank %}<a href="{{ block.settings.button_link }}">{% endif %}
    <h3 class="{{ block.settings.heading_size }}">{{ block.settings.title | escape }}</h3>
    {% if block.settings.button_link != blank %}</a>{% endif %}
    {% endif %}

    That simply uses the code from the link and sets the URL around the H3 Header and the IMG tags.

    0
    Comment actions Permalink
  • Avatar
    Donna

    Thank you VERY much! I will give it a shot :) - This really should be part of the theme -

    0
    Comment actions Permalink
  • Avatar
    Donna

    Thank you Christian! - I gave it a go and it worked exactly like I needed it to! - Just a note that the code was under "Sections" and not "snippets"

    0
    Comment actions Permalink

Please sign in to leave a comment.