Product images + aspect ratios

Site URL: https://www.nikkimarieart.ca/shop/p/highlandcowprint

Hello,

ive spent a few hours trying to find help in previous posts in these forums and on the web about aspect ratios for product images but have had no success. I fear using css I find on the web because it may interfere with square spaces coding (I am very beginner level with coding)

I have images for the products for this website that are wide orientated and do not work for the majority aspect ratio I picked for the longer ones. I know I can use CSS to change this but I don’t know the code to use and all codes I’ve tried from past forum posts about this have not worked. It’s frustrating that the aspect ratio function is a global setting when it could easily be resolved if I could set each image individually to tailor each of their individual needs. The link shows the highland cow picture that is cut of width-wise, but if I change the aspect ratio all the length photos get cut off for other products. 
 

any and all help is appreciated 

Braden 

I've added the custom css, but I'm still having trouble controlling how my shop images appear. I am selling paintings with multiple sizes. I'm thinking that Squarespace isn't the best platform for selling this type of product. Has anyone had luck getting images to size correct?

@mgrillpainting I so agree that Squarespace is not a great fit for selling art! We've run into the product image aspect ratio problem, and although I now have a solution that works for our template, it took what seemed an uncalled-for amount of coding and testing. (And because I don't have a way to test it beyond my own environment, I am loathe to actually implement it. And it works only on the product detail page, not on any of the other pages where images are poorly positioned or cropped.) I'm not sure my script can be modified for your template/version, but you'll find it here if you want to take a look.

As I've said before on this forum, I have a list of issues as long as my leg, but we stick with Squarespace because the commerce side is quite seamless and requires very little attention from anyone inside our very small non-profit. I wish I could say the same for the website side.

5 minutes ago, LKW said:

@mgrillpainting I so agree that Squarespace is not a great fit for selling art! We've run into the product image aspect ratio problem, and although I now have a solution that works for our template, it took what seemed an uncalled-for amount of coding and testing. (And because I don't have a way to test it beyond my own environment, I am loathe to actually implement it. And it works only on the product detail page, not on any of the other pages where images are poorly positioned or cropped.) I'm not sure my script can be modified for your template/version, but you'll find it here if you want to take a look.

As I've said before on this forum, I have a list of issues as long as my leg, but we stick with Squarespace because the commerce side is quite seamless and requires very little attention from anyone inside our very small non-profit. I wish I could say the same for the website side.

 

I can say you made great work with your coding skill, congrat

29 minutes ago, LKW said:

@mgrillpainting I so agree that Squarespace is not a great fit for selling art! We've run into the product image aspect ratio problem, and although I now have a solution that works for our template, it took what seemed an uncalled-for amount of coding and testing. (And because I don't have a way to test it beyond my own environment, I am loathe to actually implement it. And it works only on the product detail page, not on any of the other pages where images are poorly positioned or cropped.) I'm not sure my script can be modified for your template/version, but you'll find it here if you want to take a look.

As I've said before on this forum, I have a list of issues as long as my leg, but we stick with Squarespace because the commerce side is quite seamless and requires very little attention from anyone inside our very small non-profit. I wish I could say the same for the website side.

 

I check your test-product but it seem to be removed, is there any distortion image issue you face on other page?

4 minutes ago, bangank36 said:

I check your test-product but it seem to be removed, is there any distortion image issue you face on other page?

Well, for example, take a look at the product collection page here: whitprint.com/emprex-2020-inv

On mobile, there's so much whitespace beneath each wide image that its title appears to label the image below it.  So instead of the product collection page, I use summary blocks to display product thumbnails, and that looks a lot better on mobile. However, summary blocks crop the images, which is not what you want when displaying art.  But it seems the better of the two choices.

6 hours ago, LKW said:

Well, for example, take a look at the product collection page here: whitprint.com/emprex-2020-inv

On mobile, there's so much whitespace beneath each wide image that its title appears to label the image below it.  So instead of the product collection page, I use summary blocks to display product thumbnails, and that looks a lot better on mobile. However, summary blocks crop the images, which is not what you want when displaying art.  But it seems the better of the two choices.

 

Have you try mansory display?

9 hours ago, mgrillpainting said:

I've added the custom css, but I'm still having trouble controlling how my shop images appear. I am selling paintings with multiple sizes. I'm thinking that Squarespace isn't the best platform for selling this type of product. Has anyone had luck getting images to size correct?

What is your size url

14 hours ago, bangank36 said:

Have you try mansory display?

Is that the same as the "Wall" layout in the Montauk summary block?  That uses a fixed width for images. Instead of indicating the relative sizes of tall and wide images, it makes the tall images look much bigger than the wide images, which is misleading when the products are the images themselves.

@bangank36 Thanks for the suggestion. I found that a small change was needed for 7.1 -- adding this to my 7.1 site allows the aspect ration of differently sized artworks to display correctly on the product detail page:

.pdp-gallery-slides-image{
  width: 100% !important;
  height: auto !important;
  top: 0 !important;
  left: 0 !important;
}

However I have not found a solution for the store page. 

I am using grid: masonry for some gallery pages and it allows the different painting shapes (some vertical, some horizontal) to be represented without cropping. I could change the gallery image link to the corresponding product page -- but duplicating all the image uploads (product image cannot use images upload for the gallery!) is certainly tedious.

I don't understand why Squarespace offers only a fixed aspect ratio for every product image on the store page. That simply doesn't work for art pieces.

PS: I am a complete newbie so maybe there's something I'm just not understanding?

These two images illustrate the problem -- the first shows cropping of the images on the store page.

