Working with images

Adding an image

1. Navigate to the page where you wish to add a photo.
2. Click the Edit tab.
3. Place the cursor in a rich text field (e.g. the Body) where you wish to add the photo.
4. Click the Embed Image button
5. You can select an existing image that has been previously uploaded under the Library tab:
   1. Click to select the image; a green check mark will appear over the image
   2. Scroll down and clock Select Image(s), then click Next.
6. OR add a new image under the Upload New Image tab:
   1. Provide a name, and click Browse to upload your image file from your local hard drive (minimum of 300 x 300 pixels).
   2. Provide alternative text, and set the focal point; the focal point determines the area of the photo that should remain visible when the image is scaled and cropped.
   3. The optional Image Description field is only displayed as a caption below the image when used in a Photo Gallery Paragraph.
   4. Click Save Image, then click Next
7. Select the appropriate display mode and alignment (and optional caption), then click Embed
8. Save the change to the page by clicking Save.

Editing an existing embedded image

1. Edit the page with the existing embedded file.
2. Double-click, or right click on the embedded image and select Edit Embed Image.
3. In the Embed media item dialog, you will see a link to the media item entity:
   
4. Click on the link to the file, which will open the image entity in a new window.
5. Click the Edit tab or button to edit the image entity.
6. If you need to change the name, do so in the Name field.
7. If you need to replace the file itself, click Remove, and upload your new or updated file.
8. Save the change to the file entity by clicking Save.
9. You can now close your window and exit the editing interface. Your changes will automatically appear anywhere that this file entity is embedded.

Alternatively, you can select Content > Media from the admin toolbar, where you can search all media items. Locate and select the image you wish to edit, then start at Step 5 above.

A word about aspect ratio…

There may be occasions when you have an image which doesn’t exactly match the available display modes, and even with the ability to change the focal point an important part of the image is cropped out. In these scenarios, you can determine the display mode with the closest aspect ratio to your image, and using an image editing tool such as Photoshop, increase the height or width of the image to add white space to its “canvas” so that it matches the aspect ratio of one of the available display modes.

For example, the following image is 560 x 350 pixels; an aspect ratio of roughly 11:7:

The closest display mode to show as much of this image as possible is 16:9 Landscape - Large (560 x 315 pixels), which will crop some of the image from the top, bottom, or both, depending on the focal point.

By adding white space to the left and right of the image (shown here in yellow to illustrate the point), the display mode with a 16:9 aspect ratio can be used and none of the actual image will be lost: