How to Model an Image Gallery

Before reading

This article assumes that you have already setup a content model with a dynamic zone for your blog page. If you have not done so, it is recommended that you take a look at the blog example or something similar to see how to break down your content into a dynamic zone.

Sample design

For the purpose of this article we're going to use this blog post mockup.

When you click on any of the images in the gallery, the image will pop-up with a corresponding caption.

The content model

Each image will require a 200px by 200px image thumbnail for the gallery. For this we will add an image thumbnail view to our Image field.

The Large Image Pop-up

Explore this interactive model to see the different fields we need for this large image pop-up.

Main Image

We will use an Image field for the image and a Text field for the alt text.

1 of 2
< PreviousNext >

Caption

We will use a Text field for this.

2 of 2
< PreviousNext >

The content model elements

With the given model we will need the following elements for each image:

  • An Image which includes a 200px by 200px thumbnail view
  • Alt text
  • A text caption

The fields

Choosing the fields for this model is rather straightforward:

  • Image field which includes a 200px by 200px thumbnail view.
  • Text field for the alt text
  • Text field for the caption

How to set it up in Prismic

  • Add a new Slice for the Image Gallery
  • Add the fields defined above

If you want to try this slice model in Prismic, copy this JSON instead of setting up the slice manually:

CopyExpand/Collapse

What editors will see

When an editor creates a document using the Image Gallery slice created above, they can fill the placeholders with content.

How to model content for your project Sarah will be glad to help you come up with a solid content model for your project. (It’s free.) Attend one of her upcoming live Crash Course