Orientation of product images

Hey,

My product images seem to either be cropped to all portrait or all landscape. I need some to be portrait and some landscape and I'm selling a range of photography. Am using version 7.1. Otherwise I really just want my photos to display as they are originally with no auto-cropping! How can I turn this off?

Would appreciate any help!

You can set up the css for the image as

img {
	width: 100%;
	hight: auto;
}

If you need specific help, kindly share your current site url,

Hi Bangank, 

I can't send the site url as the website hasn't been published yet but I've attached a screenshot of one product page that the photo needs to be auto height. I'm fairly new to changing the css. Do I literally just cut and paste that css to the custom CSS section as in the screenshot. How do I specify which (or all images) to be auto height?

Thanks for your help

13 hours ago, bangank36 said:

You can set up the css for the image as

img {
	width: 100%;
	hight: auto;
}

If you need specific help, kindly share your current site url,

 

Thanks bangank, please see what I just replied above with. 

Cheers

On 7/13/2020 at 10:15 AM, Jess-2020 said:

Thanks bangank, please see what I just replied above with. 

Cheers

Hi there

You can create a temp password for the access

Hello! I too am having 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?

On 9/30/2020 at 11:24 PM, JPWilkinson said:

Hello! I too am having 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?

You should send me your site url so a proper solution can be provided

Unfortunately, the site is still being worked on and is not publicly available. Would screenshots work? If so, what would I send you??

5 hours ago, JPWilkinson said:

Unfortunately, the site is still being worked on and is not publicly available. Would screenshots work? If so, what would I send you??

You can set up private temp password and remove it after it done

Hi

I have the same issue (need to have both landscape and portrait format). The assistance of squarespace is not able to deliver any practical solution. 

Having never used CSS, what is the practical process to achieve to the solution you propose?

thanks 

To add CSS, go to Design -> Custom CSS
Could you show your current site?

On 7/12/2020 at 11:42 PM, bangank36 said:

You can set up the css for the image as

img {
	width: 100%;
	hight: auto;
}

If you need specific help, kindly share your current site url,

 

Hello my site is currently having the same problem when viewing on mobile where it doesn't show full image instead a cropped vertical version of it my site is zaccoonan.com/shop I do not know where to inject this code.

1 hour ago, ZacCoonan said:

Hello my site is currently having the same problem when viewing on mobile where it doesn't show full image instead a cropped vertical version of it my site is zaccoonan.com/shop I do not know where to inject this code.

I sent solution via the message

39 minutes ago, bangank36 said:

I sent solution via the message

Hello, how do I see what you messaged me 

6 hours ago, ZacCoonan said:

Hello, how do I see what you messaged me 

are you Kristy Coonan? I just replied your mail

On 12/2/2020 at 4:08 AM, ZacCoonan said:

Hello my site is currently having the same problem when viewing on mobile where it doesn't show full image instead a cropped vertical version of it my site is zaccoonan.com/shop I do not know where to inject this code.

Hi, I have exactly the same issue that ZacCoonan has above - when viewing images on mobile device, the image is cropped into a vertical aspect ratio. Would you mind sharing what the fix for this was please? Thanks!

7 minutes ago, StuCornell said:

 

Hi, I have exactly the same issue that ZacCoonan has above - when viewing images on mobile device, the image is cropped into a vertical aspect ratio. Would you mind sharing what the fix for this was please? Thanks!

PM me your site

Hi Bangank36,

I am having this problem as well. Since so many others also have this issue and are returning to this forum, may you please provide a solution here on the forum so that each person that returns to it can share in the insight as well? When all of the fixing is happening off of the forum then it provides no assistance to future forum visitors. 
 

Can you please share what you did on the others websites? If you were to login to my account right now - what steps would you take? What pages would you go to? Where would you paste the CSS and what further steps would you take? I am also trying to learn CSS myself so would prefer to learn by doing than have someone resolve it for me. 
 

Thanks so much!! Appreciate your help. 

4 minutes ago, Emster549 said:

Hi Bangank36,

I am having this problem as well. Since so many others also have this issue and are returning to this forum, may you please provide a solution here on the forum so that each person that returns to it can share in the insight as well? When all of the fixing is happening off of the forum then it provides no assistance to future forum visitors. 
 

Can you please share what you did on the others websites? If you were to login to my account right now - what steps would you take? What pages would you go to? Where would you paste the CSS and what further steps would you take? I am also trying to learn CSS myself so would prefer to learn by doing than have someone resolve it for me. 
 

Thanks so much!! Appreciate your help. 

I am not sure if I understand your note, this topic created by the author but problem is he/she not able to provide the site url so I can not suggest a solid solution for their site, therefore I place a placeholder solution.

There is no common solution since each site has different set up/templates. 

If you wish to sort this out yourself, you can start by learning html/css 

CSS Tutorial (w3schools.com) combine with Squarepace basic feature like custom css/ code injection

Disclosure: Like most of supporters in this forum, I am not Squarespace employee, I'm just a normal user like any of you here, so if my solution did not fit your need, you can simply wait for other help or post the question as new topic which include your site url and access password (if there is)

Ah, I see. I figured there was a common solution! Could you please help with my site? 

Thanks!

4 hours ago, Emster549 said:

Ah, I see. I figured there was a common solution! Could you please help with my site? 

Thanks!

You did not post your site url

Hello i'm having the same issue. Some of my product need to be landscape and some portrait. When i add any code to the css nothing changes. Here's my url www.designer-displays.com

Any help would be appreciated. Thank you

@RachaelBaxter

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

<style>

  .products.collection-content-wrapper .grid-item .grid-item-image {
  
    object-fit : contain !important;
    
    }
    
  </style>

This is just a start.

One thing you can see after adding this CSS is that the 3:2 images are all not the same height. And the same thing for the 2:3 with the width. It would look more consistent if all the images in the two groups were the same size.

Let us know how it goes.

I have this problem as well, as I would imagine most people do. Squarespace should provide a simple workaround.

On 1/30/2021 at 4:37 PM, creedon said:

@RachaelBaxter

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

<style>

  .products.collection-content-wrapper .grid-item .grid-item-image {
  
    object-fit : contain !important;
    
    }
    
  </style>

This is just a start.

One thing you can see after adding this CSS is that the 3:2 images are all not the same height. And the same thing for the 2:3 with the width. It would look more consistent if all the images in the two groups were the same size.

Let us know how it goes.

Is there anyway to apply this code to the actual products on the page you would purchase them? This did a great job for my store but when the products are clicked on and they are in portrait, the still appear in landscape after you click on them