TwicPics

Since version 2.21

Deliver perfectly sized images in real-time to create visual-rich experiences.

Installation

Add the twicpics 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/twicpics",
    "./src",
  ],
};

Add the TwicPics styling to your theme:

src/web/theme/main.scss

// If you did not override the main styling, you can import the default one
// @import "~front-commerce/src/web/theme/main";
@import "~front-commerce/theme-chocolatine/web/theme/main";

@import "~theme/twicpics";

Update your CSP to allow TwicPics to work:

src/config/website.jss

  contentSecurityPolicy: {
    directives: {
-     scriptSrc: [],
+     scriptSrc: ["https://*.twic.pics"],
      frameSrc: [],
      styleSrc: [],
-     imgSrc: [],
+     imgSrc: ["https://*.twic.pics"],
      fontSrc: [],
      connectSrc: [],
      baseUri: [],
    }
  },

Configuration

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

• domain (required): the Cloud Name of your TwicPics environment (see reference)
• paths: paths which should be proxied to TwicPics. (see reference)

src/config/images.js

module.exports = {
  twicpics: {
    domain: "https://<sub>.twic.pics",
    paths: [
      {
        source: "/media", // the source to match, (eg `/media` would match `/media/image.jpg`, or `https://my-domain.com/media` would match `https://my-domain.com/media/image.jpg`)
        path: "/my-media", // the path configured in TwicPics as a path for the source.
      },
    ],
  },
};