Working with images

Adding an image

Pro Tip: Enlarge the editing window using the Maximize button Maximize button to facilitate adding an image to the page.

  1. Go to the page where you want to add a photo.
  2. Click the Edit tab.
  3. Place the cursor in a rich text field (e.g. the Body field) 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 an image is 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

 

Setting the image focal point

When adding a new image or editing an existing image, you can designate the focal point around which any scaling and cropping of the image will be centered. Once you have added an image, or when you are editing an existing image, you will see a thumbnail preview over which a small crosshair icon is displayed:

Image focal point

Clicking on the preview will move the crosshair icon to that location; you can also click and drag the icon around to position is where you’d like. Once the image is saved, the position of the crosshair will act as the center – the focal point – around which any scaling or cropping will occur.

For example, given the thumbnail preview above, when this image is displayed in a square aspect ratio, the center of the image will remain in the center of the rendered image. If the focal point is moved to the right side of the preview, when the image is displayed in a square aspect ratio the smokestack and water tower will remain in the rendered image, and the left side of the image will be cropped out.

 

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:
    Selected entity
  4. Click on the link to the file, which will open the file entity in a new window OR Go to Content ⇒ Media in the toolbar. Here you can search and filter all media items.
  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.

 

Display Modes

The display mode determines the aspect ratio and size of the image when rendered on the page. Display modes include the following options:

Landscape orientation

There are seven aspect ratio options which display images in a variety of landscape orientations and sizes:

2:1

2:1 aspect ratio.
2:1 aspect ratio
  • 2:1 Landscape - 100% Width: The image fills the content area; maximum pixel dimension of 1140 x 570
  • 2:1 Landscape - Large: The image is scaled and cropped to 560 x 280 pixels
  • 2:1 Landscape - Medium: The image is scaled and cropped to 400 x 200 pixels
  • 2:1 Landscape - Small: The image is scaled and cropped to 300 x 150 pixels

3:1

3:1 aspect ratio.
3:1 aspect ratio
  • 3:1 Landscape - 100% Width: The image fills the content area; maximum pixel dimension of 1140 x 380 pixels
  • 3:1 Landscape - Large: The image is scaled and cropped to 560 x 187 pixels
  • 3:1 Landscape - Medium: The image is scaled and cropped to 400 x 133 pixels
  • 3:1 Landscape - Small: The image is scaled and cropped to 300 x 100 pixels

3:2

3:2 aspect ratio.
3:2 aspect ratio
  • 3:2 Landscape - 100% Width: The image fills the content area; maximum pixel dimension of 1140 x 760
  • 3:2 Landscape - Large: The image is scaled and cropped to 560 x 373 pixels
  • 3:2 Landscape - Medium: The image is scaled and cropped to 400 x 267 pixels
  • 3:2 Landscape - Small: The image is scaled and cropped to 300 x 200 pixels

4:1

4:1 aspect ratio.
4:1 aspect ratio
  • 4:1 Landscape - 100% Width: The image fills the content area; maximum pixel dimension of 1140 x 285 pixels
  • 4:1 Landscape - Large: The image is scaled and cropped to 560 x 140 pixels
  • 4:1 Landscape - Medium: The image is scaled and cropped to 400 x 100 pixels
  • 4:1 Landscape - Small: The image is scaled and cropped to 300 x 75 pixels

4:3

4:3 aspect ratio.
4:3 aspect ratio
  • 4:3 Landscape - 100% Width: The image fills the content area; maximum pixel dimension of 1140 x 855
  • 4:3 Landscape - Large: The image is scaled and cropped to 560 x 420 pixels
  • 4:3 Landscape - Medium: The image is scaled and cropped to 400 x 300 pixels
  • 4:3 Landscape - Small: The image is scaled and cropped to 300 x 225 pixels

5:4

5:4 aspect ratio.
5:4 aspect ratio
  • 5:4 Landscape - 100% Width: The image fills the content area; maximum pixel dimension of 1140 x 912 pixels
  • 5:4 Landscape - Large: The image is scaled and cropped to 560 x 448 pixels
  • 5:4 Landscape - Medium: The image is scaled and cropped to 400 x 320 pixels
  • 5:4 Landscape - Small: The image is scaled and cropped to 300 x 240 pixels

16:9

16:9 aspect ratio.
16:9 aspect ratio
  • 16:9 Landscape - 100% Width: The image fills the content area; maximum pixel dimension of 1140 x 641
  • 16:9 Landscape - Large: The image is scaled and cropped to 560 x 315 pixels
  • 16:9 Landscape - Medium: The image is scaled and cropped to 400 x 225 pixels
  • 16:9 Landscape - Small: The image is scaled and cropped to 300 x 169 pixels

Portrait orientation

There are four aspect ratio options which display images in a variety of portrait orientations and sizes:

1:2 aspect ratio.
1:2 aspect ratio

1:2

  • 1:2 Portrait - Large: The image is scaled and cropped to 280 x 560 pixels
  • 1:2 Portrait - Medium: The image is scaled and cropped to 200 x 400 pixels
  • 1:2 Portrait - Small: The image is scaled and cropped to 150 x 300 pixels

 

 

2:3 aspect ratio.
2:3 aspect ratio

2:3

  • 2:3 Portrait - Large: The image is scaled and cropped to 420 x 560 pixels
  • 2:3 Portrait - Medium: The image is scaled and cropped to 267 x 400 pixels
  • 2:3 Portrait - Small: The image is scaled and cropped to 200 x 300 pixels

 

 

3:4 aspect ratio.
3:4 aspect ratio

3:4

  • 3:4 Portrait - Large: The image is scaled and cropped to 420 x 560 pixels
  • 3:4 Portrait - Medium: The image is scaled and cropped to 300 x 400 pixels
  • 3:4 Portrait - Small: The image is scaled and cropped to 225 x 300 pixels

 

 

4:5 aspect ratio.
4:5 aspect ratio

4:5

  • 4:5 Portrait - Large: The image is scaled and cropped to 448 x 560 pixels
  • 4:5 Portrait - Medium: The image is scaled and cropped to 320 x 400 pixels
  • 4:5 Portrait - Small: The image is scaled and cropped to 240 x 300 pixels

 

Square

1:1 (square) aspect ratio.
Square (1:1) aspect ratio

In addition to the landscape and portrait options, a square aspect ratio (1:1) is provided in a variety of sizes:

  • Square - Large: The image is scaled and cropped to 560 x 560 pixels
  • Square - Medium: The image is scaled and cropped to 400 x 400 pixels
  • Square - Small: The image is scaled and cropped to 300 x 300 pixels
  • Square - Smaller: The image is scaled and cropped to 225 x 225 pixels
  • Square - Thumbnail: The image is scaled and cropped to 150 x 150 pixels