How to embed image galleries into your articles

Here is how you can use prismic.io to embed a gallery of images into your posts, articles, or pages. You should be able to display the gallery any way you want (slider, thumbnails + lightbox, etc.).

prismic.io lets you define as many custom content types as needed to fit your websites’ design. Within a given custom type (e.g. “Article”) you can also create content sections that authors will be able to choose from, fill-in, and re-order.

Start now by creating an “article” custom type. In the custom type editor, paste this JSON:

Copy
      {
  "Article" : {
    "uid" : {
      "type" : "UID",
      "config" : {
        "placeholder" : "type a meaningful unique identifier...",
        "label" : "Unique ID"
      }
    },
    "title" : {
      "type" : "StructuredText",
      "config" : {
        "placeholder" : "Post title",
        "single" : "heading1"
      }
    },
    "body" : {
      "fieldset" : "Post content",
      "type" : "Slices",
      "config" : {
        "choices" : {
          "text" : {
            "type" : "StructuredText",
            "fieldset" : "Text",
            "config" : {
              "multi" : "paragraph, heading1, heading2, heading3, strong, em, hyperlink",
              "placeholder" : "Text..."
            }
          },
          "image-gallery" : {
            "type" : "Group",
            "fieldset" : "Image gallery",
            "config" : {
              "repeat" : true,
              "fields" : {
                "image" : {
                  "type" : "Image"
                },
                "image-caption" : {
                  "type" : "StructuredText",
                  "config" : {
                    "single" : "paragraph",
                    "placeholder" : "Image caption..."
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
    

The article content will be a freely composable zone where authors will be able to alternate and reorder text and image galleries. For this we added a "Slice" type to our custom type with two choices: Text and Gallery.

Create the content

In your content repository, write an Article and add an image gallery into its content.

Query the API

For this example, we will query the article by its UID.

Copy
      app.route('/:uid').get(function(req, res) {
  var uid = req.params.uid;
  api(req, res).then(function(api) {
    return api.getByUID("article", uid);
  }).then(function(pageContent) {
    res.render('index', {
      pageContent: pageContent
    });
  });
});
    

Integrate the content into your template

First, create one template/mixin for each of the 2 content components (Text and Gallery) you want to render.

Copy
      // using pug templates

mixin text(slice)
  != slice.value.asHtml(ctx.linkResolver)

mixin gallery(slice)
  div.gallery
    each galleryImage in slice.value.toArray()
      img(src=galleryImage.getImage("image").url)
      != galleryImage.getStructuredText('image-caption').asHtml(ctx.linkResolver)

    

Now you can create a page using the 2 defined templates:

Copy
      // using pug templates

block body
  div.main
    div#page-content
      != pageContent.getStructuredText('article.title').asHtml(ctx.linkResolver)
      for slice in pageContent.getSliceZone('article.body').slices
        case slice.sliceType
          when 'text'
            +text(slice)
          when 'image-gallery'
            +gallery(slice)
    

Explore a working sample

The link below takes you to a sample project that displays an Article that contains text and image galleries. Feel free to check it out and explore what a working Node.js project using this strategy might look like.

Sample Project

Well done!

Now you're free to take this concept and design an image gallery any way you want. And don't forget to share your work with us, we love to see your great designs!