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
The Gallery Thumbnails
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 2Caption
We will use a Text field for this.
2 of 2The 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:
"image_gallery": { "type": "Slice", "fieldset": "Image Gallery", "description": "An image gallery section", "icon": "apps", "non-repeat": {}, "repeat": { "alt_text": { "type": "StructuredText", "config": { "single": "paragraph", "label": "Alt Text", "placeholder": "Image alt text..." } }, "caption": { "type": "StructuredText", "config": { "single": "paragraph, strong, em", "label": "Caption", "placeholder": "Image caption..." } }, "image": { "type": "Image", "config": { "constraint": {}, "thumbnails": [ { "name": "thumbnail", "width": 200, "height": 200 } ], "label": "Image" } } }, "display": "grid" }
See More
What editors will see
When an editor creates a document using the Image Gallery slice created above, they can fill the placeholders with content.