transform-build-mosaic-collage-with-transloadit
Inputs
- Two or more absolute paths to local input images
- Optional output path; default to an explicit
collage.jpgin the current working directory - Optional canvas size (
--width,--height), default1920×1200 - Optional
--seedfor deterministic layout
Prepare Instructions
Resolve credentials in this order:
- Shell environment variables
- The current working directory
.envonly ~/.transloadit/credentials
If your .env lives in a parent directory, export the variables into the shell first.
Run
npx -y @transloadit/node image merge \
--input ./photo-a.jpg \
--input ./photo-b.jpg \
--input ./photo-c.jpg \
--input ./photo-d.jpg \
--input ./photo-e.jpg \
--input ./photo-f.jpg \
--effect mosaic \
--width 1920 \
--height 1200 \
--border 12 \
--shuffle \
--format jpg \
--output ./collage.jpg
After the command finishes, confirm the image exists at the expected output path.
Tuning
--border 12sets both the outer canvas padding and the gutter width between tiles. Larger values give more breathing room.--background '#eee5d3'fills the gutters and canvas padding (default). Hex codes or named colors both work.--background none(with--format pngor--format webp) produces a transparent canvas and transparent gutters.--shufflelets the Robot reorder inputs before solving the layout; combine with--seedto pin the shuffle.--seed 42makes the mosaic solver deterministic — rerun with the same inputs to reproduce the same output.
Debug If It Fails
npx -y @transloadit/node assemblies get <assemblyIdOrUrl> -j
Notes:
- Repeated
--inputvalues are bundled into a single/image/mergeassembly. - The mosaic effect reads each input's aspect ratio and solves for a justified tile layout — portrait + landscape mixes generally produce more interesting layouts than uniform sizes.
- Unlike the polaroid-stack effect, tiles are center-cropped to fit their allocated rectangle. Any portion of a photo can be cropped off — if every pixel matters, resize beforehand with
/image/resizeandresize_strategy: fit. - Prefer an explicit output filename (e.g.
./collage.jpgor./collage.png) over a directory output so the extension is deterministic.
More from transloadit/skills
transform-encode-hls-video-with-transloadit
One-off HLS encoding (local video -> HLS renditions + playlist) using Transloadit via the `transloadit` CLI. Prefer builtin templates (`builtin/encode-hls-video@latest`) and download outputs locally via `-o`.
39transform-generate-image-with-transloadit
One-off image generation (prompt -> image file) using Transloadit via the `transloadit` CLI. Prefer `image generate` for text-only and input-guided generation, and use `--output` when you need a deterministic path.
38integrate-uppy-transloadit-s3-uploading-to-nextjs
Add Uppy Dashboard + Transloadit uploads to a Next.js (App Router) app, with server-side signature generation and optional /s3/store export.
37transloadit
Main entry-point skill for Transloadit. Route to the right `integrate-*`, `transform-*`, or `docs-*` skill, and prefer executing via `npx -y @transloadit/node ...` (CLI) for deterministic behavior.
36docs-transloadit-robots
Offline lookup for Transloadit Robots and their parameter docs/examples via the `transloadit` CLI. Use to draft or validate `steps` JSON without guessing robot names/params.
36integrate-asset-delivery-with-transloadit-smartcdn-in-nextjs
Add Transloadit Smart CDN URL signing to a Next.js App Router project (server-side signing route + optional client demo page).
36