Images

Images should be added to a page using the Image snippet.
The image will align to the right by default. The image is 450px wide by default.
To replace the placeholder image of the Harper logo, click on the image. Then click on the shaded Insert/Edit Image icon in the toolbar.
Navigate to the image you want to appear and insert it to the page.
Update the image alt text, providing a short description of the visual content of the image.
Leave the Image title field blank. Title attributes are rarely required and are generally discouraged for images. Descriptions should be included in alt text field.

Advanced options

To change the width or alignment, click on the Source Code icon in the toolbar, then find the <figure> element. The available styles include:

Left aligned image: Within the <figure> element, where it says class="figure-right", change that to class="figure-left"
Full-width image: Delete the class="figure-right" or class="figure-left" entirely.
Smaller image: To make the image 250px, change the class to class="figure-right-250" or class="figure-left-250". For a smaller, centered image, use: <figure class="figure-350">
Adding caption: You can add a caption by adding this element immediately after the <img> element: <figcaption>Caption text goes here.</figcaption>
You can also use the Image with Caption component.
Aligned images: If the images are the same dimensions, you can wrap them all wtih <figure> with no additional classes. The images will appear inline, as in the three-in-a-row images example on this page at their natual sizes. You can also use <figure class="figure-350"> for a max-width of 350 on the images.

Example: figure-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Example: Three images in a row

Example: Three images in a row, with captions

Enclose each image in separate <figure> tags and include <figcaption> for each. Then enclose all of the elements in a <section class="horizontal-align"> tag. The horizontal-align class will center the images so the text doesn't wrap to the right of the three images.

First caption

Second caption

Third caption