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

Solved
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 %}



1 Like

Success.

Shopify Partner
1160 95 142

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

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
1 Like
Tourist
9 0 1

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

0 Likes
Shopify Partner
1160 95 142

Thanks for the kind words! :)

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

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes
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
New Member
2 0 0

@Perennial ;-)


@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