Caryncramer Posted December 31, 2020 Share Posted December 31, 2020 Hi there, Under site styles > Products: Gallery > Aspect ratio, I want all of my images to have a 1:1 ratio except for one collection, I want to apply a different aspect ratio (4:3). Can anyone help me with code to have a different image aspect ratio for a collection of products? Thank you so much! Beyondspace 1 Link to comment
Beyondspace Posted January 1, 2021 Share Posted January 1, 2021 14 hours ago, Caryncramer said: Hi there, Under site styles > Products: Gallery > Aspect ratio, I want all of my images to have a 1:1 ratio except for one collection, I want to apply a different aspect ratio (4:3). Can anyone help me with code to have a different image aspect ratio for a collection of products? Thank you so much! It can be supported by inject custom code, could you show the site url? Greeting, it's 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, Lightbox Studio pluginIf 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
Caryncramer Posted January 4, 2021 Author Share Posted January 4, 2021 Yes, I definitely want custom code. I set all my product photo ratios to 1:1 but I want a specific product gallery to show product image (in the product page) as 2:3 vertical. this one is 1:1 ratio, all good: http://caryncramer.com/wood-veneers/harper-canyon-wood-veneer this one is the one I want to change to 2:3 vertical: http://caryncramer.com/fabric-by-the-yard Beyondspace 1 Link to comment
tuanphan Posted January 6, 2021 Share Posted January 6, 2021 On 1/4/2021 at 9:02 PM, Caryncramer said: Yes, I definitely want custom code. I set all my product photo ratios to 1:1 but I want a specific product gallery to show product image (in the product page) as 2:3 vertical. this one is 1:1 ratio, all good: http://caryncramer.com/wood-veneers/harper-canyon-wood-veneer this one is the one I want to change to 2:3 vertical: http://caryncramer.com/fabric-by-the-yard Add to Fabric by the yard Header <style> .tweak-product-list-image-aspect-ratio-11-square .ProductList-outerImageWrapper { padding-bottom: 150% !important; } </style> Caryncramer 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Caryncramer Posted January 6, 2021 Author Share Posted January 6, 2021 Oh thanks! Actually this code works for the landing page for the products but i would like the photo ratio for each product page to be a different ratio than other product pages. Hopefully that make sense! Link to comment
tuanphan Posted January 7, 2021 Share Posted January 7, 2021 16 hours ago, Caryncramer said: Oh thanks! Actually this code works for the landing page for the products but i would like the photo ratio for each product page to be a different ratio than other product pages. Hopefully that make sense! Add this new code to Fabric Page Header <style> .tweak-product-item-gallery-aspect-ratio-11-square .ProductItem-gallery-slides:before { padding-bottom: 150% !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AtheFU Posted January 7, 2021 Share Posted January 7, 2021 Hi, this thread is the closest related to a similar problem. I'm trying to implement a product page within the flatiron template. In the sample page (https://oriole-dragonfly-5khf.squarespace.com/prints/) the product images are rectangular. However, mine are alway 1:1 and I just can't figure out how to get rid of the 1:1 ratio. Any idea? Thanks! Armin Link to comment
Caryncramer Posted January 8, 2021 Author Share Posted January 8, 2021 (edited) On 1/7/2021 at 2:51 AM, tuanphan said: Add this new code to Fabric Page Header <style> .tweak-product-item-gallery-aspect-ratio-11-square .ProductItem-gallery-slides:before { padding-bottom: 150% !important; } </style> Just wanted to follow up for anyone else with the issue - this code worked but the aspect ratio was closer to 2:3 vertical. I changed the percentage to 130% and it is 3:4 vertical aspect ratio now (added the motivated code below). Thanks! <style> .tweak-product-item-gallery-aspect-ratio-11-square .ProductItem-gallery-slides:before { padding-bottom: 130% !important; } </style> Edited January 8, 2021 by Caryncramer Link to comment
Caryncramer Posted January 8, 2021 Author Share Posted January 8, 2021 23 hours ago, AtheFU said: Hi, this thread is the closest related to a similar problem. I'm trying to implement a product page within the flatiron template. In the sample page (https://oriole-dragonfly-5khf.squarespace.com/prints/) the product images are rectangular. However, mine are alway 1:1 and I just can't figure out how to get rid of the 1:1 ratio. Any idea? Thanks! Armin Hi Armin, If you go to your product page, then in the left navigation, go to Design > Site Styles > click on the product picture > under Products Gallery > Aspect Ratio. You can change the aspect ratio on all the products here. Link to comment
Mao325 Posted February 9, 2021 Share Posted February 9, 2021 I am stuck with the same situation. I would like to keep 3:4 (vertical) for fashion page, and 16:9 Widescreen for Moving image and music. If you could help me, it's much appreciated x Thank you so much! Website: https://www.maomiyakoshi.com/ Password: maomiyakoshi Fashion page ( 3:4 (vertical) ) https://www.maomiyakoshi.com/fashion Moving images ( 16:9 Widescreen ) https://www.maomiyakoshi.com/moving-images Music ( 16:9 Widescreen ) https://www.maomiyakoshi.com/music Link to comment
tuanphan Posted February 14, 2021 Share Posted February 14, 2021 On 2/10/2021 at 4:43 AM, Mao325 said: I am stuck with the same situation. I would like to keep 3:4 (vertical) for fashion page, and 16:9 Widescreen for Moving image and music. If you could help me, it's much appreciated x Thank you so much! Website: https://www.maomiyakoshi.com/ Password: maomiyakoshi Fashion page ( 3:4 (vertical) )https://www.maomiyakoshi.com/fashion Moving images ( 16:9 Widescreen )https://www.maomiyakoshi.com/moving-images Music ( 16:9 Widescreen )https://www.maomiyakoshi.com/music You can set 3:4 in Setting, then let me know. We can give a code to set 16:9 in Moving Images page Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Mao325 Posted February 15, 2021 Share Posted February 15, 2021 On 2/14/2021 at 1:28 AM, tuanphan said: You can set 3:4 in Setting, then let me know. We can give a code to set 16:9 in Moving Images page Hi tuanpuan, Thanks for the reply. I set up 3:4 in the setting! Link to comment
tuanphan Posted February 18, 2021 Share Posted February 18, 2021 On 2/16/2021 at 2:20 AM, Mao325 said: Hi tuanpuan, Thanks for the reply. I set up 3:4 in the setting! Can you share link to page where you want 16:9? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Mao325 Posted March 7, 2021 Share Posted March 7, 2021 https://www.maomiyakoshi.com/moving-images Link to comment
tuanphan Posted March 15, 2021 Share Posted March 15, 2021 On 3/7/2021 at 9:13 PM, Mao325 said: https://www.maomiyakoshi.com/moving-images Add to Design > custom CSS /* Moving images */ body#collection-6019fbe30a45375312e8f5ff { a.grid-item, .grid-image { padding-bottom: 56.25% !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
zyber Posted January 27, 2022 Share Posted January 27, 2022 On 3/15/2021 at 4:54 AM, tuanphan said: Add to Design > custom CSS /* Moving images */ body#collection-6019fbe30a45375312e8f5ff { a.grid-item, .grid-image { padding-bottom: 56.25% !important; } } Having same issue, I have a product called "honda SI FD2" that I would like to change it to a vertical aspect ratio. anzianimedia.com Link to comment
tuanphan Posted January 28, 2022 Share Posted January 28, 2022 On 1/27/2022 at 12:10 PM, zyber said: Having same issue, I have a product called "honda SI FD2" that I would like to change it to a vertical aspect ratio. anzianimedia.com Add this CSS div#thumb-5lhqu34eumzf9d9u65uabe3jx3bvjl .grid-image-wrapper img { object-fit: contain !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
nandocosta Posted June 7, 2022 Share Posted June 7, 2022 Hello. This is my first time adding custom CSS inside of Squarespace, so I am not fully familiar with it. If I have the Custom CSS panel open and I navigate to a particular page, am I changing the CSS of that particular page? Sorry for the newbie question. The issue I am dealing with is regarding certain gallery modules on a page needing to be in a specific aspect ratio such as these here on this page which need to be 9:16, but are getting cropped. https://www.nandocosta.com/experiments/a-civilizations-ending I would love to allow some galleries to be different than others on the same page since I may need to combine 2:1 (non standard) and 1:1 (standard) for instance. Any help would be appreciated. Thanks! Link to comment
tuanphan Posted June 11, 2022 Share Posted June 11, 2022 On 6/8/2022 at 12:56 AM, nandocosta said: Hello. This is my first time adding custom CSS inside of Squarespace, so I am not fully familiar with it. If I have the Custom CSS panel open and I navigate to a particular page, am I changing the CSS of that particular page? Sorry for the newbie question. The issue I am dealing with is regarding certain gallery modules on a page needing to be in a specific aspect ratio such as these here on this page which need to be 9:16, but are getting cropped. https://www.nandocosta.com/experiments/a-civilizations-ending I would love to allow some galleries to be different than others on the same page since I may need to combine 2:1 (non standard) and 1:1 (standard) for instance. Any help would be appreciated. Thanks! Access Home > Pages > Hover A Civilizations Ending in Main Navigation or Not Linked > Click Gear icon > Advanced > Paste this code to right box <style> .gallery-grid-item-wrapper { padding-bottom: 56.25% !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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