Creating a Collage Maker With Cloudinary

Creating a collage for images makes sharing more fun, promising to preserve a wealth of memories. A number of tools are available that do the job very well.

This post describes how to create a collage maker with Cloudinary. It took me a while to learn Cloudinary’s advanced implementation techniques, such as variables, the upload widget, unsigned uploads, tagging, and resource listings. No worries, however; many excellent references are at hand, e.g., this article by Cloudinary Support and the Cloudinary Cookbook.

To create your own instance of the collage maker, first clone or fork this GitHub repository and then follow the steps below.

Step 1: Create an unsigned upload preset.

In your Cloudinary console, click Settings (gear icon on top right) and then the Upload tab near the top. Scroll down and click the Add upload preset link.

Next, name the preset, such as unsignedCollageUpload in this example. Make a note of the name for use in step 3. Right below the name under Signing Mode, pull down the menu to choose Unsigned.

Click the Media analysis and AI tab on the left and enter collage in the Tags field at the top. Click Save near the top.

Cloudinary then displays the details of the new preset:

This preset ensures that for each file you upload:

• Cloudinary will assign it a unique file name.
• The file does not require a signature, hence no need to upload it with an API or SDK.
• Cloudinary will tag it as collage.

Step 2: Select and upload background images for the collage.

I’ve already performed this step and tagged the images as background. To validate that, request a resource list. With a single call, the following code can identify all the available background images for the collage:

Sample URL: https://res.cloudinary.com/mermaid/image/list/background.json

{
  "resources": [
    {
      "public_id": "background/bokeh-1916807_1280_g6okos",
      "version": 1593039052,
      "format": "jpg",
      "width": 1280,
      "height": 851,
      "type": "upload",
      "created_at": "2020-06-24T22:50:52Z",
      "metadata": [
        {
          "external_id": "mjbcmyjutfk8wgmgdwuz",
          "label": "title",
          "type": "string",
          "value": "default title"
        }
      ]
    },
    ..
  ],
  "updated_at": "2020-06-24T22:55:36Z"
}

Step 3: Customize the upload widget.

Follow the instructions on the page to add the upload widget, a basic uploader. Next, configure the widget with your Cloudinary cloud name and the unsigned upload preset you created in step 1. Add the code below to your index.html file:

/* ------------------ USER SPECIFIC SETUP --------------------------- */
      // Add your cloudname and preset here

      // cloud name
      var cloudName = '<< your cloud name >>'
      // upload preset name
      var preset = '<< your preset name >>'

/* ------------------ USER SPECIFIC ENDS --------------------------- */

The background images are now in place, as is the widget for uploads to Cloudinary and for object tagging.

Step 4: Build the collage maker.

To build the collage marker, we do the following:

1. Make a call to the list URL and display the background images.
2. Prompt the user to upload between two to four images. Ignore any more images uploaded by that user.
3. Overlay the uploaded images on the background image to create a collage.

Fetching background images

The tag background in this example identifies the background images for the collage. To change the tag, edit the fetch snippet in the index.html file to read like this:

https://res.cloudinary.com/<cloud-name>/image/list/<tag-name>.json.
fetch('https://res.cloudinary.com/mermaid/image/list/background.json')
  .then(resp => {
    resp.json().then(json => {
      …

Creating the collage

Create the collage with image overlays as follows:

1. Identify the background images, one by one.
2. Add the images to the collage without resizing their dimensions.

Next, resize each of the uploaded images:

1. Set the width of the image to be half of the background image’s width.
2. Add a few pixels—I suggest 20—to the border.
3. Calculate the x and y offsets as one quarter of the background image’s dimension.
4. Find the relative origin and offsetting with the default parameter (g_auto:center).
5. Render the collage on the page.

Cloudinary now displays the final collage along with an option for downloading it. To generate a link for download collage, replace f_auto with fl_attach to ensure that your users download the images as JPGs, not WebPs. Keep this trick in mind for generating download URLs.

Step 5: Clean up.

To clear all the uploaded images at any point, do the following:

1. Copy your Cloudinary API credentials from the Dashboard.
2. Save the credentials as an environmental variable: CLOUDINARY_URL.

3. Run the script deleteResourcesByTagName.js:

   node deleteResourcesByTagName.js

   The script then removes all the images tagged as collage. Those that serve as background will remain intact.

Moving on, you could detect your images’ aspect ratios and then apply clever cropping to them on Cloudinary. You could also populate your collage with more images.

Any comments? Send them to me at the GitHub repo or, in case of problems, open issues there. Be sure to sign up for free and we can make building collages a lot of fun!