Shop images being cropped

Site URL: https://jevoncareyphotography.squarespace.com/config/pages/616fdecc2df1493e5487ac9b/categories/616fdecc2df1493e5487ac9f

Not sure what to do about this but i am producing a website for the sale of photographic images, some in landscape orientation, some portrait and a few square . Having set up store pages for individual products it would appear that the images displayed on the thumnail page (edit product) default to a cropped display on their relevant store page , regardless of the selcection i make editing the image to landscape , portrait or square. Further , if i then try to remedy this by editing the page using {edit design} this defaults the whole shop page to those settings rather than just the one particular image i am trying to work on. Really frustrating as it only seems to be a problem within store pages , any help would be appreciated. Appologies if this is a known fault.

Hi,

What is password?

I also seem to have this problem - I my images are fine, expect on the product pages where Squarespace crops them all and I can't find any options to force them not to be cropped.

Huge huge thanks in advance for any advice.

Here is an example of my shop/product page which I'd like the photos not to be cropped in:

https://www.hightideldn.com/shop/p/architectural-corset-belt

(no password needed).

Thank you!

 

p.s. using 7.1 if that makes a difference.

On 1/14/2022 at 5:05 PM, SteveVern said:

p.s. using 7.1 if that makes a difference.

Add to Design > Custom CSS

img.pdp-gallery-slides-image {
    object-fit: contain !important;
}

@tuanphan

thank you so so much! Works perfectly!

If you had one more moment, I have a landing page:

https://www.hightideldn.com/

And I'd love it that the the photo and the button fill one screen (so without the need for scrolling). At the moment I've just forced it to be small, but it doesn't work great. 

If you had anysolution that would be amazing.

(Also thank you for all your comments on here - I've been using them for a number a different sites. You are so generous and I'm so grateful.)

On 1/18/2022 at 5:05 PM, SteveVern said:

@tuanphan

thank you so so much! Works perfectly!

If you had one more moment, I have a landing page:

https://www.hightideldn.com/

And I'd love it that the the photo and the button fill one screen (so without the need for scrolling). At the moment I've just forced it to be small, but it doesn't work great. 

If you had anysolution that would be amazing.

(Also thank you for all your comments on here - I've been using them for a number a different sites. You are so generous and I'm so grateful.)

You want to reduce image + button, make sure them on one screen + remove scroll?

Or make button over image, then remove scroll?

I have a very similar issue to the above, my photography shots are all displaying as portrait and I'd prefer them to display in the dimensions of the actual photo (i.e. some landscape and others portrait).

I tried the custom CSS but it didn't seem to work for me sadly, any help is appreciated.

htpps://www.aussiecoastaldreaming.com.au/

Thanks!

22 hours ago, aussiecoastaldreaming said:

I have a very similar issue to the above, my photography shots are all displaying as portrait and I'd prefer them to display in the dimensions of the actual photo (i.e. some landscape and others portrait).

I tried the custom CSS but it didn't seem to work for me sadly, any help is appreciated.

htpps://www.aussiecoastaldreaming.com.au/

 

Thanks!

Add to Design > Custom CSS

/* Real photo size */
.products.collection-content-wrapper .grid-item .grid-image-cover {
    object-fit: contain !important;
}

20 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Real photo size */
.products.collection-content-wrapper .grid-item .grid-image-cover {
    object-fit: contain !important;
}

 

You're a legend, that worked perfectly!
One final but less important issue now is that the same thing is happening when I go into one of the landscape products, i.e. the image shows as a cropped portrait image instead of the real photo size.

Any help is again appreciated!

On 4/23/2022 at 11:23 AM, aussiecoastaldreaming said:

You're a legend, that worked perfectly!
One final but less important issue now is that the same thing is happening when I go into one of the landscape products, i.e. the image shows as a cropped portrait image instead of the real photo size.

Any help is again appreciated!

Don't remove above code Add this code under

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