Jump to content

Can you add code to stop product description images being cropped, whilst leaving them cropped on the all products/category pages?

Go to solution Solved by paul2009,

Recommended Posts

Hello,

I have built a website for an artist, who wants to sell his work online. These are mainly paintings and drawings in various sizes, shapes (landscape and portrait). In the store, I have used the Simple layout, which works well when viewing all items or category pages and we are happy for the images to be cropped here to the portrait view you currently see. When you view the individual product pages though, we want to see the whole image (painting or drawing), as that is what people are buying. This works already on a Desktop and iPad, but on a mobile that image is cropped portrait. Squarespace Help tell me this is not possible currently. Is there a way, maybe using code of changing the mobile view of product description page images?

Hope you are able to help, as my coding skills are very basic!

Thank you in advance.

Lynne

PS. I have attached screen prints, so you can see what I mean - it is fine on the Desktop view, but not on the Mobile view. The password is GARFIELD0987$$$$

Product image cropped on mobile 1.PNG

Product image cropped on mobile 2.PNG

Product image not cropped on desktop 1.png

Product image not cropped on desktop 2.png

Edited by spotonlynne
Forgot to add password to view
Link to comment
  • Solution
5 hours ago, spotonlynne said:

I have built a website for an artist, who wants to sell...mainly paintings and drawings in various sizes, shapes (landscape and portrait). When you view the individual product pages though, we want to see the whole image (painting or drawing), as that is what people are buying. This works already on a Desktop and iPad, but on a mobile that image is cropped portrait.

Hi Lynne

Some time ago, I wrote a guide to displaying different product aspect ratios on 7.1. I'm not sure if this guide would specifically address your issue, but the principle is the similar. If you tag products with different aspect ratios, you should then be able to set the correct amount of bottom padding to determine the image's aspect ratio. With a media query, you can set this specifically for the mobile view.

For example, if the painting was tagged 'wide' (or "Cordell Garfield Art" tag as an example below), you could achieve something with some CSS, like this:

@media screen and (max-width: 767px){
  .hentry.tag-cordell-garfield-art .ProductItem-gallery-slides:before {
    padding-bottom: 39%;
  }
}

image.thumb.png.d81c54cf166c47a2fd4cfcaf899cced8.png

I hope this gets you started 🙂

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing 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 below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
17 minutes ago, spotonlynne said:

I presume I have to alter the percentage of padding depending on the ratio of the landscape images.

Exactly! Good luck.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing 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 below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

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.