Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Orientation of product images


Recommended Posts

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!

Link to comment

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,

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

image.thumb.png.bd487ac17959b8b53fbd392e74c6b448.png

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

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 months later...

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?

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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 

Link to comment

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 month later...
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.

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
6 hours ago, ZacCoonan said:

Hello, how do I see what you messaged me 

are you Kristy Coonan? I just replied your mail

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

 

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!

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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. 

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 month later...

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

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 3 weeks later...
  • 1 month later...
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

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