Aspect Ratio - How to individually resize the images on my product page?

I am very new to squarespace and having same issue on my store pages where I want different aspect images to display in the gallery slideshow.

Adding the below to CSS didn't seem to make any difference. Anyone able to help me?

img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}

On 7/21/2023 at 9:41 PM, aylag said:

I am very new to squarespace and having same issue on my store pages where I want different aspect images to display in the gallery slideshow.

 

Adding the below to CSS didn't seem to make any difference. Anyone able to help me?

img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}

Can you share link to page where you use slideshow?

Using the code provided earlier in this thread, I was able to display photos art their proper aspect ratios on the product pages.

img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}

However, when I am on the store page and click on a product's "Quick View" button, all images are displayed in a 1:1 ratio (square). Does anyone have code to resolve this issue while in Quick View?

Also, the formatting is all messed up and I have no idea why. I did add custom CSS to change some formatting on the product pages. Could this be affecting the Quick View pop-ups?

On 8/4/2023 at 2:39 AM, SRF said:

Using the code provided earlier in this thread, I was able to display photos art their proper aspect ratios on the product pages.

img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}

However, when I am on the store page and click on a product's "Quick View" button, all images are displayed in a 1:1 ratio (square). Does anyone have code to resolve this issue while in Quick View?

Also, the formatting is all messed up and I have no idea why. I did add custom CSS to change some formatting on the product pages. Could this be affecting the Quick View pop-ups?

Can you share link to store page? We can check Quick view easier

@paul2009 thank you very much! I had exactly the same problem, now solved with the solution you provided.

A different solution could be duplicating a product section in the same shop page, provided that each section row is made of images with the same ratio. This way each section could be set to a portrait ratio or landscape ratio. Unfortunately I couldn't find a way to duplicate product sections.

Adriana

I just read and applied the information that was posted by paul2009 in regards to product image ratio and my problem was solved in seconds!  I'd spent the past week watching Youtube as well as many other resources to no avail and was about to give up when I ran across this forum.  When I found this info, I was so relieved!  Now my website will show all of my hat products at their best. 

The fix was a cakewalk so to speak... I use 7.1  so I don't know how this might work on the other Squarespace sites.

Step 1  - change your aspect ratio to 3:2 (standard) when editing the section

Step 2 - Edit your product or products by adding the tag: portrait

Step 3 - add the CSS code found at this website.

https://sf.digital/squarespace-solutions/how-to-show-product-images-in-their-original-aspect-ratio-on-squarespace-71

I included a screenshot of the code as well as a couple of screenshots so you can see the change...I'll be completing my changes by later today.  I sure hope this helps some squarespace website owners who are struggling with this same issue.  I'll next be working on changing my landscape photos to larger pictures.  If I can make it work, I'll post again.

Just to clarify, is there a solution to this issue for Squarespace 7.0 sites? The idea of having to start over, again, makes me want to weep. Or just move on from Squarespace. 

On 9/14/2023 at 4:58 AM, parasol22 said:

Just to clarify, is there a solution to this issue for Squarespace 7.0 sites? The idea of having to start over, again, makes me want to weep. Or just move on from Squarespace. 

Can you share link to a page where you have problem on your site? We can check easier

Y'all - I struggled with this forever. On my client's 7.1 Site this was the fix in Custom CSS for Product List Page. 

.grid-image-cover {
  object-fit: contain !important;
}

I am also having this issue. I'm already deep into creating a site on 7.1 and don't want to have to start all over again with another template. I'm using this for a portfolio of artwork and do not want my images cropped to the same exact size on my gallery page. The "Images" block only allows me to edit the aspect ration on the individual image and not on my gallery page. So when you go to my site in this category, everything is cropped. I need all images to be a custom ratio or to remove the aspect ratio all together. How do I do this? Beyond annoying. 

None of these codes mentioned above work when I copy them into Custom CSS

Well this has been a real pain.  Getting the "store" page to work was simple, using this code posted earlier by ReformDesign in Website Tools > Custom CSS:

Quote

.grid-image-cover {
  object-fit: contain !important;
}

The product pages would work some of the time (PC view but not mobile) if I used the Carousel type Design.  However, when I applied this code posted by tuanphan the mobile view started working, and I was able to use Slideshow and Stacked Designs as well.

Quote

img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}

To get the individual pages to work properly (PC view) I had to edit the section such that:

• Aspect Ratio =  1:1 Square
• Content Alignment = Center
• Design = Carousel
• Click Action = Lightbox

I selected the 1:1 Square aspect ratio since it keeps both vertical and horizontal images about the same size on average.  If you choose something like 2:3 or 3:2 either the vertical or horizontal images will be significantly larger than the other.

I turned on Lightbox so at least the customer can click the image and get a view of the image in its native format if the CSS does not work for some reason.

Also, how has SquareSpace not fixed this yet???

I'm having the same issue on 7.0 on my product page where I have both horizontal and vertical images.  Has anyone been able to find a solution where the vertical images stay in their original size?

@paul2009 This was the perfect fix and I can't thank you enough for providing the code for portrait option. Is there a code to use when an image needs to be square? I'm working with an artist's site and the images are portrait, landscape and square on the product pages.

12 hours ago, ELPage said:

Is there a code to use when an image needs to be square?

What's the URL of the page on the site?

@paul2009 sent you a direct message with more info.