Images
There are two AsciiDoc image macro types, block and inline.
Block image macro
A block image is displayed as a discrete element, i.e., on its own line, in a document.
A block image is designated by image
macro name and followed by two colons (::
)
It’s preceded by a blank line, entered on a line by itself, and then followed by blank line.
Content in document.
image::sunset.jpg[] (1) (2)
Content in document
1 | To insert a block image, type the image macro name directly followed by two colons (:: ). |
2 | After the colons, enter the image file target.
Type a pair of square brackets ([] ) directly after the target to complete the macro. |
The result of Example 1 is displayed below.
You can specify a comma-separated list of optional attributes inside the square brackets or leave them empty. If you want to specify alt text, enter it inside the square brackets.
image::sunset.jpg[Sunset]
You can also give the image an id, title, set its dimensions and make it a link.
[#img-sunset] (1)
.A mountain sunset (2)
[link=https://www.flickr.com/photos/javh/5448336655] (3)
image::sunset.jpg[Sunset,200,100] (4) (5)
1 | Assigns an ID to the block. |
2 | Defines the title of the block image, which gets displayed underneath the image when rendered. |
3 | link makes the image a link (this can also be defined inside the attribute list of the block macro) |
4 | The first positional attribute, Sunset, is the image’s alt text. |
5 | The second and third positional attributes define the width and height, respectively. |
The result of Example 3 is displayed below.
Inline image macro
An inline image is displayed in the flow of another element, such as a paragraph or sidebar block.
The inline image macro is almost identical to the block image macro, except its macro name is followed by a single colon (:
).
Click image:play.png[] to get the party started. (1)
Click image:pause.png[title="Pause"] when you need a break. (2)
1 | In the flow of an element, enter the macro name and a single colon (image: ), followed by the image target.
Complete the macro with a pair of square brackets ([] ). |
2 | You can specify a comma-separated list of attributes inside the square brackets or leave them empty. |
The result of Example 4 is displayed below.
Click to get the party started.
Click when you need a break.
For inline images, the optional title is displayed as a tooltip.