Resizing Blog Pictures in Brooklyn Theme

Highlighted
New Member
2 0 0

Hello,

I want to be able to resize my blog article pictures to be smaller than what they currently are on my site but I haven't be able to figure it out. I've tried changing inputs on the blog.liquid file but it has not changed anything on the blog page. Any help would be appreciated!

Here is a link to the blog: https://9450apparel.com/blogs/news

0 Likes
Highlighted
Shopify Staff
Shopify Staff
138 14 45

Hey, Josh!

Sunny here from the Shopify Guru team and I would be happy to help with this.

I am no expert with code but decided to do some testing on my own store using the Brooklyn theme and I was able to find a solution to your request! In order to make your blog article pictures smaller, we will need to shrink the grid size on the featured blog page because the images are using up as much space as the current grid area allows.

To adjust your grid space, head over to Online Store > Themes > Actions > Edit Code > blog.liquid. On line 30 you should see this piece of code:

<div class="grid__item">

Instead, try replacing it with this piece of code:

<div class="grid__item large--one-eighth">
</div>
<div class="grid__item large--six-eighths">

This little adjustment should do the trick. Give that a try and let me know if it gives you the results you were looking for. If it's not exactly right, definitely reply back and we can continue troubleshooting!

Cheers,

Sunny | Shopify Guru

Sunny | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Highlighted
New Member
2 0 0

Works great! Thank you for your help!!

0 Likes
Highlighted
New Member
2 0 1

Hi Sunny,

 

I'm wondering the same but I have boundless theme so the blog.liquid section doesn't appear to look the same. Are you able to help?

Highlighted

I just dug around for a while and got this to work for me with Minimal on my brand new blog (https://platypusmax.com/blogs/platypusmaxblog) if anyone needs it. I'm working backwards but the red numbers appear to set max widths and heights of the feature images. And the blue will put a link on the image over to the article, if desired. 

in blog-template.liquid

Replace (or edit as highlighted in red and blue)

<div class="rte">
{% if article.image %}
{% capture img_id %}ArticleImage-{{ section.id }}--{{ article.image.id }}{% endcapture %}
{% capture wrapper_id %}ArticleImageWrapper-{{ section.id }}--{{ article.image.id }}{% endcapture %}
{%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- assign image_alt = article.title | escape -%}
{% include 'image-style' with image: article.image, width: 845, height: 1024, wrapper_id: wrapper_id, img_id: img_id %}
<p>
<div id="{{ wrapper_id }}" class="article__image-wrapper supports-js">
<div style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="article__image lazyload"
src="{{ article.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[90, 120, 150, 180, 360, 480, 600, 750, 940, 1080, 1296]"
data-aspectratio="{{ article.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image_alt }}">
</div>
</div>
</p>

<noscript>
<p>{{ article | img_url: '1024x1024' | img_tag: image_alt, 'article__image' | link_to: article.url }}</p>
</noscript>
{% endif %}
{% if article.excerpt.size > 0 %}
{{ article.excerpt }}
{% else %}
<p>{{ article.content | strip_html | truncatewords: 100 }}</p>
{% endif %}
</div>

 

WITH: 

 

 

<div class="rte">
{% if article.image %}
{% capture img_id %}ArticleImage-{{ section.id }}--{{ article.image.id }}{% endcapture %}
{% capture wrapper_id %}ArticleImageWrapper-{{ section.id }}--{{ article.image.id }}{% endcapture %}
{%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- assign image_alt = article.title | escape -%}
{% include 'image-style' with image: article.image, width: 300, height: 300, wrapper_id: wrapper_id, img_id: img_id %}

<p>

<div id="{{ wrapper_id }}" class="article__image-wrapper supports-js">
<div style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;">
<a href="{{ article.url }}"> <img id="{{ img_id }}"
class="article__image lazyload"
src="{{ article.image | img_url: '200x300' }}"
data-src="{{ img_url }}"
data-widths="[90, 120, 150, 180, 360, 480, 600, 750, 940, 1080, 1296]"
data-aspectratio="{{ article.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image_alt }}">
</a>

</div>
</div>
</p>

<noscript>
<p>{{ article | img_url: '1024x1024' | img_tag: image_alt, 'article__image' | link_to: article.url }}</p>
</noscript>
{% endif %}
{% if article.excerpt.size > 0 %}
{{ article.excerpt }}
{% else %}
<p>{{ article.content | strip_html | truncatewords: 100 }}</p>
{% endif %}
</div>

0 Likes
Highlighted
New Member
1 0 0

Your resizing worked as expected.   But i need it to be even smaller than that. Maybe half that size.

What dimension would you add there instead of one-eighth and six-eighths? 

Thanks!

0 Likes
Highlighted
Excursionist
34 1 2

@Sunny 

Although this method only solves the size problem of the featured photo, it is still an excellent solution. I don't understand the content of the code, how those numbers are matched, and I tried many combinations of numbers. The results are amazing. Share with you. If anyone tries it, you will definitely thank me.

<div class="grid__item large--two-eighth">
</div>
<div class="grid__item large--three-eighths">


Of course, the size of the picture in the text still cannot be changed, and it is still seeking a solution

0 Likes