Code to adjust product images or product media container

Store Design
, ,
1

I Have a shoe store and have uploaded hundreds of images. unfortunately they are in a tall format, and I want to lose the top 33% of the image so it would align properly,

i don’t want to change the container size I only want to shorten my images top down by 33%

is it possible to code in the template or them code to auto adjust images in the containers?

2

Hi @MitchellTorres ,

Can you please share a preview url so that I can assist you on?

Thank you

1 Like
3

of course!

https://zatorres.com/products/balmoral-boot-in-tweed-and-brown-patina

you will see the boot image is border line anchored to the bottom of the container and it trims off a small amount of the sole. I would like to lose the top margin which would allow the image to “shift” up"

4

a second product: https://zatorres.com/products/tassel-loafer-in-black-calf

5

Hi @MitchellTorres

You can add below css in base.css file.

.grid__item.product__media-wrapper .media>*:not(.zoom):not(.deferred-media__poster-button) {
    object-fit: contain;
}

Thank you

1 Like
6

Thank you Luffy (great show!)

It fits now, but the image is now smaller than I would like it to be. If I set the them to the image “small”, media fit “fill” and constrain to media to screen height - it accomplishes the same. I would like the image to be “Large” but still fit. I am able to accomplish that if I manually crop the image and choose 5:7 and move the editing box to the bottom of the image. this essentially crops off the top 20 - 33% of my uploaded image.

hope this makes sense.

7

Hi @MitchellTorres ,

Can you please try adding below css. Also remove the earlier one.

#shopify-section-template--21679519695150__main .grid__item.product__media-wrapper .media > *:not(.zoom):not(.deferred-media__poster-button) {
    top: -20%;
}

Thank you

2 Likes
8

This did EXACTLY what I wanted. Thank you!!!

9

Hi @MitchellTorres ,

Can you please like all the comments and mark it as accepted?

Thank you

1 Like
10

I have another question - now that I have the image moved up - there is alot of space below to get to the thumbnails. Is there now a way to shorten the media container?