Figures and images

Figures and images

Figures

Figure directive

The figure directive will create new XHTML pages for each of the figures encountered in the Markdown, and add these new pages to the <type>.yml files automatically during build.

Without caption

Input

::: figure:figure-ID source:figure.jpg alt:"A short description"

With caption

Input

::: figure:figure-ID source:figure.jpg alt:"Image description"
:: Figure Caption.
::

Output (inline)

<div class="landscape figure-sm">
  <figure id="figure-ID">
    <a href="loi-1001.xhtml#_figure-ID">
      <img src="../images/figure.jpg" alt="Image description" />
    </a>
  </figure>
</div>

Output (figures page)

<div class="figure-lg">
  <figure id="figure-ID">
    <div class="img-wrap">
      <a href="001_chapter-one_figures.xhtml#ref_figure-ID">
        <img class="landscape" alt="Image description" src="../images/figure.jpg" style="max-width: 100%;"/>
      </a>
      <div class="figcaption" style="max-width: 100%;">
        <p class="small"><em>Figure Caption.</em></p>
      </div>
    </div>
  </figure>
</div>

Figure-inline directive

The figure-inline will render a full-size image directly in the HTML without creating a link to the figures section of the publication.

Input

::: figure-inline:figure-ID source:figure.jpg
:: Figure Caption.
::

Output

<div class="figure__large figure__inline">
  <figure id="figure-ID">
    <div class="img-wrap" style="width: 70%; margin: 0 auto;">
      <img class="portrait" alt="figure.jpg" src="../images/figure.jpg" style="width: 100%; max-width: 100%; height: auto;" />
      <div class="figcaption" style="width: 100%; max-width: 100%; height: auto;">
        <p class="small">Figure Caption.</p>
      </div>
    </div>
  </figure>
</div>

Full-bleed images

A full-bleed image stretches the entire width and height of the browser for the Reader and Web builds, can be added by adding the figure__fullbleed class to the image.

The default-theme-serif and default-theme-sans themes contain CSS to style full-bleed images in the Reader and Web builds. Custom CSS can be added to treat full-bleed images for the remaining builds.

Input

::: figure-inline:figure-ID source:figure.jpg classes:figure__fullbleed

Output

<div class="figure__large figure__inline figure__fullbleed">
  <figure id="figure-ID">
    <div class="img-wrap" style="width: 70%; margin: 0 auto;">
      <img class="portrait" alt="figure.jpg" src="../images/figure.jpg" style="width: 100%; max-width: 100%; height: auto;" />
      <div class="figcaption" style="width: 100%; max-width: 100%; height: auto;">
        <p class="small"></p>
      </div>
    </div>
  </figure>
</div>

Including images via Markdown

If you don't wish to use the figure or figure-inline directive, you can use the default Markdown syntax. Images must be added to the project/_images directory.

Input

![Figure Title](../images/figure.jpg)

Output

<p>
  <img src="../images/figure.jpg" alt="Figure Title" />
</p>