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

Maya Shavin: How I Built My Website

Besides working as a senior front-end developer at Cloudinary, I'm also a content creator, a blogger, and an open-source developer. Follow me at @mayashavin and on mayashavin.com.

In the beginning, my website, mayashavin.com, was mainly for showcasing the status of my development projects and keeping me organized with my speaking schedule. Initially, I built it with Vue.js, later on switching to Nuxt.js (aka Nuxt) for a higher SEO score, and deployed it with Netlify. After some time, I added a blog section with Netlify CMS as the content management system (CMS). Everything was fine until I added more content and features, which led to a significant decline in the site’s performance. Also, the site design needed a modern look. So, I gave the site a makeover.

Read more
Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

As we spend more time at home, many of us are adopting pets for the joy, companionship and a surprising range of health benefits. In Australia, where our nonprofit customer PetRescue is located, there’s a shortage of pets to adopt. Last August, the Guardian reported that dog shelters in Australia emptied and adoption fees for puppies were running as high as $AUS1800.

Read more
Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more
How Quality and Quantity can go Hand in Hand

When it comes to quality versus quantity, you’ll often hear people say, “It’s the quality that counts, not the quantity”. While that’s true in many situations, there are also cases where you want both quality and quantity. You may have thousands of images on your website and you want them all to look great. This is especially important if your website allows users to upload their own content, for example, to sell their own products or services. You don't want their poor quality images to reflect badly on your brand.

Read more