Solved

code to adjust product images or product media container

MitchellTorres
Tourist
9 0 0

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?

Accepted Solution (1)
LuffyOnePiece
Shopify Partner
521 78 96

This is an accepted solution.

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

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

View solution in original post

Replies 9 (9)

LuffyOnePiece
Shopify Partner
521 78 96

Hi @MitchellTorres ,

 

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

 

Thank you

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
MitchellTorres
Tourist
9 0 0

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"

MitchellTorres
Tourist
9 0 0
LuffyOnePiece
Shopify Partner
521 78 96

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

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
MitchellTorres
Tourist
9 0 0

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.

LuffyOnePiece
Shopify Partner
521 78 96

This is an accepted solution.

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

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
MitchellTorres
Tourist
9 0 0

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

LuffyOnePiece
Shopify Partner
521 78 96

Hi @MitchellTorres ,

 

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

 

Thank you

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
MitchellTorres
Tourist
9 0 0

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?