Orientation of product images

@dweiss28

I don't know.

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

28 minutes ago, creedon said:

@dweiss28

I don't know.

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

https://www.danielweissphotography.com/

@dweiss28

Add the following to Store Settings > Advanced > Page Header Code Injection.

<style>

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

This is for v7.1.

Let us know how it goes.

1 hour ago, creedon said:

@dweiss28

Add the following to Store Settings > Advanced > Page Header Code Injection.

<style>

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

This is for v7.1.

Let us know how it goes.

Yes perfect thank you so much!

@creedon

This worked for me as well, thanks!

@creedon

This was very helpful! We had been struggling with this issue all day.... This worked great!

Cant thank you enough

@creedon

Yes thanks so much for this fix! I did have a question to add though. 

With the portrait images - they show aligned with their product title but with the landscape images they show up much further down aligned with the price. I wondered if there was anyway to have them align with the title the same as with the portrait orientation images? I don't know how complicated that would be to fix?!

Thanks for any help

@Beck

Please post the URL for a page on your site with a landscape oriented image.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

@Beck

Try the following.

<style>

  .ProductItem-gallery-slides-item-image {
  
    object-fit : contain !important;
    object-position : 50% 0 !important;
    
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

@Creedon

Thanks for the revised code, both the portrait and landscape images show up in the same position now which is great.

Thanks for you help, Beck

@creedon 

I've tried both the codes but i've been having the same problem 😕

When I'm on mobile view looking at a product image, the image looks fine. However, once i click it, the image turns into vertical a vertical crop & crops out most of the image.

Any suggestions?

Thank you

@jeffreyzie

Please post the URL for a page on your site where you are having this issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

@creedon 

Thanks for the quick reply. It's: www.oval-aqua-9hna.squarespace.com

Hey having same issues with images!! Argh! LOL. The issue is that the images submitted (this is for an artist auction for a fundraising event for the organization) are in square, portrait, and landscape orientations and I need the store and product detail pages to display the entire image and not crop anything - and I still want the image size to sit within the 1:1 square orientation I have set for the products. How can I accomplish this?

40 minutes ago, DunkinDonuts said:

Hey having same issues with images!! Argh! LOL. The issue is that the images submitted (this is for an artist auction for a fundraising event for the organization) are in square, portrait, and landscape orientations and I need the store and product detail pages to display the entire image and not crop anything - and I still want the image size to sit within the 1:1 square orientation I have set for the products. How can I accomplish this?

What is your site url

@creedon I am getting a syntax error in line 1 when I copy this into the custom CSS - do I need to add a space or something?

<style>

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

https://www.nataliecorwin.com/shop/p/sarcelle

@NCart

Add the code to Store Settings > Advanced > Page Header Code Injection.

This is mentioned earlier in the thread.

Hello everyone!  I'm having the same issue with my website and have tried pasting the provided codes (in the right places I think) and nothing is changing.  I have both landscape and portrait paintings listed on my site but my "Site Styles" image aspect ratio setting is currently set to 3:2 standard, which is cropping my portrait paintings. I think I'm still on 7.0 and my template is Brine.  Here's my URL: www.kristenpreble.com.  Any suggestions would be greatly appreciated!!

On 8/2/2021 at 2:36 AM, kristenp said:

Hello everyone!  I'm having the same issue with my website and have tried pasting the provided codes (in the right places I think) and nothing is changing.  I have both landscape and portrait paintings listed on my site but my "Site Styles" image aspect ratio setting is currently set to 3:2 standard, which is cropping my portrait paintings. I think I'm still on 7.0 and my template is Brine.  Here's my URL: www.kristenpreble.com.  Any suggestions would be greatly appreciated!!

Add to Design > Custom CSS

.tweak-product-list-image-aspect-ratio-32-standard .ProductList-outerImageWrapper {
    padding-bottom: 100% !important;
}
img.ProductList-image.ProductList-image--primary.loaded {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}

Hello 

I'm having same issue with my site.  Landscape crop on all images inclcuding portrait. 

mu url is www.oliviabennett.co.uk

On 8/4/2021 at 4:47 AM, bettyoliveM said:

Hello 

 

I'm having same issue with my site.  Landscape crop on all images inclcuding portrait. 

 

mu url is www.oliviabennett.co.uk

Hi. Where is image?

Hi there, I am a photographer

I'd like to have a website that shows only landscape photos when you are on a computer or laptop and only portraits photographs when you are on your mobile.
No idea if I have to have two different galleries of photos or can the photos be identified by the tool that shows the photos in the website as vertical or horizontal?
Is it clear?
I can't and don't want to cut or crop my photos...

@frankbalbi

Two different galleries or photos might be used. Essentially you want to hide or show one of the two galleries or photos depending on orientation. Landscape or portrait.

Another would be to make all the images the same size. Don't crop but decide for example that all image will be in landscape. Then alter the portrait image to have a transparent border on each side.

What method you use depends on your needs. The later "solution" would be easier in that would be less custom code. But you'd lose some image detail because one of the orientations would be trying to fit in the space of the other. And you'd have to manipulate the images themselves with something like Photoshop.

Hello, 

I am a photographer and I want to show in the e-shop photos in landscape or portrait, depends on the picture.

I tried this but it doesn't work.

thx

<style>

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

@SRLB

Please post the URL for your store/product page on your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.