Multiple Aspect Ratios?

Site URL: http://lisadeupreephotography.com

I am have photographs with different aspect ratios. When quick view is clicked from the Product page, the images all show as 1:1, which is fine for the thumbnails but not for the 2:3/3:2 photos. How can I rectify this?

On 5/1/2020 at 8:58 PM, Bula said:

Site URL: http://lisadeupreephotography.com

I am have photographs with different aspect ratios. When quick view is clicked from the Product page, the images all show as 1:1, which is fine for the thumbnails but not for the 2:3/3:2 photos. How can I rectify this?

Hi Bula, your photos are awesome. I'm having this same problem: my landscape photos have their widths cropped on both the quick view and the product page. My site isn't live yet, so I can't share a link, but it's similar to all your portrait images.

Any help from the community would be greatly appreciated!

May 30: I figured out a possible solution. It works on my dev site for the quickview and details pages; I hope it works for you. I've added this into my Squarespace CSS editor:

/* quickview and details pages */

img {
    font-size: 0px;
    left: 0 !important;
    top: 0px;
    width: 100% !important;
    height: auto !important;
    position: relative;
  display: block;
}

Hi TBrit,

Your CSS code worked!  Except now my logo is way out of proportion.  Do you know of a way to exclude my logo from this code?

Thanks!

Diane

Hi there,

I am having similar problems! The aspect ratio seems to crop out most of the image when I click on Quick View. 

I have tried to put in the CSS that was provided in this chat however it doesn't seem to work. Is there someone who can help me sort this? 

https://www.wonderingpeople.com/cheri-smith

Add to Home > Dessign > Cusstom CSS

.sqs-lightbox-slideshow img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}

Hi all... I'm not sure if this will help any of you, but after HOURS of trying to figure out a solution for the same problem, I stumbled across a really simple solution! It turns out, all I needed to do was go to 'design' under the product items and switch the design to 'Carousel.' It totally solved the issue! I hope this might save you the time it took me to figure it out.

Wow - You're a genius!  I have wasted hours watching so many Squarespace videos!  They need to find a better fix or publish your idea!

Thank you - I'm back on track!

On a similar theme, I have 3 different galleries (portfolios) on my site and would like the main page of each gallery to display a different image aspect ratio ie gallery one 4:3, gallery two ultra wide, gallery three 2:3. When I change the ratio on one gallery it changes it on all 3 galleries. When I enter the gallery, I can set each one to display the ratio I want, it's just the main gallery page where I have this issue. My work around was to set the 3 galleries as 4:3 ratio and make a 4:3 template image in photoshop with the same colour as the background then I put whatever ratio of picture on top that I want. This has worked to an extent but I have less control over the space between images and when/where the icon changes when hovering over an image. Does anyone have a solution or know how to change one gallery at a time? Many thanks.

On 12/12/2021 at 2:28 AM, CaptScot said:

On a similar theme, I have 3 different galleries (portfolios) on my site and would like the main page of each gallery to display a different image aspect ratio ie gallery one 4:3, gallery two ultra wide, gallery three 2:3. When I change the ratio on one gallery it changes it on all 3 galleries. When I enter the gallery, I can set each one to display the ratio I want, it's just the main gallery page where I have this issue. My work around was to set the 3 galleries as 4:3 ratio and make a 4:3 template image in photoshop with the same colour as the background then I put whatever ratio of picture on top that I want. This has worked to an extent but I have less control over the space between images and when/where the icon changes when hovering over an image. Does anyone have a solution or know how to change one gallery at a time? Many thanks.

If you share link to 3 portfolios page, we can give the code to control this on each page

OMG....this has driven me crazy too.

I thought I solved it by creating templates for both horizontal and vertical artworks and found out you could only have one version/ratio size.

Finally, I created a template in photoshop with a white background - 1:1 ratio at 1000 x 1000 and 72dpi.
I place my image on it, adjust to fit and save it ready for upload.
A slow process but it works!!!

I'm using the Squarespace 'Simple' Design and 1:1 Square. 

Hope this helps someone so they don't end up tearing their hair out too!  haha   🙂

First time posting in here. Continue to read and follow posts regarding this topic, which are many, but still stuck.

I sent a request to Squarespace to encourage them to add the option to select BOTH landscape and portrait versions in the product item image gallery slides design set up, since so many creators have both aspects for their sites products they'd like to display.

Been trying to display both vertical/horizontal aspect ratios in the product gallery slides simple design format. Found and tested many options, but not completely for what I'm needing. The closest I've come to CSS that can apply to the entire product images is the suggestion to create a tag for the portrait version, with css then appropriately resizing that tag. It worked, but the view is full size, which defeats the lightbox purpose which shows full size. Plus it's not consistent with the product image sizing of the landscape versions pages.  Another was to use a 1:1 ratio, to keep it all consistent but that won't work and they'd like to display both 3:2 and 2:3 and assure their overall scale is the similar so it doesn't look lopsided. I assume this can get tricky if their images are not set to the same dimensions for both orientations and can lead to a variety of view inconsistencies? Don't know.  If anyone has had success with this I'd be super grateful.