categories as filters within menu

[arminunruh]

yes its better to use a thumbnailgrid, because it always displays all thumbnails of the chosen category

[cschm.tz]

yes sorry what I am asking is why are the 'Film' projects and 'Experience' projects leaving gaps between each other (2 thumbnails) and in different rows?

It seems like with thumbnail grids I can only select one category or the other and therefore don't understand how to have ALL projects smoothly visible at once?

Do you mind explaining what I am doing wrong?
Thanks!

https://www.j-i.live/projects-copy/

[cschm.tz]

Hi @arminunruh @mariusjopen sorry to chase with this, is the above at all possible to solve?

[arminunruh]

hey you can create a new category called "All" and apply this category to all of your projects:

[arminunruh]

then choose this category as the one you want shown on your thumbnailgrid

[cschm.tz]

legend thank you!!

for the thumbnails within, does the client need to reformat everything so that they are all unified in dimensions or can that be done within laytheme at all?

so that these gaps are avoided?

[arminunruh]

your videos/thumbnails need to have the same aspect ratios

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

this css will just cut off bigger videos / thumbnails

maybe its better if you change the videos to all have the desired aspect ratio idk

[cschm.tz]

thanks armin! im afraid the above didn't do anything to the thumbnails? i would love to have control over the aspect ratio however that is the director's decision from video to video and would need a system that can integrate these variations in the long run

[cschm.tz]

for the time being, i have applied this instead. kind of works but it seems like it only crops from the bottom so this may pose issues with centered content?

.ph {
padding-bottom: 55% !important;
}

.ph img {
object-fit: cover;
}

[arminunruh]

.ph > *{
top: 50%!important;
transform: translateY(-50%)!important;
}

this will center it vertically

[arminunruh]

to change the paddings on a per video basis, you need to add a html class to an element.

https://laytheme.com/documentation/custom-css-styling.html#create-button-style

here i show how to target a specific element.

but thumbnails inside a elementgrid or project thumbnail grid cant have different custom html classes. only the "elementgrid"/"project thumbnail grid" element itself can.

so you might want to add each thumbnail using +project thumbnail

maybe its easier if you just crop the videos using a video editing tool like handbrake