Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nicolashmln/strapi-plugin-responsive-image
Custom responsive image formats for https://strapi.io
https://github.com/nicolashmln/strapi-plugin-responsive-image
plugin resizing-images responsive responsive-images strapi strapijs
Last synced: about 2 months ago
JSON representation
Custom responsive image formats for https://strapi.io
- Host: GitHub
- URL: https://github.com/nicolashmln/strapi-plugin-responsive-image
- Owner: nicolashmln
- Created: 2020-06-08T06:10:09.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-19T08:36:53.000Z (5 months ago)
- Last Synced: 2024-07-05T14:01:03.174Z (3 months ago)
- Topics: plugin, resizing-images, responsive, responsive-images, strapi, strapijs
- Language: JavaScript
- Homepage:
- Size: 725 KB
- Stars: 152
- Watchers: 5
- Forks: 27
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome-strapi - Responsive image - Custom responsive image formats. (Strapi v3 / Plugin & Providers - v3)
README
# 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
```bash
npm install --save strapi-plugin-responsive-image
npm run build
```
Using yarn
```bash
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:
```bash
mkdir -p src/extensions/upload/
touch src/extensions/upload/strapi-server.js
```
Paste the code below in the file.
```javascript
const imageManipulation = require("strapi-plugin-responsive-image/server/services/image-manipulation");
module.exports = (plugin) => {
plugin.services["image-manipulation"] = imageManipulation;
return plugin;
};
```
---
For Typescript:
```bash
mkdir -p src/extensions/upload/
touch src/extensions/upload/strapi-server.ts
```
Paste the code below in the file.
```typescript
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](https://github.com/lovell/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](https://sharp.pixelplumbing.com/api-resize#parameters) |
| Position | To use when fit is cover or contain. [More info](https://sharp.pixelplumbing.com/api-resize#parameters) |
| Without enlargement | Do not enlarge if the width or height are already less than the specified dimensions. [More info](https://sharp.pixelplumbing.com/api-resize#parameters) |
## 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
[](https://ko-fi.com/E1E0H3N9M)