Jump to content

Multiple Aspect Ratios?

Recommended Posts

  • 4 weeks later...
  • Replies 10
  • Views 4.9k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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;
}

Edited by TBrit
Found a possible fix.
Link to comment
  • 5 weeks later...
  • 3 weeks later...
  • 2 months later...

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.

Link to comment
  • 9 months later...
  • 4 months later...

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.

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

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 months later...

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   🙂

Link to comment
  • 1 year later...

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.

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.