Images

Simple Image

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="/__shared/#" alt="TRU">
<p>This time Alice waited patiently until it chose to speak again...</p>

Simple Image Float Right

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="/__shared/#" alt="TRU">
<p>This time Alice waited patiently until it chose to speak again...</p>

Simple Image Float Left

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="/__shared/#" alt="TRU">
<p>This time Alice waited patiently until it chose to speak again...</p>

Image Captions

<div class="frame greybg-pale greyborder medium-5 columns">
       <img src="/__shared/#" alt="TRU Library">
       <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

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="/__shared/#" alt="Old Main Campus">
       <div class="caption">
             <h5>This is a right-floated image of campus</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

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="/__shared/#" alt="Old Main Campus">
       <div class="caption">
             <h5>This is a left-floated image of campus</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 a small image

<div class="row">
<div class="large-2 columns">
<img src="/__shared/assets/kamloops-university-silently47684.jpg" alt="">
</div>
</div>

Example of a big image

<div class="row">
<div class="large-4 columns">
<img src="/__shared/assets/kamloops-university-silently47684.jpg" alt="">
</div>
</div>

Rounded image

Use the .rounded class. The image dimensions must be square. Non-square images will come up in an oval.

<img src="/__shared/AssetFactory.aspx?did=47684" alt="" class="rounded">