Language selection

Search

Images

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use images to visually represent a noun (person, place, thing) or a verb (action). An image is a static two dimensional visual artifact that is a type of non-text content. It is classified as decorative, simple, complex, or an image of text.

Design and coding

Basic use

Shapes

Use to easily modify the shape of an <img> (image) without the use of editing software.

Appearance

Default:

A generic square placeholder image

Rounded:

A generic square placeholder with rounded corners

Circle:

A generic square placeholder image where only the portion within the circle circumscribed about said square is visible

Thumbnail (hyperlinked):

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
Correct use

Compliance point(s):

  • Use the styles .img-rounded, .img-circle and .img-thumbnail consistently within a site
  • Apply .img-thumbnail only to hyperlinked images, as the border on it suggests it is a link
  • Understand and implement the related supporting principles
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use preshaped images; only style images with CSS
Code
// Default:
<img src="..." alt="" />

// Rounded:
<img src="..." class="img-rounded" alt="" />

// Circle:
<img src="..." class="circle" alt="" />

// Thumbnail (hyperlinked):
<a href="#"><img src="..." class="img-thumbnail" alt="" /></a>

Responsive images

Use to make larger images scale properly, and never exceed the width of the parent container. With responsive images, max-width: 100%; and height: auto; are auto-applied with the use of .img-responsive.

Appearance

Image is too large for the available space:

Generic placeholder image

Same image is now responsive, and fits the parent container:

Generic placeholder image
Correct use

Compliance point(s):

  • Use .img-responsive to ensure images have responsive behavior, and never become larger than their parent container
  • Check images in different resolutions, as images may be too wide for a container in some viewports, but not others
  • Understand and implement the related supporting principles
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not apply to images that become blurred, overstretched or pixelated in the different resolutions. Use a proper image
Code
<img src="..." class="img-responsive" alt="" />

Stretching images

Use to stretch a smaller image to the width of the container. Ensure the image is still clear and easy to see in the larger resolutions.

Appearance

Image (100x25) is too small and blurry:

Generic placeholder image

Image (200x50) is still too small for the space:

Generic placeholder image

Stretched image (100x25) is blurry:

Generic placeholder image

Stretched, clear image (200x50) fits space:

A generic square placeholder image
Correct use

Compliance point(s):

  • Use .full-width to stretch an image to fill the available space
  • Ensure stretched images are clear and easy to see in all viewports
  • Ensure images are not too wide for the container in any viewport
  • Understand and implement the related supporting principles
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not apply to images that become blurred, overstretched or pixilated in the different resolutions. Use a proper image
Code
<img src="..." class="full-width" alt="" />

Enhanced use

Thumbnail tiles

Use to add any kind of content like headings, paragraphs, or buttons into a thumbnail, to create a thumbnail tile effect.

Appearance
Generic placeholder thumbnail

Title (caption)

Content

Correct use

Compliance point(s):

  • Place the content within a <figure> tag
  • Style with .thumbnail
  • Use a styled caption <figcaption class="caption">
  • Apply only to hyperlinked images, as the border on it suggests it is a link
  • Use to create a tile of content that includes a featured image
  • Understand and implement the related supporting principles
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not apply to images that are not hyperlinked
Code
// Thumbnail:
<figure class="thumbnail">
  <a href="#"><img src="https://placehold.it/350x200" alt="" /></a>

// Title (caption):
  <figcaption class="caption">
   <h4>...</h4>
   <p>...</p>

// Content and inline buttons:
   <ul class="list-inline">
    <li><a href="#" class="btn btn-primary" role="button">...</a></li>
    <li><a href="#" class="btn btn-default" role="button">...</a></li>
   </ul>
  </figcaption>
</figure>

Media objects

Use to layer text and images for media content like blog comments, tweets, and so forth.

Appearance
Default:
Generic placeholder image
Media heading

Content, image pulls left

Generic placeholder image
Media heading

Content, image pulls right

As lists:
  • Generic placeholder image
    Heading

    Content, image pulls left

  • Generic placeholder image
    Heading

    Content, image pulls left

  • Generic placeholder image
    Heading

    Content, image pulls right

  • Generic placeholder image
    Heading

    Content, image pulls right

Correct use

Compliance point(s):

  • Use .media, .media-object, .media-body, .media-heading, .media-list with content that requires an image along with the text-based content
  • Use .pull-left or .pull-right to position the image
  • Ensure the image hyperlinks to the media source
  • Understand and implement the related supporting principles
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use for anything other than media-related content
Code
// Default, image pulls left:
<section class="media">
  <a class="pull-left" href="#">
   <img class="media-object" src="..." alt="..." />
  </a>
  <div class="media-body">
   <h5 class="media-heading">...</h5>
   <p>...</p>
  </div>
</section>

// Default, image pulls right:
<section class="media">
  <a class="pull-right" href="#">
   <img class="media-object" src="..." alt="..." />
  </a>
  <div class="media-body">
   <h5 class="media-heading">...</h5>
   <p>...</p>
  </div>
</section>

// As lists, image pulls left:
<ul class="media-list">
   <li class="media"> <a class="pull-left" href="#"><img class="media-object" src="..." alt="" /></a>
    <div class="media-body">
     <h5 class="media-heading">...</h5>
     <p>...</p>
    </div>
   </li>
</ul>

// As lists, image pulls right:
<ul class="media-list">
   <li class="media"><a class="pull-right" href="#"><img class="media-object" src="..." alt="" /></a>
   <div class="media-body">
    <h5 class="media-heading">...</h5>
    <p>...</p>
   </div>
  </li>
</ul>

Add-on features

Additional add-on features and behaviours are available.

Supporting principles

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified: