How to make images clickable on "text columns with images" for Blockshop theme please?

Store Design
, ,
1

Hello everyone,

I’ve “text columns with images” section on my website with Blockshop theme and I’m wondering how can I do to make images clickable on this section?

Thank you all.

Here is sections/text-columns.liquid code:

{%- liquid
assign aspect_ratio = section.settings.aspect-ratio
assign bg_color = section.settings.background-color
assign block_spacing = section.settings.block-spacing
assign container_width = section.settings.container-width
assign columns = section.settings.width
assign description = section.settings.description
assign heading = section.settings.heading
assign image_width = section.settings.image-width
assign link_text = section.settings.link-text
assign link_url = section.settings.link-url
assign mobile_columns = section.settings.mobile-width
assign overline = section.settings.overline
assign spacing_above = section.settings.spacing-above
assign spacing_below = section.settings.spacing-below
assign text_alignment = section.settings.text-alignment
assign top_border = section.settings.top-border
assign white_text = section.settings.white-text

assign header_text_exists = true
if overline == blank and heading == blank and description == blank
assign header_text_exists = false
endif

assign footer_text_exists = true
if link_text == blank
assign footer_text_exists = false
endif
-%}

{%- capture sizes -%}
‘(max-width: 767px) {{ 100 | divided_by: mobile_columns }}vw, {{ 100 | divided_by: columns }}vw’
{%- endcapture %}

{%- if header_text_exists -%}
{%- unless overline == blank -%}

{{- overline | escape -}}

{%- endunless -%}

{%- unless heading == blank -%}

{{- heading | escape -}}

{%- endunless -%}

{%- unless description == blank -%}

{{- description -}}

{%- endunless -%}
{%- endif -%}
{%- for block in section.blocks -%} {%- liquid assign block_link_url = block.settings.link-url assign block_link_text = block.settings.link-text assign block_description = block.settings.description assign image = block.settings.image assign link_wrapper = false assign show_image = block.settings.show-image assign title = block.settings.title

if block_link_text == blank and block_link_url != blank and block_description == blank
assign link_wrapper = true
endif
-%}

{%- endfor -%}

{%- if footer_text_exists -%}

{%- endif -%}

{% schema %}
{
“name”: “Text columns with images”,
“class”: “section–text-columns”,
“settings”: [
{
“type”: “header”,
“content”: “Layout and Color”
},
{
“id”: “top-border”,
“label”: “Top border”,
“type”: “checkbox”,
“default”: false
},
{
“id”: “spacing-above”,
“label”: “Spacing above”,
“type”: “checkbox”,
“default”: true
},
{
“id”: “spacing-below”,
“label”: “Spacing below”,
“type”: “checkbox”,
“default”: true
},
{
“id”: “block-spacing”,
“label”: “Show spacing between blocks”,
“type”: “checkbox”,
“default”: true
},
{
“id”: “background-color”,
“label”: “Background color”,
“type”: “select”,
“options”: [
{
“label”: “None”,
“value”: “none”
},
{
“label”: “Light”,
“value”: “light”
},
{
“label”: “Dark”,
“value”: “dark”
},
{
“label”: “Accent 1”,
“value”: “accent-1”
},
{
“label”: “Accent 2”,
“value”: “accent-2”
}
],
“default”: “none”
},
{
“id”: “white-text”,
“label”: “Use white text color”,
“type”: “checkbox”,
“default”: false
},
{
“id”: “container-width”,
“label”: “Maximum width of container”,
“type”: “select”,
“options”: [
{
“label”: “Extra small”,
“value”: “1”
},
{
“label”: “Small”,
“value”: “2”
},
{
“label”: “Medium”,
“value”: “3”
},
{
“label”: “Large”,
“value”: “4”
},
{
“label”: “Extra large”,
“value”: “5”
},
{
“label”: “Full width”,
“value”: “6”
}
],
“default”: “4”
},
{
“id”: “width”,
“label”: “Blocks per row”,
“type”: “range”,
“min”: 2,
“max”: 6,
“step”: 1,
“default”: 4
},
{
“id”: “aspect-ratio”,
“label”: “Image size”,
“type”: “select”,
“options”: [
{ “label”: “Natural”, “value”: “natural” },
{ “label”: “Square (1:1)”, “value”: “square” },
{ “label”: “Landscape (4:3)”, “value”: “landscape” },
{ “label”: “Portrait (2:3)”, “value”: “portrait” }
],
“default”: “square”
},
{
“id”: “image-width”,
“label”: “Image width”,
“type”: “range”,
“min”: 0,
“max”: 200,
“step”: 10,
“default”: 0,
“info”: “Set to 0 for auto sizing”
},
{
“id”: “text-alignment”,
“label”: “Text alignment”,
“type”: “text_alignment”,
“default”: “center”
},
{
“type”: “header”,
“content”: “Content”
},
{
“id”: “overline”,
“label”: “Overline”,
“type”: “text”,
“default”: “Overline text”
},
{
“type”: “text”,
“id”: “heading”,
“label”: “Heading”,
“default”: “Text columns with images”
},
{
“id”: “description”,
“type”: “richtext”,
“label”: “Description”
},
{
“type”: “url”,
“id”: “link-url”,
“label”: “Link”
},
{
“type”: “text”,
“id”: “link-text”,
“label”: “Optional link”
},
{
“type”: “header”,
“content”: “Mobile”
},
{
“id”: “mobile-width”,
“label”: “Blocks per row for small devices”,
“type”: “radio”,
“options”: [
{ “value”: “1”, “label”: “1” },
{ “value”: “2”, “label”: “2” }
],
“default”: “1”
}
],
“blocks”: [
{
“type”: “image”,
“name”: “Column”,
“settings”: [
{
“id”: “show-image”,
“label”: “Show image”,
“type”: “checkbox”,
“default”: true
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Title”,
“default”: “Add a title or tagline”
},
{
“id”: “description”,
“type”: “richtext”,
“label”: “Description”,
“default”: “

Explain a set of product features, add illustrations, infographics, logo lists, or link to pages.

”
},
{
“type”: “url”,
“id”: “link-url”,
“label”: “Link”
},
{
“id”: “link-text”,
“label”: “Optional link”,
“type”: “text”,
“default”: “Optional link”
}
]
}
],
“presets”: [
{
“name”: “Text columns with images”,
“blocks”: [
{
“type”: “image”
},
{
“type”: “image”
},
{
“type”: “image”
},
{
“type”: “image”
}
]
}
],
“disabled_on”: {
“groups”: [“aside”]
}
}
{% endschema %}

2
  • Locate the section of the code that handles the image rendering inside the block (around lines where block.settings.image and block.settings.link-url are used).
  1. You will wrap the image with the anchor tag (), linking it to block.settings.link-url if a link exists.

adjustements


  {%- if show_image -%}
    

      {%- if image -%}
        {%- if block_link_url != blank -%}
          
            {{ image | image_url: width: twice_width | image_tag: widths: "300, 500, 767, 1000, 1200, 1500", sizes: sizes }}
          
        {%- else -%}
          {{ image | image_url: width: twice_width | image_tag: widths: "300, 500, 767, 1000, 1200, 1500", sizes: sizes }}
        {%- endif -%}
      {%- else -%}
        {%- render "placeholder", type: "image" -%}
      {%- endif -%}
    

  {%- endif -%}
1 Like
3

Thank you so much!