Build Holiday Card Collages with One Line of Code

Source: Dev.to

In this article I’ll show you how to build a holiday‑card collage with a ribbon footer, background, and five styled photos (rounded, colored borders) in one line using Cloudinary’s transformation magic.

You can try the live demo — it generates cards that look like this:

---

Build an app, any app

I’ve been enjoying building Astro apps, and using Cursor makes scaffolding a breeze. You can prompt an AI (e.g., ChatGPT) to craft a detailed prompt, then let Cursor generate a solid starter project. The prompt I used is available in full — see the gist here: .

The generated app lets you:

• Upload five photos to Cloudinary
• Rearrange them in the desired order
• Generate a single URL that renders the complete holiday card

---

Add some extras and get ready to upload

I tweaked the app’s colors for a wintry feel, added falling snow, a popup elf with changing holiday messages, glowing lights, and a candy‑cane border (borrowed from a experiment).

---

Set up Cloudinary credentials

1. Create a Cloudinary account (free tier available) – .

2. Grab your API keys from the Cloudinary console (gear icon → API Keys).

   

3. Add the keys to a local .env file (and to your hosting provider’s environment variables, e.g., Netlify):

PUBLIC_CLOUDINARY_CLOUD_NAME=
PUBLIC_CLOUDINARY_UPLOAD_PRESET=christmas-collage

4. Create an unsigned upload preset named christmas-collage (or any name you prefer) via the Uploads section in the Cloudinary dashboard.

   

5. Set up folders in Cloudinary:

   • collages – where the generated cards will be stored
   • holiday-assets – contains a collage background and a ribbon background image

   Example background image used:

   

   Photo by JESHOOTS.COM on Unsplash.

---

Watch the URL builder work

After uploading five family photos and arranging them, the app generates a single Cloudinary URL packed with transformations. The URL looks roughly like this:

https://res.cloudinary.com/jen-demos/image/upload/w_1600,h_900,c_fill,q_auto,f_auto
/l_holiday-assets:jhi9cpio4ahxomhagwvs/c_fill,w_473,h_680,r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_50,y_50
/l_holiday-assets:d9njoekpa1zzzepy2y5d/c_fill,w_473,h_426,r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_563,y_50
/l_holiday-assets:nm9i3sjh6c3mkfj0ari1/c_fill,w_473,h_214,r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_563,y_516
/l_holiday-assets:rg0c1ul...

The URL encodes:

• Base canvas size (w_1600,h_900)
• Background image (holiday-assets:jhi9cpio4ahxomhagwvs)
• Each uploaded photo positioned and styled with rounded corners, gold borders, and precise offsets

The result is a ready‑to‑print, photo‑quality holiday card that you can share digitally or send to a printer—potentially saving you money compared to traditional photo‑card services.

Enjoy building your own festive collages with just one line of Cloudinary transformation code!