Bulk image resize or aspect ratio?

Tourist
4 0 1

Can anyone recommend a way of changing image size or aspect ratio ONLY in the Collection or homepage? I imported around 200 items in a new store and set image size, but the image size setting in Shopify only applies to the individual product pages but when I am on the homepage and in Collections all the images are different sizes cause the photos the supplier used are like 5-6 different heights. Plus using the Shopify image size setting on the product pages locks the photo size so it cannot be zoomed any larger...Help!!

 

I stayed up all through the night for 2 straight days editing descriptions and titles, I really need the images fixed. 😳 Anyone know?

1 Like
Shopify Partner
27 0 7

Sure, Shopify has rules that can be used to change a ratio of images of any store templates. But in fact, you have to know little coding to provide those changes. Here is a relevant article: https://www.shopify.com/partners/blog/img-url-filter

1 Like
Tourist
4 0 1

@Sasha2 Thank you so much!

 

But where will these edits be? I am trying to change the collection only. Does it vary by theme? Right now I am using Simple theme.

0 Likes
Shopify Partner
27 0 7

@Sunnybleu, yes the changes have to be provided in the theme code directly.

 

Kindly follow next steps to do it:

1) Open a code editor of your theme by clicking "Edit code" link: http://prntscr.com/op0k7d

2) Find the "product-grid-item.liquid" file in the "Snippets" directory of your theme: http://prntscr.com/op0l9a   http://prntscr.com/op0lm1

3) Find code in your "product-grid-item.liquid" file that reflects image ratio controlling. It looks like this:  

<img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">

For me, it placed at 23 line of the file.

4) Change this code to this one:

<img src="{{ product.featured_image.src | img_url: 'grande', crop: 'center' }}" alt="{{ product.featured_image.alt | escape }}">

5) Save the result by clicking a "Save" button: http://prntscr.com/op0nd1

 

It has to be enough to show Products photos ratio in the square format for the Homepage sections and Collection page.

Let me know if you still have some issues with photos ratio.

0 Likes
New Member
2 0 0

Hello Sasha... your code comments is just what I need, just that the file you are commenting on is not, the "product-grid-item.liquid", Will there be file changes? or what could it be?

thank you so much

 

1.PNG2.PNG

0 Likes
Shopify Partner
27 0 7

Hi Isramend,

 

Unfortunately, I don't see a deserved Product snippet at your screenshots.

Can you please share with me the name of the theme that you are using for the store?

0 Likes
New Member
2 0 0

Hello Sasha.. the original template: https://www.templatemonster.com/shopify-themes/glamour-cosmetics-shopify-theme-83769.html

my current site (don't panic ... it's a sexshop): https://www.kleosplace.com/collections/anal-beads/anal-Beads

need aligth the images showed, There are many products and I would like to align them from the code Sasha

0 Likes
Shopify Partner
27 0 7

Hi Isramend,

 

Thank you for the theme name shared.

Unfortunately, I do not familiar with this one theme.

 

Anyway, you can discover a Product snippet title directly at the Collection template.

The collection template usually is a Section with a title "collection" or "collection-template".

 

Once you will find a Collection template, the last thing that you have to find there - is a code of the Product snippet. It can look like this:

{% include 'product-[some words]' %}
1 Like