Strapi plugin responsive-image

Custom responsive image formats for https://strapi.io v4 (For strapi v3 use v0.5.0)

How it works

• Go to the settings and choose the Responsive image menu
• Add/edit the formats
• Upload a new media and it will have the new formats automatically generated

Installation

Using npm

npm install --save strapi-plugin-watermark-responsive-image
npm run build

Using yarn

yarn add strapi-plugin-watermark-responsive-image
yarn build

Setup

We need to override the image manipulation of the upload plugin and use the one from this plugin. So we need to add a strapi-server.js file within the src/extensions/upload/strapi-server.js folder.

e.g For Javascript:

mkdir -p src/extensions/upload/
touch src/extensions/upload/strapi-server.js

Paste the code below in the file.

const imageManipulation = require("strapi-plugin-watermark-responsive-image/server/services/image-manipulation");

module.exports = (plugin) => {
  plugin.services["image-manipulation"] = imageManipulation;

  return plugin;
};

For Typescript:

mkdir -p src/extensions/upload/
touch src/extensions/upload/strapi-server.ts

Paste the code below in the file.

const imageManipulation = require("strapi-plugin-watermark-responsive-image/server/services/image-manipulation");

export default (plugin) => {
  plugin.services["image-manipulation"] = imageManipulation();

  return plugin;
};

Now when you'll upload a file you'll have the formats of the settings page.

Global options

The plugin uses sharp to resize the image.

| Input | Description | |-------------|---------------------------------------------------------| | Quality | Quality, integer 1-100 | | Progressive | Use progressive (interlace) scan | | Watermark | Watermark text | | Watermark position| Position on image | | Watermark color (rgba)| Color with transparency, for example rgba(0, 0, 0, 0.5) |

Important note: to skip the watermark for the particular format, name it with the prefix no-watermark or NoWatermark or noWatermark (e.g. no-watermark small)

Format options

| Input | Description | | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | Name | Required Name of the format. The file generated will look like name_file_uploaded_hash.jpeg | | Generate x2 version | If ON it generates a format name_x2 with a width and a height twice bigger | | Output format | The output format of your images: Same as source, JPEG, PNG, WebP or AVIF | | Width | Required Width of the image | | Height | Height of the image | | Fit | How the image should be resized to fit both provided dimensions. More info | | Position | To use when fit is cover or contain. More info | | Without enlargement | Do not enlarge if the width or height are already less than the specified dimensions. More info |

TODO

• Better UI/UX, maybe like the settings of the webhooks
• Add re-generate button to re-generate all the formats if we change the settings