Thumbnail Image aspect Ratio

[ml]

Hi there,

Having done multiple websites with Laytheme, a thing I always stumble upon is that the thumbail grid is not automatically cropping images to a certain aspect ration.
That means, if you want to have a clean thumbnail grid, you need to upload for each image an extra cropped thumbnail version.
Would be pretty dope if you could set an aspect ration for thumbnails in the settings!

Thank and have great day,
Marius

[mariusjopen]

Dear @ml
This is a great idea and we will write it down for the future. Right now this is not possible.
Thank you!
Marius

[Remco van Dun]

Would love this, very useful :)

[spontans]

would be very helpful and freeing of cropping the images manually

[arminunruh]

Enter this css in "lay options" -> "custom css & html" -> "custom css":

.thumb-collection .ph{
padding-bottom: 100%!important;
}

.thumb-collection .ph img,
.thumb-collection .ph video{
width: 100%!important;
height: 100%!important;
object-fit: cover!important;
object-position: center!important;
}

this way you will have a thumbnailgrid of just squares.
change the padding-bottom to change the aspect ratio.

to have a 16/9 aspect, you would calculate:

9 / 16 * 100 = 56,25

would be:
padding-bottom: 56,25%!important;

and u may want to read this
https://developer.mozilla.org/en-US/docs/Web/CSS/object-position

about the object position css

[spontans]

Thanks Armin,
Worked like a charm, would be very useful if there would a way in the future to control it via the Thumb\Element grid visual interface...

I've also implemented it for Element Grid:

.elements-collection-region .ph{
padding-bottom: 100%!important;
}

.elements-collection-region .element-wrap img,
.elements-collection-region .element-wrap video{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}