Resize One Image into 6 Social Media Formats Automatically Using Cloudinary Claimable Clouds

#ai #programming #productivity #tutorial

Claimable Clouds are temporary Cloudinary environments for AI workflows that let AI Agents safely manage media with no signup required.

Imagine you're a busy designer, with many satisfied clients who depend on you to take their images and make them look great across social media. All that manual cropping and scaling, it's enough to make a body cry.

On top of that, you know that AI can give you a hand here, but managing the handoff between your AI, your own skilled hands and artistic taste and style, and your always-in-a-hurry client list is another big pain.

Enter the concept of the Cloudinary Claimable Cloud, just released today.

Take a look at the docs about these new temporary instances available now

What we built and why

Provision a disposable Cloudinary cloud with no signup, using npx @cloudinary/cloud
Auto-detect a dropped image and upload it to that temporary cloud
Auto-crop it into 6+ social formats (Instagram, LinkedIn, X, Facebook, Stories) using AI-based smart cropping
Generate a side-by-side gallery of results automatically
Hand off a Claim URL so a client can make the cloud permanent

Now, you can hand off the main pain points to AI - the resizing and reshaping of your images for the various social media platforms, while giving your clients a clean handoff via a temporary Cloud environment that they can use to create a Cloudinary account and start using these assets.

One side effect: this also nudges your whole client base toward the same toolset - Cloudinary. The bigger deal is working with an AI agent that makes your life easier but ALSO allows you to keep control of the output.

Let's walk through how this works! It all boils down to a new command:

npx @cloudinary/cloud

Type that into your terminal to kick off the process.

I built a small app around this concept to provide this AI agent with a simple harness, so let me show how that looks. The user experience is to drop any image you want resized into the /drop folder. Under the cover, there are a few more processes at work:

Provisioning: Spin Up a Temporary Cloudinary Cloud

On the first run, the app spins up a disposable Cloudinary "Claimable Cloud" via npx @cloudinary/cloud with temporary credentials, so no signup is required. The generated credentials are saved temporarily in a .env file locally. This gives the tool a live upload/delivery endpoint without any manual account setup. These credentials are refreshed when you start the app: npm i && npm start.

Watch & Transform: Auto-Crop for Each Social Platform

The app watches the drop folder for new images. When a high-resolution master image lands there, it's uploaded to this temporary Cloudinary instance.

The image we want to resize

Then it's run through a set of predefined social-media format specs (Instagram Square, Portrait, Story/Reels/TikTok, LinkedIn, X/Twitter, Facebook) using dynamic transformations like c_fill,g_auto for smart auto-cropping to each platform's exact aspect ratio and dimensions, focusing on the most important element. Control these formats and transformations in the src/formats.js file:

export const FORMATS = [
  {
    key: 'instagram-square',
    label: 'Instagram Square Post',
    ratio: '1:1',
    width: 1080,
    height: 1080,
    buildTransformation: subjectFill(1080, 1080),
  },
  {
    key: 'instagram-portrait',
    label: 'Instagram Feed Portrait',
    ratio: '4:5',
    width: 1080,
    height: 1350,
    buildTransformation: subjectFill(1080, 1350),
  },
  {
    key: 'instagram-story',
    label: 'Instagram Story / Reels / TikTok',
    ratio: '9:16',
    width: 1080,
    height: 1920,
    buildTransformation: padWithBlurredBackground(1080, 1920),
  },
  ...
];

Render Results & Send to Client: Share a Claim URL

The temporary Claimable Cloud is provisioned using the temporary credentials stored in .env:

// Ensures a usable CLOUDINARY_URL is in process.env, provisioning a disposable
// cloud on demand. Returns { claimUrl } (claimUrl is undefined when a cloud
// was already configured before this run).
export function ensureCloud() {
  loadEnv();

  if (process.env.CLOUDINARY_URL) {
    return { claimUrl: process.env.CLOUDINARY_CLOUD_CLAIM_URL, provisioned: false };
  }

  console.log('No Cloudinary cloud configured yet — provisioning a disposable one (no signup needed)...');

  let raw;
  try {
    raw = execFileSync(
      'npx',
      ['-y', '@cloudinary/cloud', 'create', '--no-agent-metadata'],
      { encoding: 'utf8' },
    );
  } catch (err) {
    const combined = `${err.stdout || ''}\n${err.stderr || ''}`.trim();
    throw new Error(redact(combined) || err.message);
  }

  const values = parseKeyValues(raw);
  loadEnv();

  if (!process.env.CLOUDINARY_URL) {
    throw new Error('Cloud provisioning did not produce a CLOUDINARY_URL.');
  }

  return { claimUrl: values.CLAIM_URL, provisioned: true };
}

Generated variant URLs are written to manifest.json and rendered into an auto-generated side-by-side HTML gallery, which opens automatically. The output also includes a Claim URL, letting the disposable cloud be handed off (e.g., to a client) and made permanent at any time.

The temporary link and generated gallery of images to pick from. Note the fancy Instagram one!

Now you can pass that Claim URL right on to your client and start the process of allowing them to claim the results and start working with them.

This is an early feature, with more agent-based tools coming from Cloudinary soon. Watch for more interesting work around AI agents in the near future!