Jump to content

Product images + aspect ratios

Go to solution Solved by Beyondspace,

Recommended Posts

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 

Link to comment
  • Solution

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

image.thumb.png.a15c1f57296710266943d8641945835f.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@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.

 

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

 

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Link to comment
  • 1 year later...

@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.

1486401248_ScreenShot2022-02-04at4_13_09PM.thumb.png.2c9241550923b4370746cb5220026638.png2097992835_ScreenShot2022-02-04at4_12_43PM.thumb.jpg.561c0083dfd55b8c39b4980292522254.jpg

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

1486401248_ScreenShot2022-02-04at4_13_09PM.thumb.png.2c9241550923b4370746cb5220026638.png2097992835_ScreenShot2022-02-04at4_12_43PM.thumb.jpg.561c0083dfd55b8c39b4980292522254.jpg

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 months later...
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;
}

image.thumb.png.a15c1f57296710266943d8641945835f.png

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!

Screen Shot 2022-04-19 at 8.34.26 am.png

Screen Shot 2022-04-19 at 8.34.43 am.png

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

Screen Shot 2022-04-19 at 8.34.26 am.png

Screen Shot 2022-04-19 at 8.34.43 am.png

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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

You 

9 minutes ago, NickHeynsbergh said:

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.401ac6f91dc86645ba7b322cc32ef3c8.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 3 months later...

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:

634818924_Capturedcran2022-07-31200125.thumb.png.e575aadca18d0e67cf354c6d14bf8caa.png

 

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

1001839832_Capturedcran2022-08-02123010.thumb.png.b1a8007a50cd4718c99b728378c4ca8b.png


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.

 

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

634818924_Capturedcran2022-07-31200125.thumb.png.e575aadca18d0e67cf354c6d14bf8caa.png

 

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

1001839832_Capturedcran2022-08-02123010.thumb.png.b1a8007a50cd4718c99b728378c4ca8b.png


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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Can not access it with the above information

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.