How can I link an image to a specific div in my code?

Store Design
1

Hi to all,

I am very new to all this and I need some help with this.

I want to link href=“{{ column.settings.link }}” to the image shown in every column, I tried all combinations according to a youtube video but I can not make it work. It seems I can not wrap the <a correctly to the correct div.

Can somebody help?

This is the existing code:

{% assign settings = section.settings %}

{% render 'section-header' %}
{%- for column in section.blocks -%}
{%- if column.settings.image != blank -%}
{% render 'image' with image: column.settings.image %}
{%- endif -%} {%- if column.settings.title -%}
{{ column.settings.title }}
{%- endif -%} {%- if column.settings.text -%}
{{ column.settings.text }}
{%- endif -%} {%- if column.settings.link != blank and column.settings.link_text != blank -%} {{ column.settings.link_text }} {%- endif -%}
{%- else -%}

{% comment %} Placeholder content {% endcomment %}
{%- assign headings = “Heading|Heading|Heading” | split: ‘|’ -%}
{%- assign text =
“Start here. Introduce your vision, or explain why what you do or sell is superior to your competitors.|
Get into your process a bit. The quality of handiwork, proprietary knowledge, or materials that you use that make your products better.|
End it with an action item that the user can take advantage of. Link to a more in-depth page, or go straight to a collection. Your call.”
| split: ‘|’
-%}

{%- for placeholder in headings -%}

