@uxf/resizer

UXF Resizer

Usage no npm install needed!

<script type="module">
  import uxfResizer from 'https://cdn.skypack.dev/@uxf/resizer';
</script>

README

@uxf/resizer

npm

Installation

// global installation
yarn global add @uxf/resizer
export PATH="$(yarn global bin):$PATH"
UXF_RESIZER_SOURCE_PATH=${PWD}/example/source UXF_RESIZER_GENERATE_PATH=${PWD}/example/generated uxf-resizer

// local installation
yarn add @uxf/resizer
UXF_RESIZER_SOURCE_PATH=${PWD}/example/source UXF_RESIZER_GENERATE_PATH=${PWD}/example/generated ./node-modules/.bin/uxf-resizer

Default filename regexp

:originalFilename([a-f0-9\-]+)_:width(\d+)_:height(\d+)_:fit([a-z]+)_:position([a-z]+)_:background([a-z]+)_:trim([a-z]+)_:originalExtension.:toFormat

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

background

  • t: transparent
  • FFFFF: white (or other hex color)

trim

  • nt: not trim
  • number: number value

toFormat

  • webp | png | avif | or other

Help

Usage:
uxf-resizer

Environment variables:
UXF_RESIZER_SOURCE_PATH - required
UXF_RESIZER_GENERATE_PATH - required

Options
      --disable-namespace                             [boolean] [default: false]
      --source-folder-depth     Depth of the source folder [number] [default: 2]
      --generated-folder-depth  Depth of the generated folder
                                                           [number] [default: 2]
      --filename-regexp         Filename regexp (see:
                                https://github.com/pillarjs/path-to-regexp)
                                                                        [string]
  -h, --help                    Show help                              [boolean]

Options:
      --version  Show version number                                   [boolean]