Strapi plugin logo for Responsive image

Responsive image

Custom responsive image formats

Strapi plugin responsive-image

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

Screenshoot settings

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.

1
2
3
4
5
6
7
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.

1
2
3
4
5
6
7
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.

InputDescription
QualityQuality, integer 1-100
ProgressiveUse progressive (interlace) scan

Format options

InputDescription
NameRequired Name of the format. The file generated will look like name_file_uploaded_hash.jpeg
Generate x2 versionIf ON it generates a format name_x2 with a width and a height twice bigger
Output formatThe output format of your images: Same as source, JPEG, PNG, WebP or AVIF
WidthRequired Width of the image
HeightHeight of the image
FitHow the image should be resized to fit both provided dimensions. More info
PositionTo use when fit is cover or contain. More info
Without enlargementDo 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

ko-fi

Install now

npm install strapi-plugin-responsive-image

STATS

160 GitHub stars650 weekly downloads

Last updated

312 days ago

Strapi Version

>=4.0.0 <5.0.0-0

Author

github profile image for Nicolas Hamelin
Nicolas Hamelin

Useful links

Create your own plugin

Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.