Never solved completely picture orientation problem.

Site URL: https://adrianrydzluxuryprints.com

I have been struggling to display my landscape and portrait orientation pictures in original orientations on Store Page and Product Detail Pages. As everyone knows, squarespace lets you to display photos only in one orientation that makes all others pictures cropped. That is insane and I reported it to them, but they dont do anything with it for years.

Long time ago I fixed it with some css codes but I never been really happy with the result because my picture orientations are displayed in very small size compared to landscape orientations pictures.

I would like to have my portrait orientation pictures in the bigger size like here...

https://shop.jimmychin.com/collections/favorites

I tried to hire some people to fix it but no one ever replied to me haha. Does anyone know if it is possible to change?

just adding here that if you went down the tagging route, Squarespace adds the tag into the main article element on the product page, so you could add another rule that would do the fix on the main product page

article.tag-portrait .ProductItem-gallery-slides::before {
    padding-bottom:150%;
}

so add this rule and the rule from the second option to your custom css, then all you would need to do is tag the portrait orientation ones with "portrait" and it should fix it in both places.

10 hours ago, iamdavehart said:

Guess I should have told you to hire me rather than just writing the answer out.... 🙂 

LOL!

10 hours ago, iamdavehart said:

Your pictures are lit, mate!

I agree! The lighting is awesome and capturing the intricate structures we humans build is grand.

First of all, I would like to apologise for my late reply, Dave. It is absolutely unbelievable to see such an ANSWER on forum. And it makes me feel bad that you had to wait for my answer while I got it so quickly from you.

Thank you is just not enough. I don't know what should I say. Incredible knowledge and... kindness from you. And yeah, definitely you must be worth to hire! 

I will try to apply all of your suggestions as soon as I can. Really can't wait to just try it. Honestly I already feel better that someone like you took a look at this problem haha. Thanks a lot! It means a lot. I will write you privately too.

On 9/12/2021 at 7:33 PM, iamdavehart said:

Your pictures are lit, mate!

On 9/13/2021 at 6:18 AM, creedon said:

I agree! The lighting is awesome and capturing the intricate structures we humans build is grand.

Thanks you for your kind words about my photography, Dave and creedon. If you're interested to see more, you can take a look at my portfolio*

Here are the dystopian photos of Tokyo...

https://adrianrydz.myportfolio.com

And I also photographed really unique abandoned places in Japan in the last 12 months...

https://adrianrydz.myportfolio.com/urbex

*Hopefully it's not against the rules on forum.

I’m having the same problem with a photography site and found this solution on the forum but

On 9/12/2021 at 10:48 PM, iamdavehart said:

just adding here that if you went down the tagging route, Squarespace adds the tag into the main article element on the product page, so you could add another rule that would do the fix on the main product page

article.tag-portrait .ProductItem-gallery-slides::before {
    padding-bottom:150%;
}

so add this rule and the rule from the second option to your custom css, then all you would need to do is tag the portrait orientation ones with "portrait" and it should fix it in both places.

