Jump to content

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

Recommended Posts

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;
}
Link to comment
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?

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
  • 2 weeks later...

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?

Link to comment
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

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
  • 3 weeks later...

@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

Link to comment

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.

Screenshot 2023-08-26 at 18-09-44 French Fashion Hats — Womens Victorian and Edwardian Hat Styles — East Angel Harbor Hats Custom Hat Designer.png

Screenshot 2023-08-25 at 17-36-46 French Fashion Hats — Womens Victorian and Edwardian Hat Styles — East Angel Harbor Hats Custom Hat Designer.png

 

Screenshot 2023-08-27 at 09-06-41 Timeless French Style Victorian Hat — East Angel Harbor Hats One of a Kind Custom Hat Designs.png

Link to comment
  • 3 weeks later...
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

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
  • 3 weeks later...
  • 1 month later...

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

Edited by NanV
Link to comment

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???

 

Edited by FixBroken
Link to comment
  • 3 weeks later...
  • 7 months later...

@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.

Edited by ELPage
Link to comment
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?

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment
  • 2 weeks later...

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.