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

Different size Product (images)


Meeeee

Question

Hi all, 

In Design -> Product Items -> Aspect Ratio it gives you just a single option.  The problem that I'm having is that some images on a website i'm building are (generally) either 4:3 or 3:2, shot natively on different cameras.  Is there a better way to address this so images maintain their original aspect ratio and don't follow this setting?

I found this post and some code:

.summary-thumbnail-image.loaded {
    object-fit: contain !important;
    object-position: top;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
}

.sqs-block-summary-v2 .img-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 0px !important;

But it doesn't affect product details page...see attached screenshots.  

Thanks for your help!
J

 

Screenshot 2020-03-29 17.01.05.png

Screenshot 2020-03-29 17.01.18.png

Edited by Meeeee
Link to comment

24 answers to this question

Recommended Posts

  • 0
.ProductItem-gallery-slides-item-image {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
.ProductItem-gallery-slides-item.selected.going-next.loaded {
    padding-bottom: 50% !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

@tuanphan not sure it works -- see site.  It still crops at the bottom of the 4:3 image to 3:2 size.  Granted in design setting it does show the aspect ratio is 3:2. But if I set to 4:3 I have the opposite effect.  

 

 

Edited by Meeeee
Link to comment
  • 0

Okay -- so when I changed the height to width, that actually seems to help my cause.  Not perfect, but pretty close.  

.ProductItem-gallery-slides-item-image {
    width: auto !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}
.ProductItem-gallery-slides-item.selected.going-next.loaded {
    padding-bottom: 50% !important;
}
Link to comment
  • 0

I wanted to continue to update this as it seems I'm not the only one with this issue.  I came across the "auto" aspect ratio in 7.1 when doing a product summary block, which is fantastic.  I'm not sure why it can't be included in default options, because when you then click on the image itself, it has the default setting, which looks not great.  

Screenshot 2020-03-30 18.01.07.png

Screenshot 2020-03-30 18.01.43.png

Edited by Meeeee
Link to comment
  • 0
On 8/26/2020 at 5:36 AM, AdeleThomas0 said:

This was helpful! Thank you! Did you ever figure out how to make the images look center?

If you share site url, we can take a look

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Hi, I think I found a better solution:

.ProductItem-gallery-slides-item-image {
    object-fit:contain!important; 	
}

It's insane to me that Squarespace doesn't just have an "Original Aspect Ratio" option for product details pages. Kind of a dealbreaker for photographers.

Link to comment
  • 0

Hi @tuanphan - just thought I would post my question here too, as I wasn't sure you would see it on the other thread... This thread really seems to be exactly what I am searching for.. If you could help that would be amazing. Here is my original question:

I sell stock photos and art that are both vertical and horizontal and it would be amazing if the products in Squarespace could show either orientation depending on the product itself! 

I have emailed support about this, as now that I am thinking of it, it seems rather silly - given they have themes for artists and photographers! And I image this would suit a lot of other people....

My site is www.jessbailey.com.au and the stock photos on this page are both vertical and horizontal, but they all get cropped to one style only for the shop view and the product view... https://www.jessbailey.com.au/stock-photos

Link to comment
  • 0
On 5/13/2021 at 4:05 AM, JessBailey said:

Hi @tuanphan - just thought I would post my question here too, as I wasn't sure you would see it on the other thread... This thread really seems to be exactly what I am searching for.. If you could help that would be amazing. Here is my original question:

 

I sell stock photos and art that are both vertical and horizontal and it would be amazing if the products in Squarespace could show either orientation depending on the product itself! 

I have emailed support about this, as now that I am thinking of it, it seems rather silly - given they have themes for artists and photographers! And I image this would suit a lot of other people....

My site is www.jessbailey.com.au and the stock photos on this page are both vertical and horizontal, but they all get cropped to one style only for the shop view and the product view... https://www.jessbailey.com.au/stock-photos

Add to Design > Custom CSS

.products.collection-content-wrapper .grid-item .grid-image-cover {
    object-fit: contain !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Thanks @tuanphan that's awesome!

Last question on this - is there a way to make the actual product view also responsive to the photo size? The code you gave me works amazingly on the thumbnail view, but the actual product is still cropped to "standard 2:3". 

For example, this photo is showing as vertical on the thumbnail, but cropped for the product view: https://www.jessbailey.com.au/stock-photos/p/rose-gold-desktop-image-3

If I am asking too much please let me know!

Thanks again for your help 🙂 

 

Link to comment
  • 0
On 5/15/2021 at 4:39 AM, JessBailey said:

Thanks @tuanphan that's awesome!

Last question on this - is there a way to make the actual product view also responsive to the photo size? The code you gave me works amazingly on the thumbnail view, but the actual product is still cropped to "standard 2:3". 

For example, this photo is showing as vertical on the thumbnail, but cropped for the product view: https://www.jessbailey.com.au/stock-photos/p/rose-gold-desktop-image-3

If I am asking too much please let me know!

Thanks again for your help 🙂 

 

The url doesn't exist.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 5/17/2021 at 4:03 AM, JessBailey said:

Sorry @tuanphan, here is the correct URL: https://www.jessbailey.com.au/shop/p/rose-gold-desktop-image-3

Although it isn't just this product and link where it happens, it is any time the image is vertical thumb nail in the shop, it is still cropped as a horizontal product image... 

Add to Design > Custom CSS

/* product images */
img.ProductItem-gallery-slides-item-image {
    object-fit: initial !important;
}
.tweak-product-basic-item-gallery-aspect-ratio-32-standard .ProductItem-gallery-slides:before {
    padding-bottom: 100% !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 5/14/2021 at 12:35 AM, tuanphan said:

Add to Design > Custom CSS

.products.collection-content-wrapper .grid-item .grid-image-cover {
    object-fit: contain !important;
}

 

@tuanphan  Dear Tuanphan, i used this code that you provided, and it worked perfectly with my online shop, the aspect ratios are original now. see my shop here: https://www.gyu-art.com/shop 

However, as most of my customers would be using phone, i wonder if you could please provide or modify the CSS code so that
On the Mobile view, on the product detail page, the image would be the original aspect ratio as well? 

Currently, on mobile view, the images are cut off (see attached pic), cannot see the original till you hit and open the image as lightbox. 

Thanks a lot for your help
GYu Art 

@tuanphan (In case message got missed)

Capture.PNG

Edited by GYuArt
In case message got missed
Link to comment
  • 0
On 7/15/2021 at 12:47 PM, GYuArt said:

@tuanphan  Dear Tuanphan, i used this code that you provided, and it worked perfectly with my online shop, the aspect ratios are original now. see my shop here: https://www.gyu-art.com/shop 

However, as most of my customers would be using phone, i wonder if you could please provide or modify the CSS code so that
On the Mobile view, on the product detail page, the image would be the original aspect ratio as well? 

Currently, on mobile view, the images are cut off (see attached pic), cannot see the original till you hit and open the image as lightbox. 

Thanks a lot for your help
GYu Art 

@tuanphan (In case message got missed)

Capture.PNG

Try this CSS

/* product detail images */
img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 7/16/2021 at 1:06 AM, tuanphan said:

Try this CSS

/* product detail images */
img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}

 

Thank you very very much, @tuanphan this worked well 🙂

Link to comment
  • 0
On 7/19/2021 at 4:10 AM, GYuArt said:

Thank you very very much, @tuanphan this worked well 🙂

Do you want to solve these?

Site URL – https://www.gyu-art.com/

1. (Mobile – Still life) On desktop, the entire image can be seen. On mobile, the image is partially cropped.

https://www.gyu-art.com/still-life

gyu-art.com-01-min.png

2. (Mobile – Rose) On desktop, the entire image can be seen. On mobile, the image is partially cropped.

https://www.gyu-art.com/still-life/rose

gyu-art.com-02-min.png

3. (Tablet – Figure) Text is cut into 2 lines.

https://www.gyu-art.com/figure

gyu-art.com-03-min.png

4. (Tablet – Cloud) Text is cut to the next line.

https://www.gyu-art.com/landscape/cloud

gyu-art.com-04-min.png

5. (Tablet – Footer) Add space between button Commission and side of page?

https://www.gyu-art.com/abstract-1

gyu-art.com-05-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 7/16/2021 at 2:06 PM, tuanphan said:

Try this CSS

/* product detail images */
img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}

 

Dear anh Tuan,

Your codes are life savers for me! Many thanks! Wonder if there is a code to change the aspect ratio to original for the "Popular photos" segment on my website at https://dqtrung.squarespace.com/?

Have a nice day!

Trung

Link to comment
  • 0
On 8/2/2021 at 9:40 AM, dongqtrung said:

Dear anh Tuan,

Your codes are life savers for me! Many thanks! Wonder if there is a code to change the aspect ratio to original for the "Popular photos" segment on my website at https://dqtrung.squarespace.com/?

Have a nice day!

Trung

Add to Design > Custom CSS

/* Homepage gallery photos */
body.homepage .gallery-grid-item img {
    object-fit: contain !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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