unfortunately it keeps coming up as missing opening {

am I doing something wrong? 

can I just confirm that both rules can be copied into the Custom css? 
Thanks in advance 

@MandyR

Can you post a screenshot of the error?

Please post the URL for a page on your site where we can see your 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.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Thanks for responding. Here are the screenshots requested after entering the code in the Custom CSS section of the Shop page. I copied it underneath existing code that was already entered. I haven't left any spaces, just entered on a new line. My website is mandyrobbphotography.com.au password test. Thanks for looking at this for me 😊

https://www.mandyrobbphotography.com.au/fine-art-prints

@MandyR

You've put the code in Design > Custom CSS. iamdaveheart said to put the code in a code block on your page.

On 9/12/2021 at 3:33 AM, iamdavehart said:

e.g. if you were to add this to a code block on the page this would set up a class called portrait-fix that sorted out the padding, then loop through all the images and check their dimensions, applying the fix if it found a portrait one. 

@creedon

I thought the most current advice was to add to custom css? as below

On 9/12/2021 at 10:48 PM, iamdavehart said:

so add this rule and the rule from the second option to your custom css, then all you would need to do is tag the portrait orientation ones with "portrait" and it should fix it in both places.

@MandyR

I didn't go through all the instructions but code with <style> or <script> won't work in Custom CSS. <style> and <script> denote HTML code which goes in places like Code Injection or Code Blocks.

9 hours ago, creedon said:

@MandyR

I didn't go through all the instructions but code with <style> or <script> won't work in Custom CSS. <style> and <script> denote HTML code which goes in places like Code Injection or Code Blocks.

This is probably the reason it doesn't work then? @iamdavehart  @adrianrydz did you have any luck solving this problem? As expressed in your frustration @adrianrydz at the beginning of the question, it seems to be a problem that everyone with a photography or artist site experiences. Would like some clarity on how to fix this problem? 

@creedon @iamdavehart I don't know where to place the code specific to the page, as the "Code Injection" only allows for code on the header, footer, order confirmation but not on the entire page. The other option is adding it in the page settings but adding code there only allows for it to be added to the head? Am I missing something? is it to do with the template that I have chosen? 

28 minutes ago, MandyR said:

@creedon @iamdavehart I don't know where to place the code specific to the page, as the "Code Injection" only allows for code on the header, footer, order confirmation but not on the entire page. The other option is adding it in the page settings but adding code there only allows for it to be added to the head? Am I missing something? is it to do with the template that I have chosen? 

 

In the your custom css panel, should remove the tag <style> and </style> and place only what in between those two, it will help remove the issue warning

10 minutes ago, MandyR said:

Am I missing something? is it to do with the template that I have chosen? 

v7.1 sites all have the same underlying structure. Here is another issue. You are trying to apply code that was designed for a Store page to a Portfolio page. That won't work.

17 minutes ago, creedon said:

v7.1 sites all have the same underlying structure. Here is another issue. You are trying to apply code that was designed for a Store page to a Portfolio page. That won't work.

No I am trying to apply this to a Store page - Fine Art Prints

@creedon

23 minutes ago, bangank36 said:

In the your custom css panel, should remove the tag <style> and </style> and place only what in between those two, it will help remove the issue warning

thanks I will try this 🙂

so according to Squarespace info you shouldn't use CSS to customise padding so not sure how the above directions would work. What a shame that no-one knows how to solve this issue 😕

Hi @MandyR,

Squarespace don't recommend you play around with the padding etc because you risk breaking the way that they layout things, but in this case that's exactly what we're trying to do so it's honestly fine to do this. I wouldn't muck around with the layout much as a rule, but small contained changes are fine.

The instructions I posted originally cover a number of ways you might want to approach this that were in some cases specific to Adrian's site. In Adrian's original post he says he's already added some other CSS rules outside of the scope of this post, so you won't get exactly the same result without adding those. In addition, it looks to me like you've tried to mix a couple of the suggestions together which of course will not work. However, I did suggest that - in my opinion - the best option was to use a custom tag on the product and to apply css rules. 

To clarify, from the information posted above, to use a solution where you tag portrait prints with a tag, these are the steps.

1. Go to your portrait products and tag them as "portrait". make sure you hit comma after typing it in so that it properly adds the tag, you can tell its worked because the tag will get a grey circle around it.

 2. Add the following to your custom css. copy the rules straight in, no style or script tags are required. I've edited this slightly from the original answer because that had rules specifically written for adrian's site.

// this is from adrian's original site. it forces your photo to fit entirely
// inside the space provided by squarespace, honouring the original aspect ratio
.products.collection-content-wrapper .grid-item .grid-image-cover {
    width: auto !important;
    height: 100% !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

// this is my additional rule that changes the shape of the space available
// to the picture *if* you tag it with "portrait"
section .list-grid .grid-item.tag-portrait .grid-image-wrapper {
    padding-bottom:150%;
}

That's it. that's all you need to do.

Here's a gif of me adding these two rules. in my example I've added pictures in a fixed 3:2 aspect ratio. you can see that squarespace crops them all to fill the space required. the first rule makes sure that the whole picture fits inside the box. when the second rule is added the portrait photos expand to fill the width, rather than the height.

15 hours ago, MandyR said:

No I am trying to apply this to a Store page - Fine Art Prints

My bad. Looks like iamdaveheart has you sorted.

10 hours ago, iamdavehart said:

Hi @MandyR,

Squarespace don't recommend you play around with the padding etc because you risk breaking the way that they layout things, but in this case that's exactly what we're trying to do so it's honestly fine to do this. I wouldn't muck around with the layout much as a rule, but small contained changes are fine.

The instructions I posted originally cover a number of ways you might want to approach this that were in some cases specific to Adrian's site. In Adrian's original post he says he's already added some other CSS rules outside of the scope of this post, so you won't get exactly the same result without adding those. In addition, it looks to me like you've tried to mix a couple of the suggestions together which of course will not work. However, I did suggest that - in my opinion - the best option was to use a custom tag on the product and to apply css rules. 

To clarify, from the information posted above, to use a solution where you tag portrait prints with a tag, these are the steps.

1. Go to your portrait products and tag them as "portrait". make sure you hit comma after typing it in so that it properly adds the tag, you can tell its worked because the tag will get a grey circle around it.

 

 2. Add the following to your custom css. copy the rules straight in, no style or script tags are required. I've edited this slightly from the original answer because that had rules specifically written for adrian's site.

// this is from adrian's original site. it forces your photo to fit entirely
// inside the space provided by squarespace, honouring the original aspect ratio
.products.collection-content-wrapper .grid-item .grid-image-cover {
    width: auto !important;
    height: 100% !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

// this is my additional rule that changes the shape of the space available
// to the picture *if* you tag it with "portrait"
section .list-grid .grid-item.tag-portrait .grid-image-wrapper {
    padding-bottom:150%;
}

 

That's it. that's all you need to do.

Here's a gif of me adding these two rules. in my example I've added pictures in a fixed 3:2 aspect ratio. you can see that squarespace crops them all to fill the space required. the first rule makes sure that the whole picture fits inside the box. when the second rule is added the portrait photos expand to fill the width, rather than the height.

 

@iamdavehartThanks very much for your response. I had the portrait one tagged but the code was not working. Will try this new code in CSS. Many thanks for your assistance 🙂