@uxf/resizer
v11.48.0
Published
UXF Resizer
Downloads
361
Readme
@uxf/resizer
Installation + example (local dev next routes)
yarn add @uxf/resizer --dev
# .env.local
NEXT_PUBLIC_FRONTEND_URL=http://127.0.0.1:3000
NEXT_PUBLIC_API_URL=https://uxf.cz
Folder structure
src/
app/
generated/
[...path]/
route.ts # proxy
static/
[...path]/
route.ts # local static files
// src/app/generated/[...path]/route.ts
import { ProxyGET as GET } from "@uxf/resizer";
export { GET };
// src/app/generated/static/[...path]/route.ts
import { StaticGET as GET } from "@uxf/resizer";
export { GET };
Installation (server)
yarn add @uxf/resizer express path-to-regexp process yargs
uxf-resizer
Configuration
You can use configuration file .resizer-config.json
or environment variable UXF_RESIZER_CONFIG
[
{
"route": "/generated/:namespace/:p1/:p2/:filename([a-f0-9\\-]+)_:width(\\d+)_:height(\\d+)_:fit([a-z]+)_:position([a-z]+)_:background([a-z]+)_:trim([a-z]+)_:quality(\\d+|x)_:extension.:toFormat",
"source": "/var/www/UXF/projects/resizer/example-upload/:namespace/:p1/:p2/:filename.:extension"
},
{
"route": "/generated/:namespace/:p1/:p2/:filename([a-f0-9\\-]+)_:width(\\d+)_:height(\\d+)_:fit([a-z]+).:extension",
"source": "/var/www/UXF/projects/resizer/example-upload/:namespace/:p1/:p2/:filename.:extension"
},
{
"route": "/generated/static/:width(\\d+)_:height(\\d+)/:filename(*).:extension.:toExtension",
"source": "https://www.uxf.cz/:filename+"
},
{
"route": "/:appName/generated/:namespace/:p1/:p2/:filename([a-f0-9\\-]+)_:width(\\d+|x)_:height(\\d+|x)_:fit([a-z]+)_:position([a-z]+)_:background([a-z]+)_:trim([a-z]+)_:quality(\\d+|x)_:extension.:toFormat",
"source": "https://s3.uxf.dev/:appName/:namespace/:p1/:p2/:filename.:extension"
},
{
"route": "/:url/generated/static/:width(\\d+|x)_:height(\\d+|x)_:fit([a-z]+)_:position([a-z]+)_:background([a-z]+)_:trim([a-z]+)_:quality(\\d+|x)/:version/:filename(*).:extension.:toFormat",
"source": "https://:url/:filename+.:extension"
}
]
UXF Basic configuration
This is deprecated. Please use our global resizer for all projects.
[
{
"route": "/generated/static/:width(\\d+|x)_:height(\\d+|x)_:fit([a-z]+)_:position([a-z]+)_:background([a-z]+)_:trim([a-z]+)/:version/:filename(*).:extension.:toFormat",
"source": "https://uxf-base.uxf.dev/:filename+.:extension"
},
{
"route": "/generated/:namespace/:p1/:p2/:filename([a-f0-9\\-]+)_:width(\\d+|x)_:height(\\d+|x)_:fit([a-z]+)_:position([a-z]+)_:background([a-z]+)_:trim([a-z]+)_:quality(\\d+|x)_:extension.:toFormat",
"source": "https://s3.uxf.dev/${APP_NAME}-${APP_ENV}/:namespace/:p1/:p2/:filename.:extension"
}
]
Supported route parameters
| Parameter name | Type | Default sharp value |
|----------------|------------------------------------|----------------------------------------|
| width | number
or x
(auto) | undefined
|
| height | number
or x
(auto) | undefined
|
| fit | Fit
| cover |
| position | Position
| |
| background | FFFFFF
or t
(transparent) | |
| toFormat | webp
, png
, avif
, jpg
| jpg
|
| trim | number
or nt
(not trim) | |
| quality | number
(min: 1, max: 100) or x
| default of sharp (avif: 50, other: 80) |
Fit
cv
: cover,f
: fill,cn
: contain,in
: inside,out
: outside,
Position
a
: attentionb
: bottomc
: centree
: entropyl
: leftlb
: left bottomlt
: left topr
: rightrb
: right bottomrt
: right topt
: top