cupper-hugo-theme/content/patterns/media/including-images.md

+++ title = "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

{{% note %}} When you first make a copy of Infusion, Infusion's own logo will be included. You should replace this with your own company or project logo. {{% /note %}}

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 works for The Paciello Group" %}} {{% /figure %}} {{}}

This will output the following. Note the automatically incremented Figure number.

{{% figure caption="Steve Faulkner works for The Paciello Group" %}} {{% /figure %}}

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>