How can i make dawn theme show rectangular photos into a 1:1 side photo ?

[tudor3]

There is this setting i need, for product images to be shown correctly. The problem is i have a lot of 2x4 or 4x2 images, and dawn theme does not support showing as a 4x4 a 2x4 photo. I need the values that i should enter in theme settings. Many thanks ! 

[DaisyVo]

Hi @tudor3 

Please share your store link and point out where the image

Best,

Daisy

[tudor3]

[DaisyVo]

HI @tudor3 

Please share your store link please

[tudor3]

https://sefira.ro/

[Ahmad31]

Hi @tudor3 in theme.css paste this code and save : 

.product-card__image, .media > img {
object-fit: contain;
width: 100%;
height: auto;
}

if you don't find theme.css paste this code in theme.liquid before </head> tag 

<style> 

.product-card__image, .media > img {
object-fit: contain;
width: 100%;
height: auto;
}

</style>

[tudor3]

Thanks! Tried, but didnt work . i dont have theme.css because i use dawn theme

[tudor3]

wait, its before </head> . wait a minute i try again 

[tudor3]

It didnt work either. Product cards still show cut photos and now also banner  from front page looks messed up 

[Ahmad31]

Hi @tudor3 you want like this ?

paste this code in theme.liquid before </head> tag 

<style>

.card.card--card.card--media.color-scheme-1.gradient img { width: 100%; height: 100%; object-fit: contain; display: block; margin: auto; /* Centers the image within the container */ }

</style>

[tudor3]

Great, this works for the collection images. I also need for products to display correctly inside the collection itself 

https://sefira.ro/collections/topoare

[Ahmad31]

Also you have some products with white backgroud use png images without backgroud they make a better UI. make product image dimensions 600*600 and also remove their backgrounds.

[tudor3]

Well, that is the problem. I have about 30k product photos, i cant edit them in bulk, i dont know how. Manual edit will take ages. Sizes vary a lot. When i used enterprise or ignite theme as theme trial, they have a setting that allows the products to appear OK 

[Ahmad31 · Accepted solution]

@tudor3 if you want anytype of help regarding products issues or any other custom development work i am available for your help,  let's fix your problem
also paste this code in previous <style> tag which i provide you recently :

.card.card--card.card--media.color-scheme-2.gradient img {
width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    margin: auto; /* Centers the image within the container */
}

[tudor3]

i cant believe my eyes it worked !!!! omgg so many thanks!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[Ahmad31]

@tudor3 

That's fantastic to hear! I'm thrilled that the solution worked perfectly for you! 😊

If you'd like to show your appreciation and "buy me a coffee," it would absolutely make my day!