UI ELEMENTS
Thousands of words, made easy
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.
Class name | Description |
---|---|
ink-image |
The image root class. |
over-top |
Places the caption over the top of the image. |
over-bottom |
Places the caption over the bottom of the image. |
dark |
Applies a white text on a dark background theme to the caption. |
imagequery |
Identifies images that will be handled by the Ink.UI.ImageQuery component. |
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>
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>
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.