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

A New, Simple Tool for Creating Text Overlays for Images

Many Cloudinary users desire a UI for tasks like creating text overlays for images, which they then embed on webpages or download for marketing campaigns. Generating such overlays with the Cloudinary Media Library UI involves a bit of a learning curve, especially if they require multiple fonts or text lines, which even experienced users might find challenging to implement.

Read more
Transitioning JPEG-Based to JPEG XL-Based Images for Web Platforms

When the JPEG codec was being developed in the late 1980s, no standardized, lossy image-compression formats existed. JPEG became ready at exactly the right time in 1992, when the World Wide Web and digital cameras were about to become a thing. The introduction of HTML’s <img> tag in 1995 ensured the recognition of JPEG as the web format—at least for photographs. During the 1990s, digital cameras replaced analog ones and, given the limited memory capacities of that era, JPEG became the standard format for photography, especially for consumer-grade cameras.

Read more

Amplify Your Jamstack With Video

By Alex Patterson
Amplify Your Jamstack With Cloudinary Video

As defined by Amazon Web Services (AWS), Amplify is a set of products and tools with which mobile and front-end web developers can build and deploy AWS-powered, secure, and scalable full-stack apps. Also, you can efficiently configure their back ends, connect them to your app with just a few lines of code, and deploy static web apps in only three steps. Historically, because of their performance issues, managing images and videos is a daunting challenge for developers. Even though you can easily load media to an S3 bucket with AWS Amplify, transforming, compressing, and responsively delivering them is labor intensive and time consuming.

Read more
Cloudinary Helps Move James Hardie’s Experience Online

While COVID has affected most businesses, it has been particularly hard on those that sell products for the physical ‘brick and mortar’ world. One company that literally fits that bill is our Australian customer James Hardie, the largest global manufacturer of fibre cement products used in both domestic and commercial construction. These are materials that its buyers ideally want to see up close, in detail. When customers have questions, they expect personal service.

Read more