[Debut Theme] Text Columns With Image - Issue with Placeholder vs. Image Size

Solved
Highlighted
Tourist
9 0 1

I created a new section file in order to make the images in the 'Text Columns With Image' linked.  The placeholders are sized correctly, the links work, however, when I insert a photo, the photo shrinks.  How can I keep the photos the same size as the placeholders?

1.jpg

Here is my code:

<div class="page-width">
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h2>{{ section.settings.title | escape }}</h2>
</div>
{% endif %}

<div class="grid {% unless section.blocks.size == 5 %}grid--uniform{% endunless %} grid--flush-bottom">
{%- assign grid_item_width = 'medium-up--one-quarter' -%}
{%- assign max_height = 345 -%}
{% case section.blocks.size %}

{% when 1 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{%- assign max_height = 530 -%}
{% when 2 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{%- assign max_height = 530 -%}
{% when 4 %}
{%- assign grid_item_width = 'medium-up--one-quarter' -%}
{%- assign max_height = 530 -%}
{% endcase %}
{% for block in section.blocks %}
{% if section.blocks.size == 5 and forloop.index < 3 %}
{%- assign column_width = 'medium-up--one-half' -%}
{%- assign max_height = 530 -%}
{% else %}
{%- assign column_width = grid_item_width -%}
{% endif %}
{% if section.blocks.size == 5 and forloop.index == 3 %}<div class="clearfix"></div>{% endif %}

<div class="grid__item {{ column_width }} {{ section.settings.align_text }} small--one-half" {{ block.shopify_attributes }}>
{% if block.settings.enable_image %}
{% if block.settings.image != blank %}

{% if block.settings.button_label == blank and block.settings.button_link != blank %}
<a href="{{ block.settings.button_link }}">
<p>
{{ block.settings.image | img_url: image_size | img_tag }}
</p>
</a>
{% else%}
<p><a href="{{ block.settings.button_link }}">
{{ block.settings.image | img_url: image_size | img_tag }}
</a>
</p>
{% endif %}
{% else %}
<p>
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</p>
{% endif %}
{% endif %}
{% if block.settings.title != blank %}
<h4 class="uppercase home--uppercase">{{ block.settings.title | escape }}</h4>
{% endif %}
{% if block.settings.text != blank %}
<div class="rte">{{ block.settings.text }}</div>
{% endif %}
{% if block.settings.button_label != blank and block.settings.button_link != blank %}
<a href="{{ block.settings.button_link }}" class="btn btn--clear btn--square uppercase">
{{ block.settings.button_label | escape }}
</a>
{% endif %}
</div>
{% endfor %}
</div>

{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
</div>
</div>

{% schema %}
{
"name": "Text columns with images",
"class": "index-section",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Text columns with images"
},
{
"type": "select",
"id": "homepage_columns_color",
"label": "Background color",
"default": "homepage--white",
"options": [
{ "value": "homepage--white", "label": "White"},
{ "value": "homepage--light", "label": "Light"},
{ "value": "homepage--splash", "label": "Accent"},
{ "value": "homepage--dark", "label": "Dark"}
]
},
{
"type": "select",
"id": "align_text",
"label": "Text alignment",
"default": "text-center",
"options": [
{
"value": "text-left",
"label": "Left"
},
{
"value": "text-center",
"label": "Centered"
}
]
}
],
"blocks": [
{
"type": "text_block",
"name": "Column",
"settings": [
{
"type": "checkbox",
"id": "enable_image",
"label": "Show image",
"default": true
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Add a title or tagline"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Share blog posts, products, or promotions with your customers. Use this text to describe products, share details on availability and style, or as a space to display recent reviews or FAQs.</p>"
},
{
"type": "text",
"id": "button_label",
"label": "Button label",
"info": "Leave blank to link from image"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
}
]
}
],
"presets": [
{
"name": "Text columns custom",
"category": "Text",
"blocks": [
{
"type": "text_block"
},
{
"type": "text_block"
},
{
"type": "text_block"
}
]
}
]
}
{% endschema %}



Highlighted
Shopify Expert
1380 112 211

This is an accepted solution.

Hi,

 

Here is the updated code with the fixes. Please let me know if it works for you.

 

<div class="page-width">
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h2>{{ section.settings.title | escape }}</h2>
</div>
{% endif %}

<div class="grid {% unless section.blocks.size == 5 %}grid--uniform{% endunless %} grid--flush-bottom">
{%- assign grid_item_width = 'medium-up--one-quarter' -%}
{%- assign max_height = 345 -%}
{% case section.blocks.size %}

{% when 1 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{%- assign max_height = 530 -%}
{% when 2 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{%- assign max_height = 530 -%}
{% when 4 %}
{%- assign grid_item_width = 'medium-up--one-quarter' -%}
{%- assign max_height = 530 -%}
{% endcase %}
{% for block in section.blocks %}
{% if section.blocks.size == 5 and forloop.index < 3 %}
{%- assign column_width = 'medium-up--one-half' -%}
{%- assign max_height = 530 -%}
{% else %}
{%- assign column_width = grid_item_width -%}
{% endif %}
{% if section.blocks.size == 5 and forloop.index == 3 %}<div class="clearfix"></div>{% endif %}

<div class="grid__item {{ column_width }} {{ section.settings.align_text }} small--one-half" {{ block.shopify_attributes }}>
{% if block.settings.enable_image %}
{% if block.settings.image != blank %}

{% if block.settings.button_label == blank and block.settings.button_link != blank %}
<a href="{{ block.settings.button_link }}">
<p>
{{ block.settings.image | img_url: "large" | img_tag }}
</p>
</a>
{% else%}
<p><a href="{{ block.settings.button_link }}">
{{ block.settings.image | img_url: "large" | img_tag }}
</a>
</p>
{% endif %}
{% else %}
<p>
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</p>
{% endif %}
{% endif %}
{% if block.settings.title != blank %}
<h4 class="uppercase home--uppercase">{{ block.settings.title | escape }}</h4>
{% endif %}
{% if block.settings.text != blank %}
<div class="rte">{{ block.settings.text }}</div>
{% endif %}
{% if block.settings.button_label != blank and block.settings.button_link != blank %}
<a href="{{ block.settings.button_link }}" class="btn btn--clear btn--square uppercase">
{{ block.settings.button_label | escape }}
</a>
{% endif %}
</div>
{% endfor %}
</div>

{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
</div>
</div>

{% schema %}
{
"name": "Text columns with images",
"class": "index-section",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Text columns with images"
},
{
"type": "select",
"id": "homepage_columns_color",
"label": "Background color",
"default": "homepage--white",
"options": [
{ "value": "homepage--white", "label": "White"},
{ "value": "homepage--light", "label": "Light"},
{ "value": "homepage--splash", "label": "Accent"},
{ "value": "homepage--dark", "label": "Dark"}
]
},
{
"type": "select",
"id": "align_text",
"label": "Text alignment",
"default": "text-center",
"options": [
{
"value": "text-left",
"label": "Left"
},
{
"value": "text-center",
"label": "Centered"
}
]
}
],
"blocks": [
{
"type": "text_block",
"name": "Column",
"settings": [
{
"type": "checkbox",
"id": "enable_image",
"label": "Show image",
"default": true
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Add a title or tagline"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Share blog posts, products, or promotions with your customers. Use this text to describe products, share details on availability and style, or as a space to display recent reviews or FAQs.</p>"
},
{
"type": "text",
"id": "button_label",
"label": "Button label",
"info": "Leave blank to link from image"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
}
]
}
],
"presets": [
{
"name": "Text columns custom",
"category": "Text",
"blocks": [
{
"type": "text_block"
},
{
"type": "text_block"
},
{
"type": "text_block"
}
]
}
]
}
{% endschema %}

 

 

Thanks!

 

Would like to add new functionality or customize an existing one, please hire us.
If helpful then please Like and Accept the solution.
Email: info@perennialsolution.com
Skype: infoperennialsolution

Highlighted
Tourist
9 0 1

Oh my gosh!  You are AMAZING!  Thank you so very much!!

0 Likes
Highlighted
Shopify Expert
1380 112 211

Thanks for the kind words! :)

Please feel free to reach out at info@perennialsolution.com for any further tweaks in future.

0 Likes
Highlighted
New Member
2 0 0

Thank you so much for sharing this! It works well in Brooklyn theme too, albeit in a custom page I setup where the columns does not go next to each other in desktop view whilst it does it perfectly in mobile version. Why is this? I'd be so grateful for help!

0 Likes
Highlighted
New Member
2 0 0

@Qualitycheck ;-)


