How to create gallery grid?

I’m wondering how can I create image gallery, placed on-grid or in particular columns. The exact example I would like to achieve is:
It’s based on: GitHub - neptunian/react-photo-gallery: React Photo Gallery

Do you have an idea of how it can be done with DatoCMS?


Hey @dawidjaniga_sandrasaluda have you tried looking into our asset gallery field? You can manage the assets with one of these fields maybe?

Yes, I tried but changing the image order doesn’t work. And I didn’t know how to set specific images in columns.

ok then, if you need something more complex you might want to use a modular content field in which you define a modular block which has an image (and maybe additional info such as column, if you want to) and then you can create as many blocks as you want and reorder them.

If you collapse all the blocks you can drag and drop them too!

Thanks Mat, I considered a similar solution, but it sounds to be a tough task to add 10s of photos in one post.
Do you think the DatoCMS plugin SDK is enough to implement the above react-photo-gallery as plugin?

yes, also a plugin would do! We’ve recently added SDK capabilities to interact with the media area, so it should be feasible!

Am I guessing right that the order of the images can be set by this method?

yes, you need to define your data structure as you like and then with the plugin you can set the value of the field as you like for the frontend to use it, OK?

Got you. Thanks, Mat :+1:t2:

As a feature request, would it be possible to add drag-and-drop reordering to the Asset Gallery field type? It looks like it’s supposed to be able to do that (the cursor changes to the drag icon) but you can’t actually reorder them.

Don’t need to be able to split them into columns, etc., but just having control over the image ordering would be helpful.


hey @roger sorry for the delay here, but it’s already possible to drag and drop, like so:

is this what you were looking for?

Edit: Actually, I just realized this is only broken inside Structured Text areas. It works fine as a top-level field in the model.

@mat_jack1 No worries! Yes, that’s the hope, but it doesn’t work for me on either Safari or Chrome or Firefox on macOS :frowning:

FYI it’s only broken when nested inside Structured Text fields.

that’s true! I can reproduce, thank you. We’ll have a look and let you know

1 Like

Fixed! Thanks for reporting!

1 Like