Dynamically resize, format and optimize images based on url modifiers.

Last update: Nov 29, 2022

Overview

Local Image Sharp

Dynamically resize, format and optimize images based on url modifiers.

✨ Features
🖐 Installation
🚚 Usage
Contributing
License

✨ Features

Convert any uploaded images with local provider using sharp modifier. No extra configuration needed, the modifiers will be applied based on the url.

This is made by ipx

🖐 Installation

Add plugin dependency

yarn add strapi-plugin-local-image-sharp

🚚 Usage

Examples

Get original image:

http://localhost:1337/uploads/buffalo.png

Change format to webp and keep other things same as source:

http://localhost:1337/uploads/f_webp/static/buffalo.png

Keep original format png and set width to 200:

http://localhost:1337/uploads/w_200/static/buffalo.png

You can combine modifiers using a coma, for example: Resize to 200x200px using embed method and change format to webp:

http://localhost:1337/uploads/embed,f_webp,s_200x200/static/buffalo.png

Modifiers

Property	Docs	Example	Comments
width / w	Docs	`http://localhost:1337/uploads/width_200/buffalo.png`
height / h	Docs	`http://localhost:1337/uploads/height_200/buffalo.png`
resize / s	Docs	`http://localhost:1337/uploads/s_200x200/buffalo.png`
fit	Docs	`http://localhost:1337/uploads/s_200x200,fit_outside/buffalo.png`	Sets `fit` option for `resize`.
position / pos	Docs	`http://localhost:1337/uploads/s_200x200,pos_top/buffalo.png`	Sets `position` option for `resize`.
trim	Docs	`http://localhost:1337/uploads/trim_100/buffalo.png`
format	Docs	`http://localhost:1337/uploads/format_webp/buffalo.png`	Supported format: `jpg`, `jpeg`, `png`, `webp`, `avif`, `gif`, `heif`
quality / q	_	`http://localhost:1337/uploads/quality_50/buffalo.png`	Accepted values: 0 to 100
rotate	Docs	`http://localhost:1337/uploads/rotate_45/buffalo.png`
enlarge	_	`http://localhost:1337/uploads/enlarge,s_2000x2000/buffalo.png`	Allow the image to be upscaled. By default the returned image will never be larger than the source in any dimension, while preserving the requested aspect ratio.
flip	Docs	`http://localhost:1337/uploads/flip/buffalo.png`
flop	Docs	`http://localhost:1337/uploads/flop/buffalo.png`
sharpen	Docs	`http://localhost:1337/uploads/sharpen_30/buffalo.png`
median	Docs	`http://localhost:1337/uploads/median_10/buffalo.png`
gamma	Docs	`http://localhost:1337/uploads/gamma_3/buffalo.png`
negate	Docs	`http://localhost:1337/uploads/negate/buffalo.png`
normalize	Docs	`http://localhost:1337/uploads/normalize/buffalo.png`
threshold	Docs	`http://localhost:1337/uploads/threshold_10/buffalo.png`
tint	Docs	`http://localhost:1337/uploads/tint_1098123/buffalo.png`
grayscale	Docs	`http://localhost:1337/uploads/grayscale/buffalo.png`
animated	-	`http://localhost:1337/uploads/animated/buffalo.gif`	Experimental

Contributing

I/We are actively looking for contributors, maintainers, and others to help shape this package. As this plugins sole purpose within the Strapi community is to be used by other developers and plugin maintainers to get fast responses time.

If interested please feel free to email the lead maintainer Sacha at: [email protected] or ping stf#3254 on Discord.

License

See the LICENSE file for licensing information.

Comments

GET parameters

Hi,

it would be great if this Plugin would also support GET parameters instead of directory names, so it would be compatible with next/image. The directory structure only doesn't seem to be supported by next's image optimization functionality.

opened by SoftCreatR 2
Prepare for Strapi 4.3.x
Allows for the new structure of the dirs object. See https://github.com/strapi/strapi/blob/v4.3.0-beta.1/packages/core/strapi/lib/utils/get-dirs.js

You'll otherwise get the following error:

