strapi-plugin-responsive-image

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-responsive-image
npm run build

Using yarn

yarn add strapi-plugin-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-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-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

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