Skip to content

Text Overlays

You can easily add text on top of your image with text-based overlays using the CldImage component.

Example

Sneakers with text With Style

CldImage
getCldImageUrl

import { CldImage } from 'astro-cloudinary';

<CldImage
  width="1335"
  height="891"
  src="images/sneakers"
  sizes="100vw"
  overlays={[
    {
      position: {
        x: 150,
        y: 125,
        angle: -20,
        gravity: 'south_east',
      },
      text: {
        color: 'magenta',
        fontFamily: 'Source Sans Pro',
        fontSize: 150,
        fontWeight: 'black',
        text: 'WITH STYLE'
      }
    },
    {
      position: {
        x: 140,
        y: 140,
        angle: -20,
        gravity: 'south_east',
      },
      text: {
        color: 'white',
        fontFamily: 'Source Sans Pro',
        fontSize: 150,
        fontWeight: 'black',
        text: 'WITH STYLE'
      }
    },
  ]}
  alt="Sneakers with text With Style"
/>

import { getCldImageUrl } from 'astro-cloudinary/helpers';

getCldImageUrl({
  width: 1335,
  height: 891,
  src: 'images/sneakers',
  overlays: [
    {
      position: {
        x: 150,
        y: 125,
        angle: -20,
        gravity: 'south_east',
      },
      text: {
        color: 'magenta',
        fontFamily: 'Source Sans Pro',
        fontSize: 150,
        fontWeight: 'black',
        text: 'WITH STYLE'
      }
    },
    {
      position: {
        x: 140,
        y: 140,
        angle: -20,
        gravity: 'south_east',
      },
      text: {
        color: 'white',
        fontFamily: 'Source Sans Pro',
        fontSize: 150,
        fontWeight: 'black',
        text: 'WITH STYLE'
      }
    },
  ]
})

Learn More