How can I resize and standardize all my webpage images automatically?

Store Design
1

Need help please in making all images uniform.

Front page Gallery images are all the same size, but the images are not automatically sized to fit.

Then on the actual product/collection pages the images are all different sizes, I would like them to all be the same size and for the images to be automatically re-sized to fit.

Seems crazy you have to modify codes and input requirements for images and then again for them to fit.

Just want parameters set and then images to be uploaded and to fit like Ebay or Facebook???
Any help would be greatly appreciated :slightly_smiling_face:

Cropped Images.jpg
Cropped Images.jpg1418×951 127 KB

Uneven Product Pictures.jpg
Uneven Product Pictures.jpg1234×756 96.3 KB

2

Hi @Houseofjece ,

This is David at SalesHunterThemes.

I read your problem and it seems that I need to analyze your website to provide the solution here.

Would you please share your website URL

if your website is password protected then also provide the password.

David | SalesHunterThemes team.

3

Hi David,

My url is: www.luxeandcodesigns.com

Thanks so much,

Fiona :slightly_smiling_face:

1 Like
4

Hi @Houseofjece ,

This is David at SalesHunterThemes.

Thank you for your question.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → base.css file.

Add this following code at the bottom of page.

.section-template--20716260196627__product-grid-padding .card--standard .card__inner {
   --ratio-percent: 150%!important;
}

.product-media-container.constrain-height.media-fit-contain { 
 with: 100%!important;
}

.product-media-container.constrain-height .media { 
 padding-top: 150%!important;
}

Here is the result:

David_SHT_0-1693284597881.png
David_SHT_0-1693284597881.png3654×2692 853 KB

David_SHT_1-1693285496902.png
David_SHT_1-1693285496902.png3368×2584 731 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

5

Thanks so much for that David.

Is there a code I can use that will automatically re-size photo’s to fit the new product ‘parameters’ as all the pictures are still cropped/cut.

ie; when you sell on Ebay or Facebook you simply upload your images and they fit in the picture parameters etc?
Your help is much appreciated :slightly_smiling_face:

Cheers,

Fiona

6

Hi @Houseofjece ,

The code that I gave you did just that, this code works on collections page and product page.