Filepond: Display images previews in a grid

[pryley]

It would really be nice if Filepond allowed you out-of-the-box to display image previews in a grid (left-to-right, flex) instead of top to bottom.

[rikschennink]

@pryley fully agree! I have some ideas about this, but at the moment it's quite the undertaking, when I'm done with the Image Editor plugin I'm moving on to these kinds of improvements.

[mloukili]

Great work, unfortunately we couldn't use it due to the top-down layout.

[cheukman-octopus]

I would also be interested in using left to right layout as well, kinda took a peek in the logic. If possible I would love to have some guidance on how to start this if possible.

AS far as I'm aware, the positions are all calculated and used CSS transform to adjust positioning.

[rikschennink]

@cheukman-octopus Please make this request into a new issue (if it's about direction:rtl that is).

[cheukman-octopus]

@rikschennink
Apologize for the confusion, I meant I would be interested in the Grid layout too (top left being the first item, the new item will be on the right of that, new row when the current row is filled). Wouldn't mind contributing to this if I can have some pointers of where I can start calculating the position and container size etc

[osnielcainzos]

very nice work, any update on this feature ?

[rikschennink]

Thanks @osnielcainzos! I regularly tweet updates, latest update:
https://twitter.com/rikschennink/status/1088457575845191681

I hope to pick it up again later this week.

[rikschennink]

Just published version 4.0.0, which includes grid layout

Please let me know if it works as intended.

[pryley]

Looks great so far. Thanks!

[ThamrinPH]

Just published version 4.0.0, which includes grid layout

i already added this but
.filepond--item { width: calc(50% - .5em); }
this is the result, am i missing something?

[rikschennink]

I need more information. Please review issue template => https://github.com/pqina/filepond/blob/master/.github/ISSUE_TEMPLATE.md

[aavram]

was the issue found to ThamrinPH's question? I have the same problem

[rikschennink]

@aavram please share a public demo, happy to take a look.

[aavram]

i actually figured it out; i just had to comment the previous css that was in the filepond.css file except for absolute positioning

[rikschennink]

@aavram fantastic! :-)