Jump to content

How can I use different aspect ratios for product images?

Recommended Posts

Site URL: https://www.clic.com/

Hi,

I have been having an issue with this site that I can't seem to find an ideal solution to. There are many product pages with different types of products that all have different dimensions of images. Some are artworks that cannot be cropped and are mostly horizontal while some are products that are mostly vertical. Having all images at the same aspect ratio while also having the slideshow gallery option (rather than stacked) causes some of the artworks to be cut off on the checkout page.

I tried adding in some css to solve this. This is what I used: 

.ProductItem-gallery-slides-item-image {

    object-fit: contain !important;

    object-position: middle;

    width: 100% !important;

    height: 100% !important;

    position: static !important;}

.tweak-product-item-gallery-aspect-ratio-34-three-four-vertical .ProductItem-gallery-slides::before {

    padding-bottom: 0 !important;}

.tweak-product-item-gallery-design-slideshow .ProductItem-gallery-slides-item {

    position: relative !important;}

This did successfully stop images from being cut off on the checkout page, but some of the images show up too large and were blurry. It also created an issue with the slideshow gallery of secondary product images (they showed up with a large gap underneath the main image rather than directly underneath).

I removed the code and right now am temporarily using the stacked option, but this isn't ideal and some images are still too big on the checkout page. Here are examples of this issue:

 https://www.clic.com/art-books/picasso-sculpture 

https://www.clic.com/love-tanjane/raw-pleat-collar-dress-in-army-from-love-tanjane

Is there a way to assign different aspect ratios to different pages of the site without any images cutting off, without images being too big/blurry, and with still being able to use the slideshow option? 

Thank you! 

Link to comment
  • Replies 5
  • Views 887
  • Created
  • Last Reply

Top Posters In This Topic

Thank you! 

I tried this out, but I'm not sure if the code I had above works for this since it seems to not change anything when I put it in the header under html. I also am still having the issue of images cutting off once I put the slideshow option on the checkout page.

Link to comment
On 11/5/2021 at 10:04 PM, smarret said:

Thank you! 

I tried this out, but I'm not sure if the code I had above works for this since it seems to not change anything when I put it in the header under html. I also am still having the issue of images cutting off once I put the slideshow option on the checkout page.

Hi,

Which code did you use?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

I used what I had pasted above:

ProductItem-gallery-slides-item-image {

    object-fit: contain !important;

    object-position: middle;

    width: 100% !important;

    height: 100% !important;

    position: static !important;}

.tweak-product-item-gallery-aspect-ratio-34-three-four-vertical .ProductItem-gallery-slides::before {

    padding-bottom: 0 !important;}

.tweak-product-item-gallery-design-slideshow .ProductItem-gallery-slides-item {

    position: relative !important;}

Just tweaking the ratio as needed.

Link to comment
  • 1 year later...
On 11/8/2021 at 7:52 PM, smarret said:

I used what I had pasted above:

ProductItem-gallery-slides-item-image {

    object-fit: contain !important;

    object-position: middle;

    width: 100% !important;

    height: 100% !important;

    position: static !important;}

.tweak-product-item-gallery-aspect-ratio-34-three-four-vertical .ProductItem-gallery-slides::before {

    padding-bottom: 0 !important;}

.tweak-product-item-gallery-design-slideshow .ProductItem-gallery-slides-item {

    position: relative !important;}

Just tweaking the ratio as needed.

Dear @smarret,

It seems like you solved the problem. Can you please share the solution/code? I am struggling with the same problem.

Many thanks. Sibylle

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.