Started building a photo collage maker a few weeks ago. It turned into one of those projects where every step forward reveals a new thing you didn't know you didn't know.

The Quest

Make a tool that takes a bunch of photos and arranges them into a nice collage. Shareable on LINE. Something people would actually use, not just a tech demo.

The mechanic is simple: pick photos in LINE → hit create → get back a nicely formatted collage with a gradient header, your name, and the date. Ready to share back into the chat. No app install, no signup — just the LINE LIFF page.

Stack: Express + sharp on the backend, vanilla HTML on the frontend, LINE LIFF for the chat integration. Simple on paper — but image processing and precise layout rendering are two things that always look easier than they are.

The Boss Fights

Layout. The first version looked like someone spilled photos on the floor. Masonry layout sounds easy until you have to code it yourself. The naive approach is to just dump images into rows, but that means tall photos waste horizontal space and the overall collage becomes an awkward tower.

Tried a row-wrapping grid first — images laid out in fixed rows, wrapping to the next. Looked worse. Things didn't align, gaps were uneven, short images left holes.

Went back to masonry with max 3 columns. The algorithm tracks the height of each column and places the next image in the shortest one. Sounds textbook, but the devils are in the details: what happens when an image has no dimensions? When the last row has only 1 image? When two columns tie at the same height? Started with smart centering for the last row, then scrapped it — just let it fill left to right. Also added a hard rule: never collapse into fewer columns. Even if only 2 photos come in, keep 3 columns. The human eye notices inconsistencies fast, so consistency beats cleverness.

The guard against NaN — photos without metadata returning NaN for dimensions — was the trickiest part. Node's sharp library reads EXIF data but not all photos have it (especially ones from screenshots or weird phone cameras). If width or height is NaN, every calculation downstream breaks: column height accumulates NaN, layout coordinates become NaN, canvas output is a blank JPEG. Took some debugging to trace it back. The fix: if width or height is missing, fallback to a square (1:1 ratio) so the layout math always has valid numbers.

Sharp. Image processing is black magic. The sharp library does JPEG decoding, resizing, compositing, and encoding — all in libvips C under the hood. But the default settings aren't great for collage work. Photos looked soft and slightly blurry when composited onto the canvas. The cause: sharp was upscaling small photos to fit the card slots, which introduces interpolation artifacts.

The fix chain: withoutEnlargement (never upscale beyond original size → small photos stay sharp), resize kernel lanczos3 (sharper downscale than default bilinear), and mozjpeg compression at quality 90 (better JPEG encoding than libjpeg). Small photos get centered inside their card slot with padding instead of being stretched. The difference was night and day — detail preserved, no blur, file size still reasonable.

Fonts. Thai text needs Thai fonts. NotoSansThai is the safest bet — supports all Thai characters, readable at small sizes. But loading a .ttf into sharp's compositing pipeline isn't straightforward. Sharp doesn't handle text rendering natively.

The solution: opentype.js to parse the font file and get glyph paths, then fontkit for advanced layout (glyph positioning, kerning for Thai tone marks). Render each character as a path, composite onto the canvas as shapes, not text. This means the text becomes part of the image — no dependency on system fonts, no rendering differences between platforms. The header gradient has the day name in Thai ("วันอาทิตย์", "วันจันทร์" ฯลฯ) rendered at precise positions on the 1080px-wide canvas. Getting the baseline right for Thai vowels and tone marks (which sit above the consonant) needed some trial and error.

R2. Cloudflare R2 works like S3 but without egress fees — important because collages are shared via LINE and viewed on mobile, meaning lots of GET requests. Auto-cleanup runs every time the API starts: check all objects older than 30 days and delete them. Old collages don't pile up, storage stays near zero cost.

A manual cleanup endpoint (POST /api/cleanup) exists too, for when I want to free up space without restarting the server.

LINE Integration. LIFF (LINE Front-end Framework) is LINE's SDK for running web apps inside the LINE app. It provides the user's LINE ID and profile picture, so the collage can show the creator's name without asking them to type it. The flow: user opens LIFF page → scrolls through their phone gallery via <input type="file" multiple> → selects photos → presses "สร้าง collage" → frontend sends images to Express API → API processes and returns the rendered JPEG → LIFF opens a share dialog to post it in any chat.

The tricky part: LIFF on mobile has a strict 10MB limit on POST bodies. Multiple photos from a phone gallery easily exceed that. So the frontend compresses images with canvas (toDataURL at quality 0.8) before uploading. This was necessary because LINE's in-app browser throttles large uploads differently than Chrome/Safari.

The Party

• Backend API: Render.com free tier — Express 4 server with sharp for image processing. Cold starts are slow (~10s) but it works.
• Frontend: Vercel serverless — serves the LIFF single-page app. Vanilla HTML/CSS/JS, no framework overhead.
• Webhook: Vercel serverless function — handles LINE bot commands (!ส่งรูป, !เมนู, !ลูกค้า). Routes messages to the right action.
• Storage: Cloudflare R2 — stores rendered collages. Public URL format: pub-737d...r2.dev/collage/<filename>.jpg. No CDN config needed, R2 serves directly.
• Bot: LINE Messaging API — connects the webhook to the LINE app. Has a main menu with links to collage, truck, and data projects.

The Side Quests

7-day color themes. Each day of the week gets its own palette for the collage header — Sunday red, Monday beige, Tuesday pink, Wednesday green, Thursday orange, Friday blue, Saturday purple. The JavaScript auto-detects the current day and applies the matching palette. Implemented as a simple array of 7 objects with hex colors, gradient stops, and text color. Zero configuration needed from the user. Makes every collage feel like it belongs to that day without trying too hard.

Dark mode. The LIFF page respects prefers-color-scheme. The collage output itself doesn't change (it's a JPEG), but the UI around it adapts — buttons, backgrounds, text. CSS variables swap between light and dark. Nothing fancy, just a @media query.

Name persistence. The LIFF profile gives us a display name, but users can change it. Stored in localStorage so it survives page refreshes. If the user clears their browser data, it falls back to the LINE display name.

What I Learned

Every project has a thing that takes way longer than expected. For collage, it was the layout engine. Masonry with NaN guards and non-collapsing columns sounds like a footnote in the README but it's the core of the whole thing — if the layout looks wrong, nothing else matters. I spent more time on the 3-column layout than on the sharp integration, the font rendering, and the R2 setup combined.

The other lesson: user feedback is fast when the tool lives in a chat app. People see the collage, share it in a group, someone else tries it. Within minutes I know if something breaks. That's a much tighter feedback loop than a traditional web app where users might not bother reporting issues.

Also learned that mozjpeg at Q90 is a surprisingly good compression sweet spot — files are ~200-400KB for a full collage, which loads fast on mobile data. And that you can never assume every photo has valid EXIF data.

Where It Lives

Type !ส่งรูป in any LINE chat, or open the LIFF page directly from the bot menu. The webhook routes to the Vercel function, which returns the LIFF URL. User picks photos, gets a collage, shares it back. Takes about 20 seconds from command to result (Render cold start included).

It works, it's live, and a handful of people use it regularly. That's enough for now.