Need code for changing product gallery to have different aspect ratio for product images

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!

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?

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

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>

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!

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>

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

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>

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.

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

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

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!

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?

https://www.maomiyakoshi.com/moving-images

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;
}
}

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

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;
}

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!

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>