Square "containers" for gridder

[yelmarb]

Hey @arminunruh , my love for laytheme runs deep as you know but I've been frustrated with the gridder because of the way it snaps to the taller thumbnail of whatever image is in the column. This makes a big portrait thumbanil and a small landscape thumbnail. See here:

If you try to make both portrait and landscape thumbnails roughly the same size, the landscape images will span 2 columns and the page loses its uniformity:

What I would like for the thumbnail grid, is for both landscape and portrait images to stay within the same column as well as be the same approximate same size, just like this:

The only way to do this is buy having a square "container" within a column and for the image to be centered both vertical and horizontal within the square.

Is this something I could do with CSS? Or could it be something that you could implement for Laytheme users?

[yelmarb]

Hey @arminunruh , would be amazing to make this happen as the gridder doesn’t play nicely with combined horizontal and vertical images. Could you please look into this?

[arminunruh]

sure no problem!

this is what i came up with for elementgrid:

.type-elementgrid .ph{
    padding-bottom: 100%!important;
    background-color: transparent!important;
}
.type-elementgrid img, .type-elementgrid video{
    object-fit: contain;
    height: 100%!important;
    width: 100%!important;
}

if you want to use this css for thumbnailgrid, you can use:

.type-thumbnailgrid .ph{
    padding-bottom: 100%!important;
    background-color: transparent!important;
}
.type-thumbnailgrid img, .type-thumbnailgrid video{
    object-fit: contain;
    height: 100%!important;
    width: 100%!important;
}

for thumbnailgrid and elementgrid use layout type "middle aligned". i think "top aligned" may also work

[yelmarb]

That's amazing! Thank you so much Armin!! Just one thing, is there a way to use this code in the regular gridder (instead of using it with elementgrid or thumbnailgrid)?

BTW, you should have a tip jar, buy me a coffee or a Patreon option link. This stuff is gold!

[arminunruh]

thx!!

if you wanted to do that in the gridder, you could probably set your column count really high and then have more fine grained control over the widths of your elements and the spaces between them

for just regular image elements use:

.col.type-img .ph{
    padding-bottom: 100%!important;
    background-color: transparent!important;
}
.type-img img{
    object-fit: contain;
    height: 100%!important;
    width: 100%!important;
}

before:

after:

[yelmarb]

Thank you so much Armin! That works perfectly!!!

[yelmarb]

Hey Armin, the code obviously changes every single category and project gallery, which is not ideal.

Is there a way to add an HTML class and ID to categories so I can isolate where the "object-fit" code targets?

[arminunruh]

sure.

just write

.slug-hello

before every css statement.

where the slug "hello" is the slug of the page/catregory/project you want to apply this to.
please read this:
https://laytheme.com/documentation/custom-css-styling.html#css-based-on-current-page

above link also shows you can target pages by their id too

so:

.slug-hello .col.type-img .ph{
    padding-bottom: 100%!important;
    background-color: transparent!important;
}
.slug-hello .type-img img{
    object-fit: contain;
    height: 100%!important;
    width: 100%!important;
}

and

.slug-hello .type-elementgrid .ph{
    padding-bottom: 100%!important;
    background-color: transparent!important;
}
.slug-hello .type-elementgrid img,
.slug-hello .type-elementgrid video{
    object-fit: contain;
    height: 100%!important;
    width: 100%!important;
}

and

.slug-hello .type-thumbnailgrid .ph{
    padding-bottom: 100%!important;
    background-color: transparent!important;
}
.slug-hello .type-thumbnailgrid img,
.slug-hello .type-thumbnailgrid video{
    object-fit: contain;
    height: 100%!important;
    width: 100%!important;
}

[yelmarb]

Thank you again Armin, that works perfectly and is just what I was after.