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. Visit Tips for Writing Alt Text for more information.
Leave the Image title field blank. Title attributes are rarely required and are generally discouraged for images. Descriptions should be included in the 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". You can also make the image 350px wide by changing the number in the class. 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: To create a series of horizontally aligned images, you can wrap your images within the same figure tag, or you can wrap the images/figure tags in this section:
<section class="horizontal-align">...</section>
See the examples that follow.

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

These images are all wrapped in the same <figure> tag.

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, 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