Jump to content

Shop images being cropped

Recommended Posts

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.

Link to comment
  • 2 months later...

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!

 

Link to comment

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.