i wan't to build a picture gallery grid with auto resize
Hello,
i'm building a picture gallery to show my wedding pictures to my family with some access restriktions. I'm using the grid format, but i'm not finding a solution that the grid is ajusted to the picture, so when i have a portrait format that there is no whitespace left or right, but maybe instead of 3 grids, there are 4. like two landscape grids and 2 portrait grids.
i'm using filament's spatiemedialibrary plugin and nothing other until now.
is this possible with filament ?
Best regards,
Fred
13 Replies
I think the only way you’d be able to achieve what you want is with custom css.
So own Blade Components ?
no, if you're using panels you can create a custom theme then just add whatever css you need to it to make the grid display as you need it. https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme
ah yeah, that is what i wanted to try, but i tought that it is not possbile, because i need to customize the grid cards in size and costumize the ->contentGrid which has fixed presets. I will have a look at it if i can change both. Thanks!
It can certainly be done with css. Look into bento style girds. But in all honestly, I think it’s actually fine the way it is. 😁
Yeah it would be okay Like it is, but i like trying out different styles 🙂
Go for it. Not trying to stop you. But yea, it could be done with CSS. But your going to have to target the filpond classes probably more so than the filament ones.
Not saying it won’t be complicated but I think it could be done with the right css. It’s actually kinda the point of css.
Sounds like you want some kind of masonry? If you only want that for showing, I'd go for a custom component or page and add some JS
yeah, showing the images, clicking trough it and download it if wanted.
Yeah, I'd rather build a custom page or even something outside of Filament if you can.
Are you building this to learn? I think there should be some solutions out there for image sharing.
I usually just dropped everything in Dropbox (or the cloud provider of your choice)
Yes, I‘m a Junior and would look how far I can get. But a costum Page would be a possibikity too.
My first tough was why Not Filament. The pictures and Movies are saved as model, so i could Build it with filament and restrict Access with it. I know that there is a possibility to use a Grid instead of a table, so my idea was that I‘m building a Image Gallery in Filament 😅
I mean it works Like on my picture, but I would love to have the cards when the picture is 9:16 without that whitespace at left and right. And maybe have 2 9:16 Images on a Card Size from 16:9 so that it is automaticly choosed how many cards are possible in a row.
Check out masonry: https://masonry.desandro.com/
Masonry
Cascading grid layout library
oh nice, thank you i will have a look at it, then that would be my option to go instead of filament 🙂