Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Product images + aspect ratios


Babar
Go to solution Solved by bangank36,

Question

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 post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

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

Posted Images

9 answers to this question

Recommended Posts

  • 2

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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post
  • 0

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?

Link to post
  • 0

@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 post
  • 0
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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post
  • 0
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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post
  • 0
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 post
  • 0
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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post
  • 0
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 BaNgan from 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, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
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 post
  • 0
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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...