Never solved completely picture orientation problem.

squarespace have an interesting way of laying out image thumbnails. It's to do with how they make the grids layout evenly and respect focus points on the image etc. for each grid item the image gets put in a zero height container which is then padded out by percentage to make sure that the image covers it. this percentage is really the ratio of the image. so in your (landscape) case that padding will be set to 66% (2/3). What you need to do is locate the pictures that you want and change that padding to 150% (3/2). 

How you select those is an interesting problem. It seems like you've laid them out in a particular way to try to get the vertical ones together, in which case you can use an nth-child selector to choose all the grid items after 27 (9 rows of 3 that are landscape).

e.g. this uses the section id from your website by the way. you could just add this to your custom css to see it work straight away

section[data-section-id="60eabd925ebba154a80c1cfe"] .list-grid .grid-item:nth-child(1n + 28) .grid-image-wrapper {
    padding-bottom:150%;
}

however, this is probably not an ideal solution as you'd need to change the rule if you ever added any portrait pictures before etc. Unfortunately squarespace put the ratio of the image on the img element and it's very hard to then change the parent based on an attribute of the child using only css. squarespace does however add classnames when you tag products so one solution might be to add a tag "portrait" to your portrait orientation products, you could then alter your rule to target those tagged portrait like this

section[data-section-id="60eabd925ebba154a80c1cfe"] .list-grid .grid-item.tag-portrait .grid-image-wrapper {
    padding-bottom:150%;
}

you'd still have to remember to tag them as portrait though. I think this is a pretty good outcome

If you really wanted it to "just work", then you'd have to add some javascript (premium feature) to go through the grid and workout whether they were portrait or not and apply the padding style (or a classname that referenced the padding style).

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. 

<style>
  .portrait-fix { padding-bottom: 150% !important; }
</style>
<script>
	Array.from(document.querySelectorAll(".grid-item img"))
      	.forEach(i => { 
      		const d=i.getAttribute("data-image-dimensions").split("x").map(d=>parseInt(d)); 
      		if (d[0]<d[1]) { i.parentElement.classList.add("portrait-fix"); } 
    	});
</script>

you'd get a slightly odd look if you had one portrait one in a row with some landscape ones, but you haven't specified what you'd want to do there, so that might require a little more thought.

I think the second option, of manually tagging them with their orientation is the best route personally.

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

Your pictures are lit, mate!

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 🙂

@iamdavehart Pleased to say it has worked, thanks so much! I was wondering if there is a way to put in some code to arrange all the Portrait or Landscape ones together visually on the shop page?  I can then go through and tag each product as portrait or landscape and it would automatically arrange in groups on the SHOP page? Also could this then be used to ensure each collection is displayed together in a group too? By tagging the collection name? Or would that get too complicated?