Custom responsive image formats
Custom responsive image formats for https://strapi.io v4 (For strapi v3 use v0.5.0)
Using npm
npm install --save strapi-plugin-responsive-image
npm run build
Using yarn
yarn add strapi-plugin-responsive-image
yarn build
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.
The plugin uses sharp to resize the image.
Input | Description |
---|---|
Quality | Quality, integer 1-100 |
Progressive | Use progressive (interlace) scan |
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 |
npm install strapi-plugin-responsive-image
Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.