Jump to content

Multiple Apsect Ratios On Product Detail Page

Recommended Posts

Posted (edited)

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

Hi. I understand how to use product tags so that I can display multiple aspect ratios on my product page. However, I would like to display multiple aspect ratios on my product detail page. I have uploaded images that show my product page that have both square and portrait images. The zipper purse has both portrait and square images. On the product detail page the third thumbnail is portrait but is displaying as square. Is it possible to have multiple aspect ratios on a product detail page.

Store-1-—-KoKoRo-Gift-Shop (1).png

Zipper-Purse-—-KoKoRo-Gift-Shop.png

Zipper-Purse-—-KoKoRo-Gift-Shop (1).png

Zipper-Purse-—-KoKoRo-Gift-Shop (2).png

Edited by SRTrevor
  • SRTrevor changed the title to Multiple Apsect Ratios On Product Detail Page
  • Replies 4
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted
2 hours ago, SRTrevor said:

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

Hi. I understand how to use product tags so that I can display multiple aspect ratios on my product page. However, I would like to display multiple aspect ratios on my product detail page. I have uploaded images that show my product page that have both square and portrait images. The zipper purse has both portrait and square images. On the product detail page the third thumbnail is portrait but is displaying as square. Is it possible to have multiple aspect ratios on a product detail page.


https://www.kokoromaplewood.com/
The password to the site is happydog812
Here is the link to the page where I would like to have multiple aspect ratios.
https://www.kokoromaplewood.com/store/p/zipper-purse

 

Store-1-—-KoKoRo-Gift-Shop (1).png

Zipper-Purse-—-KoKoRo-Gift-Shop.png

Zipper-Purse-—-KoKoRo-Gift-Shop (1).png

Zipper-Purse-—-KoKoRo-Gift-Shop (2).png

For multi aspect ratio, I implemented for some customers. It requires javascript code, which is only available on Business Plan, to get image's dimension and then set the right style for it.

What is your current plan?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

  • 10 months later...
Posted

I am just now seeing this! This is exactly the same issue I'm having with my website (business also). I'd like for both 3:2 and 2:3 to display on the product detail page (I have simple format selected) but it only allows you to select one aspect ratio and the other gets cropped. I set it to standard 3:2, then used a work around CSS w/ a portrait tag. While it works, it simply shows the entire image in full view, which is also not what we want. Did your fix work around work? Any help appreciated!

standard landscape.jpg

cropped portrait.jpg

fullsize.jpg

Posted
On 9/13/2023 at 9:47 AM, maso said:

I am just now seeing this! This is exactly the same issue I'm having with my website (business also). I'd like for both 3:2 and 2:3 to display on the product detail page (I have simple format selected) but it only allows you to select one aspect ratio and the other gets cropped. I set it to standard 3:2, then used a work around CSS w/ a portrait tag. While it works, it simply shows the entire image in full view, which is also not what we want. Did your fix work around work? Any help appreciated!

standard landscape.jpg

cropped portrait.jpg

fullsize.jpg

Can you share link to this product? We can take a look

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!)

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.