• Components
  • CldImage
  • Examples

CldImage Examples

Effects

  • Background Removal

    removeBackground

    Background removal requires the Cloudinary AI Background Removal Add-On

  • Zoom & Pan

    zoompan="loop"
  • Blur

    blur="1200"
  • Pixelate

    pixelate
  • Grayscale

    grayscale
  • Tint

    tint="equalize:80:blue:blueviolet"
See all supported effects on github.com.

Cropping

  • Original

  • Thumbnail with Auto Gravity

    crop="thumb"
    gravity="auto"
  • Thumbnail with Faces Gravity

    crop="thumb"
    gravity="faces"
  • Thumbnail with Faces Gravity and Zoom

    crop="thumb"
    gravity="faces"
    zoom="0.5"

Placeholders

  • Blur

    placeholder="blur"
  • Grayscale

    placeholder="grayscale"
  • Color

    placeholder="color:blueviolet"

Image Overlays

  • Overlay Image by Public ID

    overlays={[{
      publicId: `images/earth`,
      position: {
        x: 10,
        y: 10,
        gravity: 'north_west',
      },
      effects: [
        {
          crop: 'fill',
          gravity: 'auto',
          width: 500,
          height: 500
        }
      ]
    }]}

Image Underlays

  • Background Removal with Underlay by Public ID

    removeBackground
    underlay="images/galaxy"

    Background removal requires the Cloudinary AI Background Removal Add-On

  • Background Removal with Multiple Underlays

    removeBackground
    underlays={[
      {
        publicId: 'images/galaxy',
        width: 480,
        height: 600,
        crop: 'fill',
        position: {
          gravity: 'north_west'
        }
      },
      {
        publicId: 'images/mountain',
        width: 480,
        height: 600,
        crop: 'fill',
        position: {
          gravity: 'south_east'
        }
      },
    ]}

    Background removal requires the Cloudinary AI Background Removal Add-On

Text Overlays

  • Text Overlay with text prop

    text="Cool Beans"
  • Text Overlay with text string

    overlays={[{
      text: 'Cool Beans'
    }]}
  • Text Overlay with overlay configuration

    overlays={[{
      width: 2670 - 20,
      crop: 'fit',
      position: {
        x: 10,
        y: 10,
        gravity: 'north_west',
      },
      text: {
        color: 'blueviolet',
        fontFamily: 'Source Sans Pro',
        fontSize: 160,
        fontWeight: 'bold',
        textDecoration: 'underline',
        letterSpacing: 14,
        text: 'Cool Beans'
      }
    }]}

Other

  • Named Transformations

    transformations={[
      'next-cloudinary-named-transformation'
    ]}
  • Raw Transformations

    rawTransformations={[
      'e_blur:2000',
      'e_tint:100:0000FF:0p:FF1493:100p'
    ]}
Last updated on December 2, 2022