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

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.