Images

Prerequisites

This image helper template takes care of providing the right path and markup for images. To make this work efficiently, specify the GitHub repository in the page header, for example:

github:
  repository: w3c/wai-repo-name
  path: content/index.md

Put images always into the /content-images/wai-repo-name/ directory (with wai-repo-name being the actual repository of the resource). This template cannot be cached.

Usage

{% include image.html src="picture.jpg" alt="alternative text" class="someclass" %}

Attributes

• src/srcset: Use like in HTML, images can just be specified as the image name (including extension) but must be placed into the /content-image/wai-repo-name/ directory. The sizes attribute can also be used like in HTML.

• alt: Alternative Text

• class: One of the size classes, and one or more of the helper classes.
  • Size classes:
    • tiny: 60px
    • mini : 90px
    • small : 120px
    • normal: 240px
    • large : 480px
  • Helper classes:
    • video: rounded corners
    • left/right: Floating to the beginning/end of the reading direction
• style: Custom style elements.

Examples

Sizes

Video

Float “left”

Float “right”

clearing paragraph