Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

JunNa
Shopify Partner
10 0 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 %}

<div
class="featured-grid--root"
data-section-id="{{ section.id }}"
data-aspect-ratio="{{ aspect_ratio }}"
data-background-color="{{ bg_color }}"
data-block-spacing="{{ block_spacing }}"
data-container="section"
data-container-width="{{ container_width }}"
data-footer-text-exists="{{ footer_text_exists }}"
data-header-text-exists="{{ header_text_exists }}"
{% if white_text %}
data-text-color="white"
{% endif %}
data-mobile-overlay="false"
data-spacing-above="{{ spacing_above }}"
data-spacing-below="{{ spacing_below }}"
data-text-alignment="{{ text_alignment }}"
data-text-position="bottom"
data-top-border="{{ top_border }}"
>
{%- if header_text_exists -%}
<div class="featured-grid--header" data-container="block">
{%- unless overline == blank -%}
<p data-item="overline">
{{- overline | escape -}}
</p>
{%- endunless -%}

{%- unless heading == blank -%}
<h2 class="featured-grid--heading" data-item="section-heading">
{{- heading | escape -}}
</h2>
{%- endunless -%}

{%- unless description == blank -%}
<h3 class="featured-grid--description" data-item="paragraph">
{{- description -}}
</h3>
{%- endunless -%}
</div>
{%- endif -%}

<div class="featured-grid--body">
<div
class="featured-grid--body--container"
data-container="panel"
data-columns="{{ columns }}"
data-mobile-columns="{{ mobile_columns }}"
data-block-spacing="{{ block_spacing }}"
{% unless settings.transitions--other %}
data-transition-container="{{ section.id }}"
data-transition-type="fade-in"
data-transition-cascade="horizontal"
data-transition-cascade-interval="200"
{% endunless %}
>
{%- 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
-%}

<div
class="featured-grid--item"
data-image-enabled="{{ show_image }}"
{% unless settings.transitions--other %}
data-transition-item="{{ section.id }}"
{%- endunless -%}
{{ block.shopify_attributes }}
>
{%- if link_wrapper -%}
<a
class="featured-grid--item--link-wrapper"
href="{{ block_link_url }}"
{%- if title != blank -%}
aria-label="{{ title }}"
{%- elsif heading != blank -%}
aria-label="{{ heading }}"
{%- else -%}
aria-label="{{ image.alt }}"
{%- endif -%}
>
{%- endif -%}

<div class="featured-grid--item--container">
{%- if show_image -%}
<div
class="featured-grid--item--image"
data-item="image"
{% unless settings.transitions--image %}
data-transition-item
data-transition-type="zoom-in"
data-transition-trigger="hover"
{% endunless %}
{% unless image_width == 0 %}
style="max-width:{{ image_width }}px;"
{% endunless %}
>
{%- if image -%}
{%- assign twice_width = image.width | times: 2 -%}
{{-
image |
image_url: width: twice_width |
image_tag:
widths: "300, 500, 767, 1000, 1200, 1500",
sizes: sizes
-}}
{%- else -%}
{%- render "placeholder", type: "image" -%}
{%- endif -%}
</div>
{%- endif -%}

{%- if title != blank or block_description != blank or block_link_text != blank -%}
<div class="featured-grid--item--text">
{%- unless title == blank -%}
<h3 class="featured-grid--item--title" data-item="block-heading">
{{- title | escape -}}
</h3>
{%- endunless -%}

{%- unless block_description == blank -%}
<div class="featured-grid--item--description" data-item="rte-content">
{{- block_description -}}
</div>
{%- endunless -%}

{%- unless block_link_text == blank -%}
<div class="featured-grid--item--link" data-item="block-link">
<a
class="featured-grid--item--link-container"
{% unless block_link_url == blank %}
href="{{ block_link_url }}"
{% endunless %}
>
{{- block_link_text -}}
</a>
</div>
{%- endunless -%}
</div>
{%- endif -%}

</div>

{%- if link_wrapper -%}
</a>
{%- endif -%}
</div>

{%- endfor -%}
</div>
</div>

{%- if footer_text_exists -%}
<div class="featured-grid--footer" data-container="panel">
<div class="featured-grid--footer--block" data-container="block">
<a
class="featured-grid--footer--button"
href="{{ link_url }}"
data-item="{{ settings.buttons--style }}"
data-text="{{- link_text -}}"
{% unless settings.transitions--buttons %}
data-transition-button
{% endunless %}
>
<div class="featured-grid--footer--button-container">
{{- link_text -}}
</div>
</a>
</div>
</div>
{%- endif -%}
</div>

{% 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": "<p>Explain a set of product features, add illustrations, infographics, logo lists, or link to pages.</p>"
},
{
"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 %}

Accepted Solution (1)

EcomGraduates
Shopify Partner
781 68 112

This is an accepted solution.

 

  • 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 (<a>), linking it to block.settings.link-url if a link exists.

 

adjustements 

 

<div class="featured-grid--item--container">
  {%- if show_image -%}
    <div
      class="featured-grid--item--image"
      data-item="image"
      {% unless settings.transitions--image %}
      data-transition-item
      data-transition-type="zoom-in"
      data-transition-trigger="hover"
      {% endunless %}
      {% unless image_width == 0 %}
      style="max-width:{{ image_width }}px;"
      {% endunless %}
    >
      {%- if image -%}
        {%- if block_link_url != blank -%}
          <a href="{{ block_link_url }}">
            {{ image | image_url: width: twice_width | image_tag: widths: "300, 500, 767, 1000, 1200, 1500", sizes: sizes }}
          </a>
        {%- 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 -%}
    </div>
  {%- endif -%}
</div>

 

 


 If this fixed your issue, likes and accepting as a solution are highly appreciated
|  Build an online presence with our custom-built Shopify Theme: EcomifyTheme
|  Check out our reviews: Trustpilot Reviews
|  We are Shopify Partners: EcomGraduates Shopify Partner



View solution in original post

Replies 2 (2)

EcomGraduates
Shopify Partner
781 68 112

This is an accepted solution.

 

  • 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 (<a>), linking it to block.settings.link-url if a link exists.

 

adjustements 

 

<div class="featured-grid--item--container">
  {%- if show_image -%}
    <div
      class="featured-grid--item--image"
      data-item="image"
      {% unless settings.transitions--image %}
      data-transition-item
      data-transition-type="zoom-in"
      data-transition-trigger="hover"
      {% endunless %}
      {% unless image_width == 0 %}
      style="max-width:{{ image_width }}px;"
      {% endunless %}
    >
      {%- if image -%}
        {%- if block_link_url != blank -%}
          <a href="{{ block_link_url }}">
            {{ image | image_url: width: twice_width | image_tag: widths: "300, 500, 767, 1000, 1200, 1500", sizes: sizes }}
          </a>
        {%- 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 -%}
    </div>
  {%- endif -%}
</div>

 

 


 If this fixed your issue, likes and accepting as a solution are highly appreciated
|  Build an online presence with our custom-built Shopify Theme: EcomifyTheme
|  Check out our reviews: Trustpilot Reviews
|  We are Shopify Partners: EcomGraduates Shopify Partner



JunNa
Shopify Partner
10 0 1

Thank you so much!