Within Content

As a rule of thumb images must be at least double the size required. This enables support for all pixel densities on devices ranging from Retina displayed MacBook Pro's to smartphones. The actual size of the image is controlled by the framework stylesheet. PLEASE NOTE: This doesn't mean you should upload 4000x2400px images because its over double the size required. Its a balancing act between quality and size, you need to seriously consider reducing the size / quality if it is over 300kb in file size.

Finding Dimensions

To obtain the required dimensions of an image for use within an area of a page use a tool such as "Chrome Developer Tools". When using Chrome press F12 to load the console, click on the magnifier (top left) and hover over the page section you are interested in. The element will change colour when you hover over it and display its Width x Height below. Use the width as a guide for your image size.

Example

As an example the following image is displayed as 333x166px in size within the browser. However the original image is 800x400px and the framework resizes it to the col-md-6 column width:

 <div class="row">
   <div class="col-md-6"> <img src="http://placehold.it/800x400" border="0" /> </div>
 </div>

Styles

The framework embeds multiple styles for images which consists of .left and .right classes used in conjunction with .small, .medium and .large.

Example

The following paragraphs have 3 images. These images use the classes above to style them as diplayed below:

<img src="http://placehold.it/800x400" border="0" class="left small" /> 

<img src="http://placehold.it/800x400" border="0" class="right medium" /> 

<img src="http://placehold.it/800x400" border="0" class="left large" /> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac libero dolor. Proin massa nibh, sagittis vel aliquet at, scelerisque eget ante. Quisque molestie molestie faucibus. Vestibulum orci turpis, malesuada a lectus sed, vestibulum pulvinar velit. In hac habitasse platea dictumst. Mauris bibendum pharetra ex non porta. Nunc a quam vitae nunc cursus egestas sit amet vitae risus. Morbi lacinia nunc eget sem dapibus, sagittis sagittis mi volutpat. Etiam non est massa. Donec accumsan gravida fermentum. Nam ullamcorper lacus eget justo pharetra, sit amet tincidunt leo ultricies. Vestibulum luctus faucibus blandit. Etiam et euismod neque. Nulla facilisi. Nunc egestas consectetur rutrum.

Fusce malesuada lobortis justo eu volutpat. Phasellus volutpat dolor et dui pellentesque congue vitae euismod nunc. Quisque finibus ligula purus, nec malesuada massa semper nec. Donec pretium nec lorem sit amet dapibus. Sed efficitur nisi sit amet odio dictum sodales sit amet vel erat. Nulla cursus diam quam. Suspendisse quam orci, interdum ut sem non, commodo malesuada leo. Integer consectetur velit a purus elementum finibus. Proin laoreet non nisl sagittis vehicula. Mauris vitae justo lectus. Vestibulum vulputate posuere elit eu mollis. Pellentesque vehicula quam dui, commodo viverra mi dignissim non. Nunc consequat, tellus at ornare pellentesque, erat nunc maximus augue, ac mollis odio metus ut diam. Nullam tristique enim non lacus venenatis pellentesque. Morbi hendrerit ipsum urna, ac tristique augue imperdiet vulputate.

Integer non justo at purus cursus laoreet in sit amet lacus. Nullam varius vestibulum ligula ut mattis. Cras aliquet semper ex vitae egestas. Nunc risus nunc, blandit in velit sed, sodales viverra magna. Nunc purus urna, viverra vel eleifend in, sodales ac erat. Etiam in nisi non nibh ullamcorper luctus et vel purus. Quisque vehicula sit amet tortor eu laoreet.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse viverra quam eget velit ullamcorper suscipit non a enim. Sed enim mi, sagittis at massa ac, tincidunt faucibus neque. Aenean pharetra, velit vitae dictum sodales, quam ex placerat enim, ut consectetur eros metus et quam. Sed vitae posuere lacus. Proin et porttitor orci. Suspendisse fermentum diam vitae augue tincidunt, eget dapibus lectus congue. Praesent blandit eu enim eu auctor.

Articles

News and Events pages that use the article core are very important due to their integration of metadata (Open Graph and Twitter Cards). Due to this there are some limitations on the main header image for articles.

Header images must be called banner.jpg (this is usually created automatically by the system on page creation) and sized 1800x500px.

Large banner

Large banner template allows for an image overlay with a call to action to be placed over the header the image. Images for this template are slightly larger than average to allow for additional content to be placed over them.

Background images used on this type of template must be 1700x1100px

Short banner

Short banner template is a veriantion of the above suitable to be used for standard landing pages which don't require an overlay with a call to action.

Background images used on this type of template must be 1700x650px

Banner with flexible boxes

A variantion of short banner with a dark gradient over the top banner.

Background images used on this type of template must be 1700x650px

View banner with flexible boxes example

Rounded images

Class .rounded will render circular images

<img src="http://placehold.it/350x350" border="0" class="rounded" />