|
| 1 | +--- |
| 2 | +name: transform-build-mosaic-collage-with-transloadit |
| 3 | +description: One-off justified mosaic photo collage (N local images -> single image) using the official `@transloadit/node` CLI. Uses the `/image/merge` Robot's `mosaic` effect to build a tiled layout that keeps every photo fully visible, and downloads the result to an explicit output path via `--output`. |
| 4 | +when_to_use: | |
| 5 | + Triggers when the user asks to create a mosaic collage, tile photos edge-to-edge, build a justified photo grid, make a Flickr-style photo layout, or compose N photos into a clean editorial collage that keeps every photo fully visible. Choose this over the polaroid skill when the vibe is clean and editorial (product grids, portfolio hero sections, social previews from a batch), and over `transform-generate-image-with-transloadit` when the input is N existing photos rather than a text prompt. |
| 6 | +--- |
| 7 | + |
| 8 | +# Inputs |
| 9 | + |
| 10 | +- Two or more absolute paths to local input images |
| 11 | +- Optional output path; default to an explicit `collage.jpg` in the current working directory |
| 12 | +- Optional canvas size (`--width`, `--height`), default `1920×1200` |
| 13 | +- Optional `--seed` for deterministic layout |
| 14 | + |
| 15 | +# Prepare Instructions |
| 16 | + |
| 17 | +Resolve credentials in this order: |
| 18 | +- Shell environment variables |
| 19 | +- The current working directory `.env` only |
| 20 | +- `~/.transloadit/credentials` |
| 21 | + |
| 22 | +If your `.env` lives in a parent directory, export the variables into the shell first. |
| 23 | + |
| 24 | +# Run |
| 25 | + |
| 26 | +```bash |
| 27 | +npx -y @transloadit/node image merge \ |
| 28 | + --input ./photo-a.jpg \ |
| 29 | + --input ./photo-b.jpg \ |
| 30 | + --input ./photo-c.jpg \ |
| 31 | + --input ./photo-d.jpg \ |
| 32 | + --input ./photo-e.jpg \ |
| 33 | + --input ./photo-f.jpg \ |
| 34 | + --effect mosaic \ |
| 35 | + --width 1920 \ |
| 36 | + --height 1200 \ |
| 37 | + --border 12 \ |
| 38 | + --shuffle \ |
| 39 | + --format jpg \ |
| 40 | + --output ./collage.jpg |
| 41 | +``` |
| 42 | + |
| 43 | +After the command finishes, confirm the image exists at the expected output path. |
| 44 | + |
| 45 | +# Tuning |
| 46 | + |
| 47 | +- `--border 12` sets both the outer canvas padding and the gutter width between tiles. Larger values give more breathing room. |
| 48 | +- `--background '#eee5d3'` fills the gutters and canvas padding (default). Hex codes or named colors both work. |
| 49 | +- `--background none` (with `--format png` or `--format webp`) produces a transparent canvas and transparent gutters. |
| 50 | +- `--shuffle` lets the Robot reorder inputs before solving the layout; combine with `--seed` to pin the shuffle. |
| 51 | +- `--seed 42` makes the mosaic solver deterministic — rerun with the same inputs to reproduce the same output. |
| 52 | + |
| 53 | +# Debug If It Fails |
| 54 | + |
| 55 | +```bash |
| 56 | +npx -y @transloadit/node assemblies get <assemblyIdOrUrl> -j |
| 57 | +``` |
| 58 | + |
| 59 | +Notes: |
| 60 | +- Repeated `--input` values are bundled into a single `/image/merge` assembly. |
| 61 | +- 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. |
| 62 | +- 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/resize` and `resize_strategy: fit`. |
| 63 | +- Prefer an explicit output filename (e.g. `./collage.jpg` or `./collage.png`) over a directory output so the extension is deterministic. |
0 commit comments