IPX Error (File not found (/app/apps/cms/undefined/uploads/thumbnail_logo_white_e635fa69dc.png))
opened by joshmeads 1
breaks the video

breaks the video, please add a check for the correct format (only for images), something like this:

const allowType = ['JPEG', 'PNG', 'GIF', 'SVG', 'TIFF', 'ICO', 'DVU'];

// firstSegment this is a variable from your code if(!allowType.includes(firstSegment.split('.').pop().toUpperCase())) { await next() return }
bug good first issue

opened by jumpersib 1
1.2.1 breaks usage of path modifiers

I update to 1.2.1 and get 404 using path modifiers. e.g. http://localhost:1337/uploads/w_200/buffalo_56442f4096.png

I tried to create a new project and get same error too. strapi version: 4.4.3

Using query parameters modifiers(1.2.1) or 1.2.0 works fine, btw.

opened by SkyleLai 1

Cache images?

Is there a way once requested the image is being cached forever? I don't want to regenerate the image on each call.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <img alt="image" src="http://localhost:1337/uploads/f_avif,q_70,w_920/F_Sp8o_KVIAA_0_U7b_bc59f01efd.jpg">
</body>
</html>

opened by ohbob 13

Releases(v1.2.1)

v1.2.1(Oct 12, 2022)
What's Changed

fix: ignore non images assets by @sijokun in https://github.com/strapi-community/strapi-plugin-local-image-sharp/pull/7

New Contributors

@sijokun made their first contribution in https://github.com/strapi-community/strapi-plugin-local-image-sharp/pull/7

Full Changelog: https://github.com/strapi-community/strapi-plugin-local-image-sharp/compare/v1.2.0...v1.2.1
Source code(tar.gz)
Source code(zip)
v1.0.2(Apr 4, 2022)

Full Changelog: https://github.com/strapi-community/strapi-plugin-local-image-sharp/compare/v1.0.1...v1.0.2
Source code(tar.gz)
Source code(zip)

Dynamically resize, format and optimize images based on url modifiers.

Related tags

Overview

Local Image Sharp

Table of Contents

✨ Features

🖐 Installation

🚚 Usage

Examples

Modifiers

Contributing

License

Comments

GET parameters

Prepare for Strapi 4.3.x

breaks the video

1.2.1 breaks usage of path modifiers

Cache images?

Releases(v1.2.1)

v1.2.1(Oct 12, 2022)

What's Changed

New Contributors

v1.0.2(Apr 4, 2022)

Owner

Strapi Community

Imagable - Create, Edit, Optimize And Add Effects to Images

Piccloud is a full-stack (Angular & Spring Boot) online image clipboard that lets you share images over the internet by generating a unique URL. Others can access the image via this URL.

Group together Tailwind CSS modifiers like focus, peer-checked, dark:hover and more with HTML attributes 👩‍🚀

Use plain functions as modifiers. Polyfill for RFC: 757 | Default Modifier Manager

An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

Little Javascript / Typescript library for validating format of string like email, url, password...

Github action to collect metrics (CPU, memory, I/O, etc ...) from your workflows to help you debug and optimize your CI/CD pipeline

Tracer for module requires/imports to optimize coldstarts in serverless

optimize image & upload file to cloud as image bed with tiny image automic.

logseq custom.js and custom.css utilities : resize query table columns, hide namespaces...

↕️ A little Alpine.js plugin to automatically resize a textarea to fit its content.

JavaScript library to resize, reduce, or change ranges of DOM elements.

MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginative images, and is available on Discord and through a web interface here.

This project will be a basic website that allows users to add/remove books from a list. The main objective is to understand how to use JavaScript objects and arrays and dynamically modify the DOM and add basic events.

A web app build with HTML, CSS, and JavaScript. It allow users to add a book title and and it's author. Content are rendered also dynamically.

Basic website that allows users to add/remove books from a list. Achieved using JavaScript objects and arrays, dynamically modifying the DOM and adding basic events.

Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.

Fallback JS - JavaScript library for dynamically loading CSS and JS files

A weather dashboard that features dynamically updated HTML and CSS using OpenWeather API data.