I know Shopify has their own documentation on this but I’m still unable to resize my article images into the aspect ratios I want to.
In my blog.template.liquid file, I have this line of code -
{%- assign img_url = article.image | img_url: ‘400x400’ | replace: ‘1x1.', '{width}x.’ -%}
So, shouldn’t it resize all images I bring into 400x400?
This is the chunk of code where all the magic should be happening. I think something in there is overriding what I want to achieve -
{% if article.image %}
{% capture img_id %}ArticleImage-{{ article.image.id }}{% endcapture %}
{% capture img_wrapper_id %}ArticleImageWrapper-{{ article.image.id }}{% endcapture %}
{%- assign img_url = article.image | img_url: ‘400x400’ | replace: ‘1x1.', '{width}x.’ -%}
<img id="{{ img_id }}"
class="article__grid-image lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-sizes=“auto”
alt=“”>
{{ article | img_url: '345x345', scale: 2 | img_tag: article.title, 'article__grid-image' }}
{% endif %}
1 Like
Sorry. What do you mean by this?
Can you provide a code example?
@greevesh
can you please update this
{%- assign img_url = article.image | img_url: 'master' | replace: '_1x1.', '_{width}x.' -%}
1 Like
I changed that snippet import to ‘master’ but nothing changed.
@greevesh
if possible to share store url and issue images?
2 Likes
The site’s not live yet.
It’s basically just three images that are different sizes. I want them all to be the same.
1 Like
@greevesh
oh sorry, give me store preview url so i will check and give your proper code
1 Like
@greevesh
thanks for it
bt your store password protect.
1 Like
@greevesh
great thanks can you please mark issue part so i will give you proper code
1 Like
@greevesh
oh sorry for that i mean can you please share issue image so i will give you proper code
1 Like
The issue is that the images aren’t the same size. I want them to be the same size.
Can you look at my code, please?
1 Like
@greevesh
thanks for clear bt sorry i can’t see that look i have see this
can you please show me gird view
1 Like
@greevesh
great thanks for proper URL
can you please try this code
- Go to Online Store->Theme->Edit code
- Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
.article__grid-image-container {
padding-top: 100% !important;
}
.article__grid-image-container img {
height: 100%;
object-fit: cover;
}
After this code view
1 Like
@greevesh
it’s my pleasure to help us
1 Like
