Embed images

What's inside this article:

• Basic information
• Embed an internal image
• Embed an external image
• Configure display settings

Basic information

This article explains how to embed an image into the body of a content item.

You can embed images on the following text content items:

• Article
• Backgrounder
• Blog
• FactCheck
• Feature
• Feature story
• Live blog
• News
• Transcript

To learn how to create these items from the beginning, see the following articles:

• Create an Article page
• Create and embed a Backgrounder
• Create a FactCheck page
• Create a Feature story page
• Create a Live blog page

Embed an internal image

Follow these steps to embed an internal image. This means an image that has already been uploaded to Pangea CMS by you or another CMS user. To learn how to upload images, see the following article:

• Uploading images

To embed an internal image:

1. Via Editor, click inside the main box to reveal the CKEditor bar. Position the cursor where you want to insert the image.

   

2. Hit the Insert Embedded Content button in CKEditor.

   

3. Ensure Single item > Image > Internal are selected.

   

4. Set the remaining search filters according to your needs. Then, hit Search to refresh the search results.

   

5. Select the image you want to embed.

   

6. Configure the display settings. Then, hit Add.

   

You see a placeholder representing the embedded image in CKEditor.

Embed an external image

Follow these steps to embed an external image. This means an image from one of the following external agencies:

• AFP (Agence France-Presse)
• AP (Associated Press)
• Reuters

To embed an external image:

1. Via Editor, click inside the main box to reveal the CKEditor bar. Position the cursor where you want to insert the image.

   

2. Ensure Single item > Image > External are selected.

   

3. Set the remaining search filters according to your needs. Then, hit Search to refresh the search results.

   

4. Select the image you want to embed.

   

5. Wait while the image is uploaded to Pangea CMS.

   

6. Configure the display settings. Then, hit Add.

   

You see a placeholder representing the embedded image in CKEditor.

Configure display settings

The following display settings are available for every embedded image:

• Image
• Crop
• Contains sensitive content
• Link
• Caption
• Alt text
• Size
• Keep aspect ratio

Image

The preview under Image shows how the embedded image will look when it is displayed on the site.

Pangea CMS automatically crops the image to fit the 16:9 aspect ratio. If you are not satisfied with the automatic cropping, the following solutions are available:

• Manually crop the image.
• Enable Keep aspect ratio to display the full image with no cropping.

Crop

Hit the Crop the image button to manually crop the image. During cropping, the 16:9 aspect ratio is automatically maintained. You can change which portion of the image is visible, but you cannot change the aspect ratio.

Contains sensitive content

Tick the box next to Contains sensitive content if the image might be offensive, disturbing, or upsetting for certain audiences.

If this option is ticked, the image is censored on the public site. To view the image, a visitor must first hit Click to reveal.

Link

Under Link, specify what happens when a visitor taps or clicks the image.

Choose from the following:

• No action: Nothing happens (the image is not clickable).
• Enlarge on click: The image opens in fullscreen.
• Link to a URL: Another webpage opens.

If you select Link to a URL, additionally define the following:

• URL: Might be a relative URL for a page from your site (such as /home) or a full URL (such as https://rferl.org).
• Link option: Choose your preferred option:
  • Open in same window: Recommended for pages from the same site.
  • Open in new tab: Recommended for pages from external sites.

Caption

The caption is displayed below the image on the public site. An effective caption provides context for visitors and explains how the image is relevant to the story.

The English Title for the image is prefilled by default as the caption. However, it is important to create a custom caption in the local language for your site.

The Description will not be visible on the public site. It is provided as a source of inspiration to help formulate the caption.

Alt text

Under Alt text, optionally provide custom alt text for the image.

Alt text is a simple description of what is directly visible in an image. Alt text has many purposes. Most importantly, it is read aloud by screen readers for visually impaired visitors to your site. By adding effective alt text for images, you help make your site more accessible. For details, see the following article:

• Create alt text for an image

If you do not provide custom alt text, the caption is automatically applied as the alt text.

Size

Under Size, select a size for the image. In most cases, the following options are available:

• Small
• Large

For a Feature story, the following additional size options are available:

• Jumbo
• Full Size

Keep aspect ratio

Tick Keep aspect ratio to display the full image with no cropping. This option is useful if you are embedding an infographic or an image that uses a non-standard aspect ratio (such as a vertical image).

If Keep aspect ratio is not ticked, the image is automatically cropped to fit the 16:9 aspect ratio. This is the standard aspect ratio for horizontal images across Pangea sites. Maintaining the 16:9 aspect ratio provides a unified look for embedded images.