How to fix cropped product grid images in Dawn Theme?

[thewolf22]

Hey there! 
Wondering if anyone could help me out with an issue I have with the product grid inside collections using Dawn Theme.

The product images are being cropped. Only option they are not being cropped is when 'Adapt to image' is selected however then products are completely misaligned and it looks awful.
I would like to use the square option for images but have the images scaled rather than cropped (even though a lot of my images are similar in size). I can't share link as at this stage my current theme is different and I'm only preparing to switch to Dawn and I'm stuck with this issue.

Hoping for any guidance on this. If not thanks for taking the time to read. Cheers.

[dmwwebartisan]

@thewolf22 

Please share store URL & screenshot what do you want !

Thanks!

[thewolf22]

Hey @dmwwebartisan unfortunately its not my active theme at the moment so I can't share link. Im just trying to stop product grid cropping images - instead I want it to scale down the images to fit within the square.

[Schoppifyer]

I have the exact same problem. Did you find a solution for this?

Thanks!

[jphg]

"misaligned" -> So you mean your images have not the same ratio?

edit: wouldn't an image processing app help here?

Like this one : https://apps.shopify.com/bulk-image-edit ?

Features:

• Bulk update image alt text and file name with customizable templates to represent your store name, product name, product type, etc
• Set and forget, automatically update all newly added images with the defined Alt text and file name templates
• Minimize Product or Theme Asset image file sizes without image quality loss
• Resize all product images to square shape, the most popular image shape, to standardize images on your website and on social networks such as Facebook or Instagram
• Resize/crop/Frame/Trim product images so that all your product images are same in width or height
• Add text or image based watermarks to protect your product images from being stolen by competitors
• Preview the products that will be edited before creating a task
• Review the images that have been edited with our well-structured logs
• Option to revert/undo any changes that have been made

[thewolf22]

Thanks for your response but no, Image resizing was not the solution. All my images are same size prior to uploading to begin with. Anyways I've ditched the theme, its absolutely rubbish has issues everywhere.

[Schoppifyer · Accepted solution]

I've solved the problem.

In the product grid you set the image ratio to square -> products are nicely aligned but images are cut off

In "edit code" go to "assets" and find base.css

find the following code: 

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

replace "cover" with "contain"

.media > img {
  object-fit: contain;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

I needed to clear browser cache but now it seems to be working - no more cut off images!

[Logius]

@Schoppifyer Hello, I am using Dawn theme too but for some reason, it does not work on our website. Could you see why the images are still being cut off? 

[artt]

Hi Schoppifyer,

Thanks for this, it partially fixed the problem, some smaller horizontal images get stretched, is it possible to contain those images(I have added screenshots)? Thanks, Art.

SMALL SIZE HORIZONTAL IMAGE (Stretched)

NORMAL SIZE IMAGE

  

[mooseshoes]

This was immensely helpful.  Thank you.

[mooseshoes]

I spoke a bit too soon.  The change also altered images on my home page which looked better with the "cover" option.  Any thoughts on per-page changes?  Thanks.

[LeitzMusic]

For some reason, this code wouldn't come up with FIND...so i had to scroll the entire code to find it

[Jahid-KlinKode]

Hey @thewolf22, if you're struggling with product grid image issues in Shopify Dawn Theme, watch this quick tutorial: https://www.youtube.com/watch?v=LNCzj6cxw1s.