The image block provides the ability to add images to your emails.\nAside from all the regular block properties there are some properties specific\nfor images, such as the src\nproperty, that should be set to the url to the image you would like to show.\nAnother image specific property is alt,\nwhich is used to set the alternative text when for some reason the image is not displayed.
\nAll available properties of this block type are mentioned in the table below.
\n\nProperty | \nValue | \nDescription | \n
---|---|---|
type | \n\"image\" | \nProperty to identify the block as an image block. | \n
src | \nstring | \nThe url of the image. | \n
alt | \nstring | \nAlt description of image. Usually only visible when image is not loaded in the email. | \n
align | \nstring | \nTo which side should the image be aligned? default is left. | \n
background | \nstring | \nThe background settings for the image block. | \n
margin | \nmixed | \nMargins around the image. | \n
padding | \nmixed | \nWhitespace around the block, this whitespace will have a background | \n
visibility | \nblock | \nVisibility based on device, client and/or receiver. | \n
link | \nobject | \nObject with the link properties url , title and params . | \n
width | \nstring | \nOptional width of the image, default is 100% | \n
height | \nstring | \nOptional height of the image, default is not set (image is automatically scaled) | \n
img | \nobject | \nDirect access to the img tag, useful to set css and attributes | \n
a | \nobject | \nWhen the image is clickable, you can use this property to specify css and attributes for the HTML anchor. | \n
container | \nobject | \nAccess to the parent element. | \n
The following input JSON shows how to add an image to a document. This is\nthe basic usage, to only include an image with an extra \"alt\" tag:
\n{\n \"from\" : \"info@example.com\",\n \"subject\" : \"Email with a single image\",\n \"content\" : {\n \"blocks\" : [ {\n \"type\" : \"image\",\n \"src\" : \"https://responsiveemail.com/example.png\",\n \"alt\" : \"Example image\"\n } ]\n }\n}
It is possible to make the image clickable. You do this by providing the\nlink property. This can\neither be a string holding a URL, or an object with link properties.\nThe following example shows the input for an email with the two ways to add a link.
\n{\n \"from\" : \"info@example.com\",\n \"subject\" : \"Email with two images\",\n \"content\" : {\n \"blocks\" : [ {\n \"type\" : \"image\",\n \"src\" : \"https://responsiveemail.com/example1.png\",\n \"alt\" : \"Example image\",\n \"link\" : \"http://www.example.com\"\n }, {\n \"type\" : \"image\",\n \"src\" : \"https://responsiveemail.com/example2.png\",\n \"alt\" : \"Example image\",\n \"link\" : {\n \"url\" : \"http://www.example.com\",\n \"title\" : \"click here for more info\"\n }\n } ]\n }\n}
All the properties in the input JSON are turned into a HTML <img>
tag, and,\nif you add a link, also into a HTML <a>
tag. If you want to set custom\nattributes or custom CSS properties to these tags, you can do so by using the\nimg and a properties:
{\n \"from\" : \"info@example.com\",\n \"subject\" : \"Email with a single image\",\n \"content\" : {\n \"blocks\" : [ {\n \"type\" : \"image\",\n \"src\" : \"https://responsiveemail.com/example.png\",\n \"link\" : \"http://www.example.com\",\n \"img\" : {\n \"attributes\" : {\n \"border\" : \"1\",\n \"longdesc\" : \"a long story\"\n },\n \"css\" : {\n \"border-color\" : \"red\"\n }\n },\n \"a\": {\n \"attributes\" : {\n \"rel\" : \"nofollow\"\n },\n \"css\" : {\n \"margin-right\": \"10px\"\n }\n }\n } ]\n }\n}
The img
and a
properties are of course fully optional, and you normally do\nnot need them when working with images. Please also keep in mind that the property\nattributes and\nthe property css are\nadvanced properties and their use is not recommended.