Add Clickable Image to image with text template on Sitar Theme for our home page

[ghayes54]

Is there any way to change the image with text template on the Sitar Home Page theme so the images can have clickable links?

[shahrozbabar5]

@ghayes54 

Yes, you can make images in the Image with Text section clickable in the Sitar theme by modifying the section code:

Steps:

1. Go to Online Store > Themes > ... > Edit code.

2. Search for the section file: image-with-text.liquid or similar.

3. Wrap the img tag with an anchor tag like this:

{% if section.settings.image_link != blank %}
  <a href="{{ section.settings.image_link }}">
    <img src="{{ section.settings.image | img_url: 'master' }}" alt="{{ section.settings.image.alt }}">
  </a>
{% else %}
  <img src="{{ section.settings.image | img_url: 'master' }}" alt="{{ section.settings.image.alt }}">
{% endif %}

1. Then in the settings_schema.json or the section schema, add:

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

This will add a URL field in the section settings, allowing you to set a clickable link for the image.

If it resolves your issue, please mark my answer as a solution. Are you comfortable doing it on your own, or need a detailed guide? Or if you want to hire an expert to do it for you, I'm here. Please DM.

[ghayes54]

This is what my img tag looks like... Not sure how to use your suggestion

{%- when 'sign_image' -%}
<div class="sign_image">
{% if block.settings.sign_image != blank %}
<img class="img-fluid lazyload"
srcset="{{ block.settings.sign_image | image_url: width: 140, height: 50 }} 140w"
src="{{ block.settings.sign_image | image_url: width: 140 }}"
width="140" height="50"
alt="{{ block.settings.sign_image.alt | escape }}" loading="lazy"/>
{% else %}
<div class="dummysvg">{{ 'collection-apparel-3' | placeholder_svg_tag: 'placeholder-svg' }}</div>
{% endif %}
</div>

{%- when 'author-text' -%}
<ul class="imgwauthor">
<li class="{{ block.settings.image_corners }}">
{% if block.settings.authorimage != blank %}
<img class="img-fluid lazyload"
srcset="{{ block.settings.authorimage | image_url: width: 70, height: 70 }} 70w"
src="{{ block.settings.authorimage | image_url: width: 70 }}"
width="70" height="70"
alt="{{ block.settings.authorimage.alt | escape }}" loading="lazy"/>
{% else %}
<div class="dummysvg">{{ 'collection-apparel-4' | placeholder_svg_tag: 'placeholder-svg' }}</div>
{% endif %}
</li>
<li>
<h3 class="h4">{{ block.settings.authorname | escape }}</h3>
<p>{{ block.settings.authorpos | escape }}</p>
</li>
</ul>

[ghayes54]

I have boldly added the code before and after the first img tag.. BUT the JSON text (which I confirmed is valid) is rejected by my Sitar Theme... says invalid json element (again even though it passes a third party JSON tool) any thoughts?

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

[ghayes54]

Seems like all the JSON entries in the Sitar theme start with

"name": "Corner radius",
"settings": [

BEFORE any