This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.

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
    • icon: 1em
  • 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

alternative text alternative text alternative text alternative text alternative text alternative text

Video

alternative text alternative text alternative text alternative text alternative text

Float “left”

alternative text alternative text alternative text alternative text alternative text

Float “right”

alternative text alternative text alternative text alternative text alternative text

Long description

Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.