Cloudinary Blog

Creating a Collage Maker With Cloudinary

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.

Note
Feel free to try out this live demo.

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

How to Optimize for Page Load Speed

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.

Add upload preset

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.

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.

adding tags

Cloudinary then displays the details of the new preset:

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

Copy to clipboard
{
  "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:

Copy to clipboard
/* ------------------ 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:

Copy to clipboard
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.
    Cloudinary API credentials
  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!

Recent Blog Posts

Creating an API With Python Flask to Upload Files to Cloudinary

Code

Cloudinary offers SDKs for many programming languages and frameworks. Even though it also offers an Upload API endpoint for both back-end and front-end code, most developers find the SDKs very helpful. If you're working with a powerful back-end framework like Python Flask, you'll be happy to hear that a Python SDK is now available.
This tutorial walks you through the process of building an API to upload images to Cloudinary. You can also upload other file types, including video and even nonmedia files, with the API.

Read more
How to Use the Cloudinary Media Editor Widget

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals.

As part of our commitment to support the entire flow of media assets, we are now introducing an intuitive media editing widget: an out­-of­-the-­box, interactive UI providing your users with a set of common image editing actions for immediate use on your website or web app. The widget is interactive and simple, built on Cloudinary's transformation capabilities, and requiring only a few lines of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house image editing capabilities.

Read more
Shoppable Video Is Becoming Popular in E-Commerce

As pandemic restrictions necessitated, many shopping trips in 2020 took place outside the traditional brick-and-mortar store, or at least void of the physical aisle-browsing experience. Same-day curbside pickup became a safe and convenient alternative, and e-commerce transactions skyrocketed as consumers shopped online. In fact, Digital Commerce 360 estimates that, compared to 2019, e-commerce transactions grew by more than 40% last year.

Read more
Enhance Your Travel Site With Cloudinary in Anticipation of a Return to New Normal

Read more
The Benefits of Headless DAMs

Headless is not a buzzword anymore. In fact, the concept of headless architecture is gaining momentum due to the flexibility it offers for composing new experiences and for tackling the undue complexity of an ever-evolving technology stack. That’s because while the evolution of the martech landscape has enabled disruptive, digital innovations, the approach of buying point solutions for solving specific challenges can expose companies to the complicated nature of new technologies, systems, and platforms.

Read more