Resizing Gallery Images from Square to 16:

This support ticket is created 2 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	10:00 – 13:00	10:00 – 13:00	10:00 – 13:00	10:00 – 13:00	10:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 5 replies, has 2 voices.

Last updated by PaigeH5854 2 years, 5 months ago.

Assisted by: Minesh.

Author

Posts

June 1, 2022 at 7:57 pm #2375759

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.

June 2, 2022 at 7:41 am #2376123

Minesh

Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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?

June 2, 2022 at 10:21 pm #2376659

PaigeH5854

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

June 6, 2022 at 5:34 am #2378619

Minesh

Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

June 7, 2022 at 12:03 am #2379143

PaigeH5854

Thank you, this was perfect! Best Regards!

June 7, 2022 at 12:03 am #2379145

PaigeH5854

My issue is resolved now. Thank you!