[Resolved] Resizing Gallery Images from Square to 16:

[Author]

Posts

[PaigeH5854]

Hi There,

We're using an Image Gallery to display photos. It seems that the default size for the images output by the image gallery is a square, maybe a 4:3 ratio. I need to change the output to a 16:9 ratio, more rectangular. Can you advise how this can be done? See an attached example.

Thank you.

[Minesh]

Hello. Thank you for contacting the Toolset support.

For that layout, you'll have to adjust the height of the cell using custom CSS.

Can you please share problem URL where you want to display the resized layout?

[PaigeH5854]

Here is an example page. The gallery is about halfway down the page. Thank you.
hidden link

[Minesh]

Could you please try to add the following CSS code to your view's CSS box:

.tb-gallery .tb-gallery--grid .tb-gallery__cell .tb-brick__content > a > img {
    object-fit: contain;
}

.tb-gallery .tb-gallery--grid .tb-gallery__cell,
.tb-gallery .tb-gallery--grid .tb-gallery__cell .tb-brick__content {
    height: auto;
}

.tb-gallery .tb-gallery--grid .tb-gallery__cell::before {
    padding-bottom: 50% !important;
}

I hope the above CSS code will help you to resolve your issue.

[PaigeH5854]

Thank you, this was perfect! Best Regards!

[PaigeH5854]

My issue is resolved now. Thank you!