{"id":39583,"date":"2025-12-16T07:00:00","date_gmt":"2025-12-16T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=39583"},"modified":"2025-12-16T14:26:40","modified_gmt":"2025-12-16T22:26:40","slug":"build-holiday-card-collages","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/build-holiday-card-collages","title":{"rendered":"Build Holiday Card Collages With One Line of Code"},"content":{"rendered":"\n

In this article, I’m not going to show you much code. Instead, I’m going to show you how you can build a holiday card collage, complete with a ribbon footer with text, a background, and 5 styled photos with rounded, colored borders in one line<\/em> using the magic of Cloudinary’s image transformations.<\/p>\n\n\n\n

This is way cool, so buckle up and let me show you how I built this URL-generating app for your holiday card-sending needs. You can try it right now here<\/a>; it generates cards that look like this:<\/p>\n\n\n

\n
\"Holiday<\/figure><\/div>\n\n\n

Maybe this tool will even save you some money as printing photo-quality holiday cards can get expensive!<\/p>\n\n\n\n

Build an App, Any App<\/h2>\n\n\n\n

I have been enjoying building Astro apps, and, let’s face it, using Cursor makes architecting this sort of thing a real breeze. Use your favorite AI tool to craft an app that will allow you to upload five photos to Cloudinary, rearrange them, and generate a URL to build the holiday card.<\/p>\n\n\n

\n
\"Family<\/figure><\/div>\n\n
Tip:<\/strong>

If you are looking to quickly scaffold an app via prompting in Cursor or your IDE of choice, you can get better results by using two tools: ChatGPT to build the prompt, and Cursor to execute it.<\/p>\n<\/div>\n\n\n

My initial lazy half-baked idea sent over to ChatGPT:<\/p>\n\n\n\n

\n

\u201cwhat kind of demo could I build to create a holiday photo card maker for cloudinary\u201d<\/p>\n<\/blockquote>\n\n\n\n

ChatGPT, of course, thought I wanted it to build an app for me, and went straight to scaffolding a Next.js app with code everywhere. A few clarifications later, after requesting Astro for use in Cursor…<\/p>\n\n\n\n

\n

\u201ccreate this as a prompt I can give to cursor\u201d<\/p>\n<\/blockquote>\n\n\n\n

…ChatGPT generated a really nice, detailed prompt ready for building which you can read in full here<\/a>.<\/p>\n\n\n\n

By having this kind of very detailed prompt, Cursor is able to build a perfectly reasonable app on the first try. Then it’s up to the engineer to tweak it, redesign it, and add elements while keeping the core functionality of uploading and URL-building intact.<\/p>\n\n\n\n

Add Some Extras and Get Ready to Upload<\/h2>\n\n\n\n

I went ahead and changed the app colors for a wintry, cozy look, adding some falling snow, a popup elf with changing holiday messages (can you find him?), glowing lights, and a candy cane border, mostly borrowed from CodePen<\/a>. Just because we use AI doesn’t mean we can’t continue to make interesting interfaces! And AI can help you do that, too.<\/p>\n\n\n\n

After those fun things are complete, you can start making sure that you’re set up to use Cloudinary’s image upload and image transformation capabilities. To make this work, you need to ensure that you have some environment variables set up. Create an account on Cloudinary<\/a> (there’s a generous free tier) and grab your API keys from the console by clicking the gear icon in the left nav and selecting API Keys<\/strong>:<\/p>\n\n\n

\n
\"API<\/figure><\/div>\n\n\n

You want to add those keys to your .env file locally, and then make sure they’re available on your hosting service when you push your app to the cloud. I use Netlify so I add these keys into the Netlify console before publishing.<\/p>\n\n\n

PUBLIC_CLOUDINARY_CLOUD_NAME=<your<\/span> cloud<\/span> name<\/span>><\/span>\n\nPUBLIC_CLOUDINARY_UPLOAD_PRESET=christmas-collage<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
This app also needs what’s called an Upload Preset, which is essentially a placeholder that helps your app figure out where your uploaded images should go.<\/p>\n\n\n\n