Adding Text to an Image

You can add text on top of your image with text-based overlays.

Example

• CldImage

  <script>
    import { CldImage } from 'svelte-cloudinary';
  </script>
  
  <CldImage
    width="1335"
    height="891"
    src="images/sneakers"
    sizes="100vw"
    overlays={[{
      width: 2670 - 20,
      crop: 'fit',
      position: {
        x: 140,
        y: 140,
        angle: -20,
        gravity: 'south_east',
      },
      text: {
        color: 'blueviolet',
        fontFamily: 'Source Sans Pro',
        fontSize: 160,
        fontWeight: 'bold',
        textDecoration: 'underline',
        letterSpacing: 14,
        text: 'Cool Beans'
      }
    }]}
    alt="Sneakers with Cool Beans"
  />

• getCldImageUrl

Learn More

• CldImage
• getCldImageUrl