Cloudinary

Since version 2.20

Streamline media management and improve user experience by automatically delivering images enhanced and optimized for every user.

Installation

Add the cloudinary module to your config file:

.front-commerce.js

module.exports = {
  name: "Front Commerce",
  modules: [
    "./node_modules/front-commerce/theme-chocolatine",
    "./node_modules/front-commerce/modules/cloudinary",
    "./src",
  ],
};

Configuration

In order to use Cloudinary, you need to extend your src/config/images.js config.

• cloudName (required): the Cloud Name of your Cloudinary environment. (can be found in your Cloudinary console).
• autoUploadMapping: To attach an upload-preset to a mapped folder.
• transformations: transformations which should be applied to the images.

src/config/images.js

// Full configuration
module.exports = {
  cloudinary: {
    cloudName: "my-cloud-name",
    autoUploadMapping: [
      {
        prefix: "/media",
        folder: "my-media-folder",
      },
    ],
    transformations: {
      quality: "auto",
      gravity: "auto",
    },
  },
};

Update your CSP to allow Cloudinary to work:

src/config/website.jss

  contentSecurityPolicy: {
    directives: {
      scriptSrc: [],
      frameSrc: [],
      styleSrc: [],
-     imgSrc: [],
+     imgSrc: ["https://res.cloudinary.com"],
      fontSrc: [],
      connectSrc: [],
      baseUri: [],
    }
  },

Auto Upload Mapping

You can automatically upload images to Cloudinary by mapping a folder to matching path.

src/config/images.js

module.exports = {
  cloudinary: {
    cloudName: "my-cloud-name",
    autoUploadMapping: [
      {
        prefix: "/media", // the public URL's to match in Front-Commerce, for example /media would match `/media/image.jpg`
        folder: "my-media-folder", // Cloudinary's folder name to upload remote images to
      },
    ],
  },
};

In cloudinary this can be configured by following this guide:

Transformations

We currently support the following transformations:

• quality: The quality of the image to be delivered. defaults to auto (see docs)
• gravity: The part of the image to focus on. defaults to auto (see docs)

Do not hesitate to contact us if you need more transformations.

Preset Transformations

You can also apply different transformations based on the preset, for example:

src/config/images.js

module.exports = {
  presets: {
    large: {
      width: 100,
      height: 100,
      cloudinary: {
        transformations: {
          quality: "high",
        },
      },
    },
  },
  cloudinary: {
    cloudName: "my-cloud-name",
    transformations: {
      quality: "auto",
      gravity: "auto",
    },
  },
};