NEW RELEASE:

Centralized data layer for multiple content sources or frameworks. Dive deep into Valhalla

ContactSign Up for Free
Community Plugin
View plugin on GitHub

Coverage Status NPM GitHub code size in bytes npm (scoped)

@mako-tos/gatsby-images-microcms

images plugin for Gatsby from microCMS.

Install

# with yarn
$ yarn add @mako-tos/gatsby-images-microcms
# with npm
$ npm install @mako-tos/gatsby-images-microcms

How to use

gatsby-config.js

This npm module is installed with gatsby-source-microcms

You need setting options in gatsby-config.js.

const path = require(`path`);

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-microcms',
      options: {
        apiKey: process.env.MICRO_CMS_API_KEY,
        serviceId: process.env.MICRO_CMS_SERVICE_ID,
        endpoint: 'blog',
      },
    },
    {
      resolve: '@mako-tos/gatsby-images-microcms',
      options: [{
        mediaType: 'microcmsBlog', // string
        field: 'hero', // string
      }],
    },
  ],
};

gatsby-node.js

You can query like the following. Gatsby create Pages based on microCMS contents.

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  /**
   * you can pass following parameters
   * fixedHeight: set if image height fix
   * quality: set image quality
   *          default value is 50
   */
  const result = await graphql(
    `
      {
        allMicrocmsPost(sort: { fields: [createdAt], order: DESC }) {
          edges {
            node {
              id
              createdAt
              hero {
                url
              }
              fluid(fixedHeight: 400, quality: 70) {
                aspectRatio
                src
                srcSet
                srcSetType
                srcWebp
                srcSetWebp
                sizes
              }
            }
          }
        }
      }
    `
  );

  if (result.errors) {
    throw result.errors;
  }

  result.data.allMicrocmsPost.edges.forEach((edge, index) => {
    const post = edge.node
    createPage({
      path: post.id,
      component: path.resolve('./src/templates/blog-post.js'),
      context: {
        slug: post.id,
        heroFluid: post.fluid
      },
    });
  });
};

Options

module.exports = {
  plugins: [
    {
      resolve: '@mako-tos/gatsby-images-microcms',
      options: {
        /**
         * Target GraphQL Table Name (Required)
         *
         * Type: string.
         * default: undefined,
         **/
        mediaType: 'MicrocmsBlog',

        /**
         * Table's html field Name (Required)
         *
         * Type: string.
         * default: undefined,
         **/
        field: 'body',
      },
    },
  ],
};
© 2022 Gatsby, Inc.