{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{{ headings[forloop.index0] }}
{{ text[forloop.index0] }}
Learn more →
{%- endfor -%} {%- endfor -%}

{% render ‘carousel-pagination’ %}

{% schema %}
{
“name”: “Text columns with images”,
“class”: “inline-section”,
“settings”: [
{
“id”: “per_row”,
“type”: “range”,
“label”: “t:sections.text_columns_with_images.settings.per_row.label”,
“min”: 1,
“max”: 4,
“step”: 1,
“default”: 3
},
{
“id”: “image_max_width”,
“type”: “range”,
“label”: “t:sections.text_columns_with_images.settings.image_max_width.label”,
“min”: 50,
“max”: 200,
“step”: 10,
“unit”: “px”,
“default”: 100
},
{
“id”: “circle”,
“type”: “checkbox”,
“label”: “t:sections.text_columns_with_images.settings.circle.label”,
“default”: true
}
],
“blocks”: [
{
“type”: “column”,
“name”: “t:sections.text_columns_with_images.blocks.name”,
“settings”: [
{
“id”: “image”,
“type”: “image_picker”,
“label”: “t:sections.text_columns_with_images.blocks.settings.image.label”
},
{
“id”: “title”,
“type”: “text”,
“label”: “t:sections.text_columns_with_images.blocks.settings.title.label”,
“default”: “Heading”
},
{
“id”: “text”,
“type”: “richtext”,
“label”: “t:sections.text_columns_with_images.blocks.settings.text.label”,
“default”: “

Introduce your vision, or explain why what you do or sell is superior to your competitors.

”
},
{
“id”: “link”,
“type”: “url”,
“label”: “t:sections.text_columns_with_images.blocks.settings.link.label”
},
{
“id”: “link_text”,
“type”: “text”,
“label”: “t:sections.text_columns_with_images.blocks.settings.link_text.label”
}
]
}
],
“presets”: [
{
“name”: “t:sections.text_columns_with_images.presets.name”,
“category”: “Text”,
“blocks”: [
{
“type”: “column”,
“settings”: {
“title”: “Heading”,
“text”: “

Introduce your vision, or explain why what you do or sell is superior to your competitors.

”,
“link”: “#”,
“link_text”: “Link text”
}
},
{
“type”: “column”,
“settings”: {
“title”: “Heading”,
“text”: “

Introduce your vision, or explain why what you do or sell is superior to your competitors.

”,
“link”: “#”,
“link_text”: “Link text”
}
},
{
“type”: “column”,
“settings”: {
“title”: “Heading”,
“text”: “

Introduce your vision, or explain why what you do or sell is superior to your competitors.

”,
“link”: “#”,
“link_text”: “Link text”
}
}
]
}
]
}
{% endschema %}

2

Hello @Ouuzi

Please replace the above code with my code I have made changes here

Code starting from here:

{% assign settings = section.settings %}

{% render 'section-header' %}
{%- for column in section.blocks -%}
{%- if column.settings.image != blank -%}
{%- if column.settings.link != blank and column.settings.link_text != blank -%} {% render 'image' with image: column.settings.image %} {% else %} {% render 'image' with image: column.settings.image %} {% end if %}
{%- endif -%} {%- if column.settings.title -%}
{{ column.settings.title }}
{%- endif -%} {%- if column.settings.text -%}
{{ column.settings.text }}
{%- endif -%} {%- if column.settings.link != blank and column.settings.link_text != blank -%} {{ column.settings.link_text }} {%- endif -%}
{%- else -%}

{% comment %} Placeholder content {% endcomment %}
{%- assign headings = “Heading|Heading|Heading” | split: ‘|’ -%}
{%- assign text =
“Start here. Introduce your vision, or explain why what you do or sell is superior to your competitors.|
Get into your process a bit. The quality of handiwork, proprietary knowledge, or materials that you use that make your products better.|
End it with an action item that the user can take advantage of. Link to a more in-depth page, or go straight to a collection. Your call.”
| split: ‘|’
-%}

{%- for placeholder in headings -%}

{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{{ headings[forloop.index0] }}
{{ text[forloop.index0] }}
Learn more →
{%- endfor -%} {%- endfor -%}

{% render ‘carousel-pagination’ %}

{% schema %}
{
“name”: “Text columns with images”,
“class”: “inline-section”,
“settings”: [
{
“id”: “per_row”,
“type”: “range”,
“label”: “t:sections.text_columns_with_images.settings.per_row.label”,
“min”: 1,
“max”: 4,
“step”: 1,
“default”: 3
},
{
“id”: “image_max_width”,
“type”: “range”,
“label”: “t:sections.text_columns_with_images.settings.image_max_width.label”,
“min”: 50,
“max”: 200,
“step”: 10,
“unit”: “px”,
“default”: 100
},
{
“id”: “circle”,
“type”: “checkbox”,
“label”: “t:sections.text_columns_with_images.settings.circle.label”,
“default”: true
}
],
“blocks”: [
{
“type”: “column”,
“name”: “t:sections.text_columns_with_images.blocks.name”,
“settings”: [
{
“id”: “image”,
“type”: “image_picker”,
“label”: “t:sections.text_columns_with_images.blocks.settings.image.label”
},
{
“id”: “title”,
“type”: “text”,
“label”: “t:sections.text_columns_with_images.blocks.settings.title.label”,
“default”: “Heading”
},
{
“id”: “text”,
“type”: “richtext”,
“label”: “t:sections.text_columns_with_images.blocks.settings.text.label”,
“default”: “

Introduce your vision, or explain why what you do or sell is superior to your competitors.

”
},
{
“id”: “link”,
“type”: “url”,
“label”: “t:sections.text_columns_with_images.blocks.settings.link.label”
},
{
“id”: “link_text”,
“type”: “text”,
“label”: “t:sections.text_columns_with_images.blocks.settings.link_text.label”
}
]
}
],
“presets”: [
{
“name”: “t:sections.text_columns_with_images.presets.name”,
“category”: “Text”,
“blocks”: [
{
“type”: “column”,
“settings”: {
“title”: “Heading”,
“text”: “

Introduce your vision, or explain why what you do or sell is superior to your competitors.

”,
“link”: “#”,
“link_text”: “Link text”
}
},
{
“type”: “column”,
“settings”: {
“title”: “Heading”,
“text”: “

Introduce your vision, or explain why what you do or sell is superior to your competitors.

”,
“link”: “#”,
“link_text”: “Link text”
}
},
{
“type”: “column”,
“settings”: {
“title”: “Heading”,
“text”: “

Introduce your vision, or explain why what you do or sell is superior to your competitors.

”,
“link”: “#”,
“link_text”: “Link text”
}
}
]
}
]
}
{% endschema %}