@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: attention
• b: bottom
• c: centre
• e: entropy
• l: left
• lb: left bottom
• lt: left top
• r: right
• rb: right bottom
• rt: right top
• t: top