Shopify themes, liquid, logos, and UX
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 -
Solved! Go to the solution
This is an accepted solution.
great thanks for proper URL
can you please try this code
1. Go to Online Store->Theme->Edit code
2. 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
sorry for any issue please img url master tag
https://shopify.dev/docs/themes/liquid/reference/filters/url-filters
Sorry. What do you mean by this?
Can you provide a code example?
can you please update this
{%- assign img_url = article.image | img_url: 'master' | replace: '_1x1.', '_{width}x.' -%}
I changed that snippet import to 'master' but nothing changed.
if possible to share store url and issue images?
The site's not live yet.
It's basically just three images that are different sizes. I want them all to be the same.
oh sorry, give me store preview url so i will check and give your proper code
thanks for it
bt your store password protect.
Password - rubrao
great thanks can you please mark issue part so i will give you proper code
What do you mean?
oh sorry for that i mean can you please share issue image so i will give you proper code
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?
thanks for clear bt sorry i can't see that look i have see this
can you please show me gird view
This is an accepted solution.
great thanks for proper URL
can you please try this code
1. Go to Online Store->Theme->Edit code
2. 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
Thank you! 🙂
it's my pleasure to help us
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024