Including images
From time to time, you’ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content
folder you’ll be mostly working in.
├── content
└── static
└── images
├── logo.png
└── menu-button.gif
The path to the /images
folder should begin with a forward slash, so include that when referencing images in your markdown.
![Global Megacorp Ltd](/images/logo.png)
Figures
Sometimes you will want to include a caption with your illustration. This is what the <figure>
and <figcaption>
elements are for. However, Infusion doesn’t ask you to code all that manually. A special shortcode is provided, which takes a caption
parameter. Note that the image markdown is provided between the opening and closing shortcode tags, and that you can use markdown syntax in the caption
value.
{{% figure caption="[Steve Faulkner](https://twitter.com/stevefaulkner) works for The Paciello Group" %}}
![Steve Faulkner's face](/images/steve_faulkner.jpg)
{{% /figure %}}
This will output the following. Note the automatically incremented Figure number.
The generated markup includes special provisions for assistive technology support:
<figure role="group" aria-describedby="U3RldmUgRmF1bGtuZXIg">
<p>
<img src="/images/steve_faulkner.jpg" alt="Steve Faulkner's face">
</p>
<figcaption id="U3RldmUgRmF1bGtuZXIg">
<a href="https://twitter.com/stevefaulkner">Steve Faulkner</a> works for The Paciello Group
</figcaption>
</figure>