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

Never solved completely picture orientation problem.


adrianrydz

Question

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?

241810513_1617753575094969_587806590120910631_n.png

240731647_4407594159278529_7261191565774221429_n.png

Edited by adrianrydz
Link to comment

Recommended Posts

  • 1

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!

 

Edited by iamdavehart
added !important to javascript option

Dave Hart. Software/Technology Consultant living in London

Link to comment
  • 1

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.

Dave Hart. Software/Technology Consultant living in London

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

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

Link to comment
  • 0

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.

Link to comment
  • 0
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.

Link to comment
  • 0

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 

Link to comment
  • 0

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

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

Link to comment
  • 0

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 😊

697765644_ScreenShot2021-10-01at11_13_06am.thumb.png.f9176fce661835cbba4895ccbfa87622.png1749358048_ScreenShot2021-10-01at11_13_39am.thumb.png.df9f97763d47f8e5afac19f6c82651b1.png

Link to comment
  • 0

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

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

Link to comment
  • 0
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.


 

Link to comment
  • 0
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? 

 

Link to comment
  • 0

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

 

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

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
  • 0
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

Link to comment
  • 0
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 🙂

Link to comment
  • 0

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.

image.png.833bd2a53fbf286a7ca03a5e44386a43.png

 

 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.

tags.thumb.gif.5a1746f176469dfceaea2d740821006e.gif

 

Dave Hart. Software/Technology Consultant living in London

Link to comment
  • 0
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.

image.png.833bd2a53fbf286a7ca03a5e44386a43.png

 

 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.

tags.thumb.gif.5a1746f176469dfceaea2d740821006e.gif

 

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

 

Link to comment
  • 0

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

 

Edited by MandyR
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...