Filament•3mo ago

Spatie MediaLibrary images columns

can I somehow manage the number of columns the images in the MediaLibrary plugin take? Now the images that the full row, but I would like, for example, 3 images per row. Can i manage that with PHP or do I need to use CSS? Thanks

7 Replies

KeikaOP•3mo ago

nobody?

Shaung Bhone•3mo ago

sth like that https://spatie.be/docs/laravel-medialibrary/v11/advanced-usage/using-a-custom-directory-structure

Using a custom directory structure | laravel-medialibrary

laravel-medialibrary

ChesterS•3mo ago

If you're talking about the upload field - you can do that with CSS afaik

KeikaOP•3mo ago

not that. The actual visual of the drag/drop. As a base, we only have 1 image per row. I would like 3 for example thought so too. I did go through the docs and code, but couldn't find anything

dissto•3mo ago

Do you mean displaying files in a grid ?

KeikaOP•3mo ago

yes I do thanks for that

Shani Jahania•3mo ago

Hi @Keika I am using below css to convert images to grid style.

.upload-media-gallery .filepond--item {
    width: calc(25% - 10px);
    margin: 5px !important;
    min-height: 140px;
}

/* Mobile responsive - 2 items per row */
@media (max-width: 768px) {
    .upload-media-gallery .filepond--item {
        width: calc(50% - 10px);
        min-height: 120px;
    }
}

.upload-media-gallery .filepond--item {
    width: calc(25% - 10px);
    margin: 5px !important;
    min-height: 140px;
}

/* Mobile responsive - 2 items per row */
@media (max-width: 768px) {
    .upload-media-gallery .filepond--item {
        width: calc(50% - 10px);
        min-height: 120px;
    }
}

Gaming

Programming

Spatie MediaLibrary images columns

Did you find this page helpful?