Basic principles

Images are an essential comunication tool and as such, Ink provides a few simple styling and functional solutions to handle them in a semantic fashion.

• This class must be used for the images to work.

We chose to make use of HTML5 tags, so the markup structure for our image element is:

Structure

<figure>
  <img src="/assets/img/examples/sky.jpg" alt="example image">
</figure>

Image captions

• Css classes:
• over-top
• over-bottom
• dark

Captions are added by inserting a figcaption element into the basic markup structure. Place it before of after the img element tag according to where you want your caption to appear.

Demo

Code

<figure class="ink-image">
  <figcaption>
    This caption is placed before the image
  </figcaption>
  <img src="/assets/img/examples/park.jpg">
</figure>

Demo

Code

<figure class="ink-image">
  <img src="/assets/img/examples/sky.jpg">
  <figcaption>
    This caption is placed after the image.
  </figcaption>
</figure>

Adding the dark CSS class to the <figcaption> element will set an alternative dark caption theme:

<figure class="ink-image">
  <img src="/assets/img/examples/field.jpg">
  <figcaption class="dark">
    This is a dark caption.
  </figcaption>
</figure>

Captions can also be placed over the image, and aligned either to the top or the bottom by adding the over-top or over-bottom CSS classes to the <figcaption> element:

<figure class="ink-image bottom-space">
  <img src="/assets/img/examples/field.jpg" class="imagequery">
  <figcaption class="over-top">
    This a caption over the top of the image.
  </figcaption>
</figure>

<figure class="ink-image bottom-space">
  <img src="/assets/img/examples/field.jpg" class="imagequery">
  <figcaption class="over-bottom">
    This a caption over the top of the image.
  </figcaption>
</figure>

Targeting multiple devices

When dealing with multiple devices, one major concern should be asset size optimization. So Ink gives you a way to serve images with the appropriate size to your client devices.

This is done with our Ink.UI.ImageQuery JavaScript component, that'll detect the screen size and serve a larger version of the image if required.

By default we'll load the smallest image to save quota for mobile phones and tablets.

Javascript

<script>
  var imagequery = new Ink.UI.ImageQuery('.imagequery', {
    src: '/assets/img/examples/{:label}/{:file}',
    queries: [
      {
          label: 'tiny',
          width: 320
      },
      {
          label: 'medium',
          width: 960
      },
      {
          label: 'large',
          width: 1200
      },
      {
          label: 'xlarge',
          width: 1400
      }
    ]
  });
</script>

In the script above the src property sets the image base path. It can be relative or absolute. The rest of the url is a template that translates into properties of the queries array.

In the example above {:label} will be a folder under the base path, and {:file} is the filename, which in this case defaults to the original file name.

Ink.UI.ImageQuery will then look at the queries.width property and the device screen width and decide if a larger image should be served to the device by rewriting the src attribute.