Thompson Rivers University
Thompson Rivers University

Images

Simple Image

Nature

This time Alice waited patiently until it chose to speak again. In a minute or two the Caterpillar took the hookah out of its mouth and yawned once or twice, and shook itself. Then it got down off the mushroom, and crawled away in the grass, merely remarking as it went, 'One side will make you grow taller, and the other side will make you grow shorter.'

<img src="https://placeimg.com/320/240/nature" alt="Nature">
<p>This time Alice waited patiently until it chose to speak again...</p>

Simple Image Float Right

Nature

This time Alice waited patiently until it chose to speak again. In a minute or two the Caterpillar took the hookah out of its mouth and yawned once or twice, and shook itself. Then it got down off the mushroom, and crawled away in the grass, merely remarking as it went, 'One side will make you grow taller, and the other side will make you grow shorter.'

<img class="right" src="https://placeimg.com/320/240/nature" alt="Nature">
<p>This time Alice waited patiently until it chose to speak again...</p>

Simple Image Float Left

Nature

This time Alice waited patiently until it chose to speak again. In a minute or two the Caterpillar took the hookah out of its mouth and yawned once or twice, and shook itself. Then it got down off the mushroom, and crawled away in the grass, merely remarking as it went, 'One side will make you grow taller, and the other side will make you grow shorter.'

<img class="left" src="https://placeimg.com/320/240/nature" alt="Nature">
<p>This time Alice waited patiently until it chose to speak again...</p>

Image Captions

Nature
This is an image caption title

Adjust the class "large-10" up or down (max 12) depending on the size of your image!

Just like with buttons, you can choose the background colour of the caption - use creambg, greybg-pale, tealbg-pale or powderbg-pale.

Add an appropriately-coloured border with greyborder, tealborder or blueborder.

<div class="frame greybg-pale greyborder large-10 medium-9 columns">
<img src="https://placeimg.com/960/720/nature" alt="Nature">
<div class="caption">
<h5>This is an image caption title</h5>
<p>Adjust the class "large-10" up or down (max 12) depending on the size of your image!</p>
</div>
</div>

Floating Images and Captions to the Right

Nature
This is a right-floated image of nature

Use the class 'right' on the surrounding div.

This time Alice waited patiently until it chose to speak again. In a minute or two the Caterpillar took the hookah out of its mouth and yawned once or twice, and shook itself. Then it got down off the mushroom, and crawled away in the grass, merely remarking as it went, 'One side will make you grow taller, and the other side will make you grow shorter.'

<div class="frame tealbg-pale tealborder large-5 columns right">
<img src="https://placeimg.com/640/480/nature" alt="Nature">
<div class="caption">
<h5>This is a right-floated image of nature</h5>
<p>Use the class 'right' on the surrounding div.</p>
</div>
</div>
<p>This time Alice waited patiently until it chose to speak again...</p>

Floating Images and Captions to the Left

Nature
This is a left-floated image of nature

Use the class 'left' on the surrounding div.

This time Alice waited patiently until it chose to speak again. In a minute or two the Caterpillar took the hookah out of its mouth and yawned once or twice, and shook itself. Then it got down off the mushroom, and crawled away in the grass, merely remarking as it went, 'One side will make you grow taller, and the other side will make you grow shorter.'

<div class="frame tealbg-pale tealborder large-5 columns left">
<img src="https://placeimg.com/640/480/nature" alt="Nature">
<div class="caption">
<h5>This is a left-floated image of nature</h5>
<p>Use the class 'left' on the surrounding div.</p>
</div>
</div>
<p>This time Alice waited patiently until it chose to speak again...</p>

Image sizes

Images will automagically shrink to fit into the container they have been placed. On mobile view, images will expand (up to their max width) to take up 100% of the page - this means images sizes are Adding width and height attributes to the images will not affect how images are displayed.

Example of Big Images

Example of Small Images

Image best practices

When inserting images, please resize them before they are uploaded.

An easy-to-remember rule of thumb is 1200/120; an image should be 1200px on the long edge and no larger than 120kb in size. To achieve this, please download and use Fotor (may require administrator privileges to install):

Alternatively, on Windows you can use Microsoft Office Picture Editor or Photos on OS X.