adrianrydz Posted September 12, 2021 Share Posted September 12, 2021 (edited) 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? Edited September 12, 2021 by adrianrydz Link to comment
Solution iamdavehart Posted September 12, 2021 Solution Share Posted September 12, 2021 (edited) 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 September 12, 2021 by iamdavehart added !important to javascript option creedon and adrianrydz 1 1 Dave Hart. Software/Technology Consultant living in London. buymeacoffee Link to comment
iamdavehart Posted September 12, 2021 Share Posted September 12, 2021 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. MandyR and adrianrydz 1 1 Dave Hart. Software/Technology Consultant living in London. buymeacoffee Link to comment
creedon Posted September 12, 2021 Share Posted September 12, 2021 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. adrianrydz 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
adrianrydz Posted September 15, 2021 Author Share Posted September 15, 2021 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
adrianrydz Posted September 15, 2021 Author Share Posted September 15, 2021 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. paul2009 and creedon 2 Link to comment
MandyR Posted September 27, 2021 Share Posted September 27, 2021 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
creedon Posted September 28, 2021 Share Posted September 28, 2021 @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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
MandyR Posted October 1, 2021 Share Posted October 1, 2021 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 😊 Link to comment
MandyR Posted October 1, 2021 Share Posted October 1, 2021 https://www.mandyrobbphotography.com.au/fine-art-prints Link to comment
creedon Posted October 1, 2021 Share Posted October 1, 2021 @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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
MandyR Posted October 1, 2021 Share Posted October 1, 2021 (edited) @creedon I thought the most current advice was to add to custom css? as below Edited October 1, 2021 by MandyR tag Link to comment
MandyR Posted October 1, 2021 Share Posted October 1, 2021 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
creedon Posted October 1, 2021 Share Posted October 1, 2021 (edited) @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. Edited October 2, 2021 by creedon Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
MandyR Posted October 2, 2021 Share Posted October 2, 2021 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
MandyR Posted October 2, 2021 Share Posted October 2, 2021 @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
Beyondspace Posted October 2, 2021 Share Posted October 2, 2021 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
creedon Posted October 2, 2021 Share Posted October 2, 2021 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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
MandyR Posted October 2, 2021 Share Posted October 2, 2021 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
MandyR Posted October 2, 2021 Share Posted October 2, 2021 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
MandyR Posted October 2, 2021 Share Posted October 2, 2021 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 😕 Link to comment
iamdavehart Posted October 2, 2021 Share Posted October 2, 2021 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. Dave Hart. Software/Technology Consultant living in London. buymeacoffee Link to comment
creedon Posted October 2, 2021 Share Posted October 2, 2021 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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
MandyR Posted October 3, 2021 Share Posted October 3, 2021 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 🙂 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment