Jump to content

distorted product photos

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.missdemeanor.com/womens?category=j.walker

after years of easily uploading photos from my phone as product images, the photos appear stretched and distorted in the gallery view. once i click on the product, the photos appear as they should. anyone else experiencing this?

 

below: photo of two products in gallery view. the photo of the blouse on the left is distorted, photo on the right is normal (older photo, taken with same phone).

second photo is once i click through to the product, the image appears as it should. 

image.thumb.png.747740940c65ac5f46a0851c09c26112.png

 

image.thumb.png.aab74802deb1cf3f7cc56b45c50ed4c7.png

Link to comment
  • Replies 11
  • Views 2k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Add to Design > Custom CSS

/* Fix distorted product images */
img.ProductList-image.ProductList-image--primary.loaded {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !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
21 hours ago, kennedyroseinteriors said:

Same thing has happened to me but my product photos are still shrunk and distorted looking. I put in a ticket request. Has not been resolved yet. Did you end up adding the code above? 

Try it, if it doesn't work, you can share link to your site, we can check easier

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
10 hours ago, kennedyroseinteriors said:

my site: kennedyroseinteriors.com 

 

the issue is under rugs, and the two new listings at the top are the distorted ones named Jasper and Ryder.

Hi,

You mean Jasper & Ryder Hover images?

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

Hi again Jessica,
 
Thanks for getting back to us and for providing the requested files.
 
My apologies about the delay in following up. As Birdie mentioned, it can take time to receive a reply on escalated tickets. This is generally because in-depth troubleshooting is required to properly assess an issue.
 
To provide some context, prior to reaching out, I did take some time to conduct some testing on a test site and I wasn't able to replicate the issue you're seeing. I'm also not seeing any known issues at this time with how product images are being displayed. This indicated that the source of the problem may stem from the images themselves, so it was necessary to review the images files directly.
 
Taking a look at the images you provided, I can see that they are not following all the formatting guidelines we require for images on our platform. Specifically, the images are using a Display P3 color profile as opposed to the sRGB color profile.
 
For reference, here's our guide about that:
 
https://support.squarespace.com/hc/en-us/articles/206542517-Formatting-your-images-for-display-on-the-web#toc-image-requirements-and-best-practices

We have found that images that differ from the guidelines may result in upload or display issues. As a test, I tried converting the color profile of your images from Display P3 to sRGB and uploading them to a test site, and the images displayed without any issues on a test store page.
 
To avoid this issue moving forward, you'll want to be sure the correct sRGB color profile is being used for your images. For images that have already been uploaded to the site, you'll want to replace any affected images with ones that have been converted to sRGB.

If you're still seeing issues with images that are formatted according to the requirements outlined in the guide above, please reach out again with the image file and we'll be glad to take a look.
 
In the meantime, I definitely understand how being able to use images with different color profiles would be useful, so I’ll go ahead and submit this as a feature request to our developers. While we can’t guarantee every request will be implemented, we really do use those requests and review them regularly to inform future decisions about our product.
 
Hope this helps Jessica, let us know if you have any questions.

Min

 

 

 

 

*** I don't believe the image is an issue as I used an old product image that was able to upload without any issues to see it if upload appropriately or be distorted. The second listing of the same item was uploaded with it being distorted even though a week ago it uploaded just fine. HELP!

 

Jess

Link to comment
  • 3 weeks later...
  • 3 weeks later...
5 hours ago, ChrisPeckTattoos said:

I have the same issue except my gallery photos when they are within a grid gallery looked smushed. Is there code that will resolve that?

 

Screen Shot 2021-10-21 at 11.12.29 PM.png

Can you share link to page in screenshot?

Also, you should remove <style> and </style>. Custom CSS can't read both text, & will make syntax error

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.