The second shows the image uncropped on the product detail page, thanks to bangank36's suggestion.

On 2/5/2022 at 4:18 AM, JWNY said:

@bangank36 Thanks for the suggestion. I found that a small change was needed for 7.1 -- adding this to my 7.1 site allows the aspect ration of differently sized artworks to display correctly on the product detail page:

.pdp-gallery-slides-image{
  width: 100% !important;
  height: auto !important;
  top: 0 !important;
  left: 0 !important;
}

However I have not found a solution for the store page. 

I am using grid: masonry for some gallery pages and it allows the different painting shapes (some vertical, some horizontal) to be represented without cropping. I could change the gallery image link to the corresponding product page -- but duplicating all the image uploads (product image cannot use images upload for the gallery!) is certainly tedious.

I don't understand why Squarespace offers only a fixed aspect ratio for every product image on the store page. That simply doesn't work for art pieces.

PS: I am a complete newbie so maybe there's something I'm just not understanding?

These two images illustrate the problem -- the first shows cropping of the images on the store page.

The second shows the image uncropped on the product detail page, thanks to bangank36's suggestion.

Can you share your site with the protected password so I can take a look?

On 11/12/2020 at 4:25 PM, bangank36 said:

Let's try this in custom css, it make image widh 100% and height update accordingly

Settings->Design->Custom Css

.ProductItem-gallery-slides-item-image {
  width: 100% !important;
  height: auto !important;
  top: 0 !important;
  left: 0 !important;
}

Hi! I am having the same issue...my image is quite wide and is heavily cropped in the product page. I have tried pasting your code into the CSS section and it hasn't changed the appearance of the image. Am I doing something wrong? I've attached a screenshot of the product page, and also one that shows what my product image should actually look like.

Many thanks!

5 minutes ago, NickHeynsbergh said:

Hi! I am having the same issue...my image is quite wide and is heavily cropped in the product page. I have tried pasting your code into the CSS section and it hasn't changed the appearance of the image. Am I doing something wrong? I've attached a screenshot of the product page, and also one that shows what my product image should actually look like.

Many thanks!

It' s impossible to support via only some words and images. we need to inspect your site to check what your issue is and give the right solution. can you share your site with the protected password so we can take a look?

Hi, here is the product page:

https://www.nickheynsbergh.com/shop/at-a-party-when-i-was-17-the-guy-i-was-infatuated-with-slid-his-hand-up-my-shirt-while-we-were-sleeping-on-our-friends-loungeroom-floor

I'm not sure how to create a protected password?

You 

9 minutes ago, NickHeynsbergh said:

Hi, here is the product page:

https://www.nickheynsbergh.com/shop/at-a-party-when-i-was-17-the-guy-i-was-infatuated-with-slid-his-hand-up-my-shirt-while-we-were-sleeping-on-our-friends-loungeroom-floor

I'm not sure how to create a protected password?

Here is the code I tried and it seems fine

.ProductItem-gallery-slides-item-image {
  width: 100% !important;
  height: auto !important;
  left: 0 !important
}

If you see that nothing changes, it may be a bug from SQS, you can check again via accessing your site with Incognito mode

My testing

Thank you so much! It works in an incognito window. Much appreciated!

Hey @bangank36

I have a similar problem on my product pages.

I sell art print, the first image (3/4 vertical ratio) looks like this with a dropshadow effect:

And the next images (in 1:1 ratio) are the same art but displayed in different sizes (SMALL,MEDIUM,LARGE,XLARGE):
 

The problem is that these photos are not automatically crop to fit the space.
And with the shadow effect it doesn't look good at all.

Could you help me with this ? 🙂

PS: I tried the code you shared previously but it doesn't work.

 

2 hours ago, iJizzy1 said:

Hey @bangank36

I have a similar problem on my product pages.

I sell art print, the first image (3/4 vertical ratio) looks like this with a dropshadow effect:

 

And the next images (in 1:1 ratio) are the same art but displayed in different sizes (SMALL,MEDIUM,LARGE,XLARGE):
 

The problem is that these photos are not automatically crop to fit the space.
And with the shadow effect it doesn't look good at all.

Could you help me with this ? 🙂

PS: I tried the code you shared previously but it doesn't work.

 

Can you share your site with the site-wide password?

My bad:

www.brondyhumphrey.com
psw: pure

Can not access it with the above information

Hello @bangank36, It is the right one now.
 

Hello, 

I just wanted to share CSS that the problem with images being cut off on product pages. This code respect both tall and wide images (while the ones refered to earleir only respect the wide ones). Using 7.1 and template Sackett. 

Hope it helps some of you! 

 

/*RESPECTS IMAGES' ORIGINAL RATIO ON PRODUCT PAGES*/

/* Ensure the image respects its aspect ratio and fits within the container */
.ProductItem-gallery-slides-item-image {
  width: auto !important; /* Allow width to adjust for tall images */
  max-width: 100% !important; /* Ensure the image doesn't overflow the container */
  height: auto !important; /* Maintain the aspect ratio */
  max-height: 100vh !important; /* Prevent the image from exceeding the viewport height */
  display: block; /* Prevent inline-block spacing issues */
  margin: 0 auto; /* Center the image horizontally */
}

/* Ensure the container respects the image size */
.ProductItem-gallery-slides-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* Stack the image and text vertically */
  width: 100%;
  max-width: 100%;
  overflow: visible; /* Prevent clipping of tall images */
}

/* Adjust text alignment below the image */
.ProductItem-details {
  max-width: 100%;
  text-align: center; /* Center-align text */
  margin: 20px auto; /* Add space between image and text */
}