Setup

Demo site

Automatic image handling by Gridsome is great, but sometimes we need a bit more. For example: having them uploaded to and optimized by Cloudinary when querying them from Gridsome's data layer.

The workflow stays the same: add images to your side, have @gridsome/source-filesystem read them, and then query them to use in your components.

Image transformer tool give you that freedom out of the box, by folloing the below steps:

Installation

  1. Add @gridsome/source-filesystem to handling your local files.

    yarn add @gridsome/source-filesystem
    
    #OR
    npm i @gridsome/source-filesystem
  2. Add gridsome-transformer-img dependency to your Gridsome project.

    yarn add gridsome-transformer-img
    
    #OR
    npm i gridsome-transformer-img
  3. Add @gridsome/source-filesystem as plugins to plugins section of gridsome.config.js and request for the desired images:

    /* gridsome.config.js */
    
    export default {
      plugins: [
        {
          use: '@gridsome/source-filesystem',
          options: {
            path: 'path-to-local-images',
          }
        },
      ]
    }
  4. Optional - Set up your upload options and choose a loader to optimize your images in img section of transformer in gridsome.config.js.

    /* gridsome.config.js */
    
    export default {
      plugins: [
        {
          use: '@gridsome/source-filesystem',
          options: {
            path: 'path-to-local-images',
          }
        },
      ],
      transformers: {
        img: {
          uploadOptions: {
            folder: 'examples', //directory path in cloudinary where asset should be uploaded to
          },
          loader: {
            type: 'cloudinary',
            cloudName: process.env.CLOUDNAME,
            apiKey: process.env.API_KEY,
            apiSecret: process.env.API_SECRET,
          }
        }
      }
    }

See Loader for more details on the available loader services, and Options for other configuration options.

And that's it 🎉! You can start querying your images in the Data Layer.