Resize preview image from blogpost in Express Theme

Highlighted
New Member
1 0 0

Hello dear Community,

I am trying to make the preview images from my blog posts smaller. Currently they are fully resized to the screen and on bigger screens it really doesn´t look so well due to resolution and visibility of the other posts.

Although I am not a beginner with html and js, I am very new to shopify and could need some help to resize all of the preview images of the blog posts to 50% of their current size.

I have no made any customization to the default theme "Express" and all tries didn´t work for me...

So far I have tried to make changes to this code inside the blog.liquid, at least I think it needs editing here?

{%- if article.image -%}
<a href="{{ article.url }}">
<img srcset="{% if article.image.width >= 311 %}{{ article.image | img_url: '311x' }} 311w,{% endif %}
{% if article.image.width >= 622 %}{{ article.image | img_url: '622x' }} 622w,{% endif %}
{% if article.image.width >= 503 %}{{ article.image | img_url: '503x' }} 503w,{% endif %}
{% if article.image.width >= 1006 %}{{ article.image | img_url: '1006x' }} 1006w,{% endif %}
{% if article.image.width >= 685 %}{{ article.image | img_url: '685x' }} 685w,{% endif %}
{% if article.image.width >= 1370 %}{{ article.image | img_url: '1370x' }} 1370w{% endif %}"
sizes="(min-width: 1200px) 1080px, (min-width: 750px) calc(100vw - 12rem), calc(100vw - 6.4rem)"
src="{{ article.image | img_url: '600x' }}"
width="{{ article.image.width }}"
height="{{ article.image.height }}"
loading="lazy"
class="blog-item__image"
alt="{{ article.image.alt | escape }}">
</a>
{%- endif -%}

Can anybody help me resize the images by 50% on all screen sizes?

0 Likes
Highlighted
Shopify Partner
501 56 78

Hey there @Domo1,

Are you able to provide your store URL so I can take a closer look and provide the solution here?

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gamil.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes