Image block

The image block provides the ability to add images to your emails. Aside from all the regular block properties there are some properties specific for images, such as the src property, that should be set to the url to the image you would like to show. Another image specific property is alt, which is used to set the alternative text when for some reason the image is not displayed.

All available properties of this block type are mentioned in the table below.

Image block properties

Property Value Description
type "image" Property to identify the block as an image block.
src string The url of the image.
alt string Alt description of image. Usually only visible when image is not loaded in the email.
align string To which side should the image be aligned? default is left.
background string The background settings for the image block.
margin mixed Margins around the image.
padding mixed Whitespace around the block, this whitespace will have a background
visibility block Visibility based on device, client and/or receiver.
link object Object with the link properties url, title and params.
width string Optional width of the image, default is 100%
height string Optional height of the image, default is not set (image is automatically scaled)
img object Direct access to the img tag, useful to set css and attributes
a object When the image is clickable, you can use this property to specify css and attributes for the HTML anchor.
container object Access to the parent element.

Example use

The following input JSON shows how to add an image to a document. This is the basic usage, to only include an image with an extra "alt" tag:

{
    "from" : "info@example.com",
    "subject" : "Email with a single image",
    "content" : {
        "blocks" : [ {
            "type" : "image",
            "src" : "https://responsiveemail.com/example.png",
            "alt" : "Example image"
        } ]
    }
}

Clickable images

It is possible to make the image clickable. You do this by providing the link property. This can either be a string holding a URL, or an object with link properties. The following example shows the input for an email with the two ways to add a link.

{
    "from" : "info@example.com",
    "subject" : "Email with two images",
    "content" : {
        "blocks" : [ {
            "type" : "image",
            "src" : "https://responsiveemail.com/example1.png",
            "alt" : "Example image",
            "link" : "http://www.example.com"
        }, {
            "type" : "image",
            "src" : "https://responsiveemail.com/example2.png",
            "alt" : "Example image",
            "link" : {
                "url" : "http://www.example.com",
                "title" : "click here for more info"
            }
        } ]
    }
}

Direct access to the <img> and <a> tags

All the properties in the input JSON are turned into a HTML <img> tag, and, if you add a link, also into a HTML <a> tag. If you want to set custom attributes or custom CSS properties to these tags, you can do so by using the img and a properties:

{
    "from" : "info@example.com",
    "subject" : "Email with a single image",
    "content" : {
        "blocks" : [ {
            "type" : "image",
            "src" : "https://responsiveemail.com/example.png",
            "link" : "http://www.example.com",
            "img" : {
                "attributes" : {
                    "border" : "1",
                    "longdesc" : "a long story"
                },
                "css" : {
                    "border-color" : "red"
                }
            },
            "a": {
                "attributes" : {
                    "rel" : "nofollow"
                },
                "css" : {
                    "margin-right": "10px"
                }
            }
        } ]
    }
}

The img and a properties are of course fully optional, and you normally do not need them when working with images. Please also keep in mind that the property attributes and the property css are advanced properties and their use is not recommended.

Found a typo?

You can find this documentation page on GitHub.
Propose a change