Image

Image is a built-in tool so users can add images to their designs. This tool is supported for both display modes: emails and web pages.

Enable / Disable

Image tool is enabled by default but you can choose to disable it.

unlayer.init({
  tools: {
    image: {
      enabled: false,
    },
  },
});

---

Default Values

Image tool comes with the following default values. You can choose to change any of these.

Property	Default Value
src	{ url: 'https://via.placeholder.com/500x100?text=IMAGE', width: 500, height: 100 }
textAlign	center
altText	Image
containerPadding	center

Here are a few examples on how to change these default values.

Source

unlayer.init({
  tools: {
    image: {
      properties: {
        src: {
          value: {
            url: 'https://via.placeholder.com/500x100?text=IMAGE',
            width: 500,
            height: 100,
          },
        },
      },
    },
  },
});

---

Alignment

unlayer.init({
  tools: {
    image: {
      properties: {
        textAlign: {
          value: 'center',
        },
      },
    },
  },
});

---

Alternate Text

unlayer.init({
  tools: {
    image: {
      properties: {
        altText: {
          value: 'Image',
        },
      },
    },
  },
});

---

Container Padding

unlayer.init({
  tools: {
    image: {
      properties: {
        containerPadding: {
          value: '10px',
        },
      },
    },
  },
});