Cloudinary Integration for Website Media Management

Cloudinary Integration for Website Media Management

Cloudinary is cloud service for storing, transforming, and delivering images and video. Main value — not just CDN, but dynamic transformations via URL: resize, format, quality, crop, watermark overlay directly in request parameters. No pre-made previews, one image — all needed sizes.

Setup and Configuration

Register at cloudinary.com, in dashboard — Cloud Name, API Key, API Secret.

composer require cloudinary-labs/cloudinary-laravel

CLOUDINARY_URL=cloudinary://API_KEY:API_SECRET@CLOUD_NAME

// config/cloudinary.php published via artisan vendor:publish

File Upload

use CloudinaryLabs\CloudinaryLaravel\Facades\Cloudinary;

// Upload with public_id saving
$result = Cloudinary::upload($request->file('image')->getRealPath(), [
    'folder'    => 'products',
    'public_id' => 'product-' . $product->id,
    'overwrite' => true,
    'tags'      => ['product', 'catalog'],
]);

$publicId  = $result->getPublicId();   // products/product-123
$secureUrl = $result->getSecureUrl();  // https://res.cloudinary.com/...

Store only public_id in database — URL generated dynamically on each request. No need to store URL: it changes when domain or transformation parameters change.

Dynamic Transformations via URL

All image management — in URL:

https://res.cloudinary.com/CLOUD_NAME/image/upload/
  w_800,h_600,c_fill,g_auto,f_auto,q_auto/
  products/product-123

Parameters:

• w_800,h_600 — width and height
• c_fill — crop mode (fill, fit, scale, crop, thumb, etc.)
• g_auto — auto focus selection (AI detects main object)
• f_auto — auto format (WebP for Chrome, AVIF where supported, JPEG for others)
• q_auto — auto quality (Cloudinary picks optimal)

PHP SDK makes URL generation easier:

use Cloudinary\Cloudinary;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Quality;
use Cloudinary\Transformation\Format;

$cloudinary = new Cloudinary();

$url = $cloudinary->image($publicId)
    ->resize(Resize::fill()->width(800)->height(600)->gravity('auto'))
    ->quality(Quality::auto())
    ->format(Format::auto())
    ->toUrl();

Responsive Images

Generate multiple sizes for different screens:

function cloudinaryResponsive(string $publicId, array $widths = [400, 800, 1200]): string
{
    $cloudinary = new Cloudinary();
    $srcset = [];

    foreach ($widths as $w) {
        $url = $cloudinary->image($publicId)
            ->resize(Resize::scale()->width($w))
            ->format(Format::auto())
            ->quality(Quality::auto())
            ->toUrl();
        $srcset[] = "{$url} {$w}w";
    }

    return implode(', ', $srcset);
}

<img
  src="https://res.cloudinary.com/CLOUD/image/upload/w_800,f_auto,q_auto/products/123"
  srcset="{{ cloudinaryResponsive('products/product-123') }}"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="..."
  loading="lazy"
>

Video: Automatic Optimization

$videoUrl = $cloudinary->video($publicId)
    ->resize(Resize::scale()->width(1280))
    ->quality(Quality::auto())
    ->format(Format::auto()) // mp4/webm based on browser support
    ->toUrl();

Cloudinary generates adaptive bitrate (ABR) for streaming video with appropriate plan.

Signed URLs for Private Files

If files shouldn't be publicly accessible:

$signedUrl = $cloudinary->image($publicId)
    ->signUrl(true)
    ->resize(Resize::scale()->width(800))
    ->toUrl();

Signed URL contains HMAC signature and can have lifetime — via expires_at parameter when generating.

Deletion and Resource Management

// Delete one file
Cloudinary::destroy('products/product-123');

// Delete by tag (e.g., all images of deleted product)
$cloudinary->adminApi()->deleteResourcesByTag('product-123');

Upload Hooks: Automatic Processing

Cloudinary supports Incoming Transformations — applied automatically on upload. For example, automatic background removal for catalog photos:

Cloudinary::upload($path, [
    'eager' => [
        ['effect' => 'background_removal', 'format' => 'png'],
        ['width' => 800, 'height' => 800, 'crop' => 'fill', 'format' => 'webp'],
    ],
    'eager_async' => true,
]);

After upload, Cloudinary asynchronously applies transformations and can notify via webhook when ready.

Timelines and Scope

Basic SDK setup, file upload, dynamic URL generation: 2–4 hours. Complete solution with responsive images, auto-format, media library management, and deletion on content removal — 1 business day.