Image

Type: image

Editable: false

Tags: figure, div, p

If the figure, div, or p tags contain an image with the img tag and nothing else, so that tag will become a image block.

<p><img ...></p>
<div><img ...></div>
<figure>
    <img ...>
    <figcaption></figcaption>
</figure>

If the image is surrounded by a link, it will also work.

<p><a href=""><img ...></a></p>

properties #

The image block has the following properties:

• alt (image alt text)
• link (url of image link)
• target (true or false, image link target)
• caption (caption text if image inside figure tag)

You can get/set properties with getData/setData methods.

var instance = this.app.block.get();
var data = instance.getData();

instance.setData({
    alt: 'alt-text',
    link: 'link-url'
});

getImage #

Returns the image DOM element.

var instance = this.app.block.get();
var $img = instance.getImage();

getSrc #

Returns the image url.

var instance = this.app.block.get();
var src = instance.getSrc();

getAlt #

Returns the image alternative text.

var instance = this.app.block.get();
var alt = instance.getAlt();

getLink #

Returns the image link DOM element.

var instance = this.app.block.get();
var $link = instance.getLink();

getLinkUrl #

Returns the image link url if it exists.

var instance = this.app.block.get();
var url = instance.getLinkUrl();

setImage #

Sets src and optional ID to the image.

var data = {
    url: 'image-url.jpg',
    id: 'image-id' // optional
};

var instance = this.app.block.get();
instance.setImage(data);

setAlt #

Sets alternative text to the image.

var instance = this.app.block.get();
instance.setAlt('alt-text');

setLinkUrl #

Sets link to the image block.

var instance = this.app.block.get();
instance.setLinkUrl('link-url');

removeLink #

Removes link from the image block.

var instance = this.app.block.get();
instance.removeLink();