@Ilso wrote:

Thank you so much for sharing this! It works well in Brooklyn theme too, albeit in a custom page I setup where the columns does not go next to each other in desktop view whilst it does it perfectly in mobile version. Why is this? I'd be so grateful for help!


 

0 Likes
Highlighted
New Member
4 0 0

Hi,

 

I used this code and it works very well in Brooklyn theme, except I cannot figure out how to get it to format into multiple columns. All of the items just stay in one column either center or left aligned. Any advice on how to have it display as multiple columns (preferably 4) with this code?

 

Thank you for the code you already shared, it has been a huge help, this is the last part I am stuck on.

0 Likes
Highlighted
Tourist
32 0 1

hello! i used this code and it worked well! however when i go to the section it prompted this error

 

HTML error found

Broken HTML has been detected in your theme’s feature-columns.liquid file. Check that there are no missing or extra HTML tags present.

If you haven’t made changes to this code, contact support for help resolving the issue.

0 Likes
Highlighted
New Member
1 0 0

hey everyone,

I want a section ( text column with images) in minimal theme,

and i have copied the above code  &  its a good solution 

but, a minor error is there

images have come one below the another & I need it in grid of 3 in a row.

thanks  

Regards,

pappu.

0 Likes
Highlighted
New Member
2 0 0

im stuck on this problem too

the images are in 1 colum i need to stack them next to eachother like 3 coloms.

did you already find the solution

jwarnings_0-1596742270191.png

the name of this section = Text Column With Image

im using the brooklyn theme 

i did copy the section code from : Debut theme please let me know im stuck on this

0 Likes