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"
  longdesc="/WAI/fundamentals/components/examples/"
%}

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
  • medium: 360px
  • large: 480px
• Helper classes:
  • video: rounded corners
  • left/right: Floating to the beginning/end of the reading direction

style

Custom style elements.

longdesc

(optional) URL to a page that contains a long description of the image.
If added, a “Long description of image” link will be displayed underneath the image.

Examples

Sizes

Video

Float “left”

Float “right”

Long description

Long description of image