feat(plugin-image-gallery): Image Grid (PE-53, PE-54)

[shn-srl]

Linear Issues:

• PE-54
• PE-53

Demo Links:

• Editor Preview
• Create Article

To do:

• Bug: Uploading more than two images makes the plugin break
• Loading state for image upload
• Single image upload

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
frontend	✅ Ready (Inspect)	Visit Preview	Aug 28, 2024 0:55am

[elbotho]

Thanks for the demo Links, really helpful here. Some initial feedback:

Lightbox

• tall images are clipping for me
• when opening an image it's not selected and no toolbar is visible (only after click)
• will there be a lightbox for the static view at some point?

---

Bundle size

The bundle size increase comes from the gallery plugin I guess? I think especially for the static view this is a lot of js just for the layout. I'm aware that there will be sorting later and that can be tricky to implement.

Personally I'd love a simple css based solution for the grid and then using some library or code based on react-dnd only inside the editing view for sorting. (e.g. like react-easy-sort might be worth a look). But I can also not say with confidence how much work this way would actually be.

At least we should load the component dynamically.

[shn-srl]

Personally I'd love a simple css based solution for the grid and then using some library or code based on react-dnd only inside the editing view for sorting. (e.g. like react-easy-sort might be worth a look). But I can also not say with confidence how much work this way would actually be.

At least we should load the component dynamically.

I have a branch with the sorting functionality done with react-dnd. Can look at a css only solution for the grid

Lightbox

* will there be a lightbox for the static view at some point?

This is in another issue: https://linear.app/serlo/issue/PE-57/lightbox-desktop