Skip to content

Figure

Jump to bottom
Filipe Fortes edited this page Feb 7, 2011 · 6 revisions

Figures

Figures provide a way to display content outside of the main flow, like an image that spans across columns.

Figures also provide a method for specifying multiple versions of content, which are filtered in based on the screen size and capabilities of browser. For example, imagine you have three different sizes for images: thumbnail, one column, and two column. Which image you show depends on how large the browser window is, and whether the design can accomodate that size image.

Treesaver uses HTML5 custom data attributes to add metadata to figure content. The data-sizes property is used to distinguish between content payloads. The markup below shows a figure with two content payloads:

  <figure>
    <div data-sizes="threecolumn twocolumn">
      <img src="large.jpg" />
    </div>
    <div data-sizes="thumbnail">
      <img src="thumb.jpg" />
    </div>
  </figure>

The data-sizes attribute specifies one or more size names, separated by spaces. These size names are then used by template designers to select between content payloads.

Additionally, you can supply content based upon a browsers capabilities. The data-requires property is a space-delimited list of capabilities that are required by a figure payload. For example, the following markup shows different content depending Flash supported:

  <figure>
    <div data-sizes="twocolumn" data-requires="flash">
      <!-- Flash embed -->
    </div>
    <div data-sizes="twocolumn">
      <!-- Non-flash content -->
    </div>
  </figure>

Browsers that support flash will use the first element for the twocolumn payload, while all other browsers will use the second. Treesaver always uses the first qualifying payload for a given name, ignoring all subsequent payloads that use the same name.

Fallback content

A figure can specify fallback content that is used whenever there is not not enough space for a figure. This is done either by specifying fallback as one of the data-sizes, or by not specifying the data-size property at all.

  <figure>
    <div data-sizes="masthead">
      <!-- content -->
    </div>
    <div data-sizes="fallback">
      <!-- backup content in case others did not fit -->
    </div>
  </figure>

Cloaked Images

Imagine what happens when a browser that does not support Treesaver parses the following HTML:

  <figure>
    <div data-sizes="huge">
      <img src="huge.jpg" />
    </div>
    <div data-sizes="fallback">
      <img src="tiny.jpg" />
    </div>
  </figure>

The browser end up downloading both huge.jpg and tiny.jpg, which is undesirable for both users and bandwidth costs. In order to make sure legacy browsers do not end up downloading multiple versions of each image, you can hide the content from older browsers as follows:

  <figure>
    <div hidden class="hidden" data-sizes="huge">
      <img data-src="huge.jpg" />
    </div>
    <div hidden class="hidden" data-sizes="fallback">
      <img src="tiny.jpg" />
    </div>
  </figure>

Instead of using the src property, use data-src on images. Treesaver will automatically convert the data-src attribute to src when displaying the image, and legacy browsers will not attempt to download the image. It is also a good idea to set the hidden attribute, as well as class=hidden in order to hide the elements via CSS. Both are removed when used in a Treesaver layout.

Providing size hints

For performance reasons, Treesaver does not fully-compute the layout of each content payload in a figure. This means that occasionally, a page will not have enough space to fit the figure content, leading to the figure being hidden or clipped.

In order to avoid this situation, figures can specify a sizing hint: an estimate of the minimum dimensions that will be required by the content. Some examples of sizing hints:

  • Image and Caption: The dimensions of the image, plus some extra space for the image caption, if present
  • Video: The size of the video, plus any UI controls
  • Pullquote: The height of the typical number of lines in the pullquote

To specify a sizing hint use the data-minWidth and data-minHeight attributes. Here is an example:

  <figure>
    <div data-sizes="huge" data-minWidth="600" data-minHeight="340">
      <img data-src="huge.jpg" width="600" height="300" />
      <p class="caption">My cat</p>
    </div>
    <div data-sizes="fallback">
      <img src="tiny.jpg" width="200" height="100" />
      <p class="caption">My cat</p>
    </div>
  </figure>

Figure Flags

Figure behavior can be modified by specifying one or more of the following flags on the figure element via the class attribute:

  • zoomable: Content can be zoomed via LightBox
  • required: The contents of the Figure are not optional, meaning the article is not considered complete until this Figure has been displayed (or attempted, in the case of being too large for the page)
Clone this wiki locally