What's inside this article:
- Basic information
- Upload an image
- Embed an internal image
- Embed an external image
- Configure display settings
- Update an embedded image
- Move an embedded image
- Preview an embedded image
- Where can I embed images?
Basic information
This article explains how to embed an image into the body of a content page. You can embed the following types of images:
- Internal images: Images that have been uploaded to CMS.
- External images: Images from the following external agencies:
- AFP (Agence France-Presse)
- AP (Associated Press)
- Reuters
Upload an image
You might need to upload the image before embedding it. This applies if the image is saved on your device but is not yet uploaded to CMS. For instructions, see the following article:
After you upload the image, follow the steps to embed an internal image.
Embed an internal image
To embed an internal image:
- Position the cursor where you want to embed the image. Then, hit the Insert Embedded Content icon in CKEditor.
- Ensure Single item > Image > Internal are selected.
- Set the search filters in the left panel, then hit Search to refresh the results. For detailed information, see the following article:
- Select + Attach (the plus icon) next to the image you want to embed.
- Set exactly how the embedded image will be displayed. When you're satisfied with the settings, hit Add. For instructions, go to the following section:
You see a placeholder representing the embed in CKEditor. If needed, you can update the embedded image.
Embed an external image
The steps for embedding an external image are similar to those for embedding an internal image. However, you need to go to Single item > Image > External.
After you select the image you want to embed, you need to wait while the image is uploaded to CMS. This process normally takes a few seconds. However, it might take longer, depending on the speed of your network.
Configure display settings
The following display settings are available for every embedded image:
Image
It's important to check the preview that is available under Image. This shows how the embedded image will look when it is displayed on the site.
CMS automatically crops the image to ensure it fits the 16:9 aspect ratio. If you're 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
Select the Crop the image icon to manually crop the image. During cropping, the 16:9 aspect ratio is automatically maintained. You can change which section 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 content of the image might be offensive, disturbing, or upsetting for certain audiences.
If this option is enabled, the image content is hidden on the public site. To view the image, a visitor must first hit Click to reveal.
Link
Under Link, you can specify what happens when a visitor clicks or taps 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 own 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 will be visible directly below the embedded image on the 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's important to always create a custom caption in the local language for your site.
The Description will not be visible on the site. It is provided as a source of information to help formulate the caption.
Alt text
Under Alt text, provide alt text (or 'alternative text') for the image.
Alt text is not directly visible on the site. However, it is important for SEO and site accessibility. For details, see the following article:
Providing alt text for an embedded image is optional. If you don't provide alt text, the caption is automatically applied as the alt text. However, be aware that if the caption and alt text are the same, visitors who access your site using a screen reader will hear the same information twice.
Size
Under Size, select a size for the image. In most cases, the following options are available:
- Small
- Large
If you're creating a Feature story, the following additional options are available:
- Jumbo
- Full Size
Keep aspect ratio
Tick Keep aspect ratio if you want to display the full image with no cropping. This is useful if you're embedding an infographic or a vertical image.
If Keep aspect ratio is not ticked, the image is framed using the 16:9 aspect ratio (parts of the image might be cropped). 16:9 is the standard aspect ratio for horizontal images across the site and provides a unified look for embedded images.
Update an embedded image
A placeholder representing the embedded image is visible in CKEditor. The following options are available:
- Edit placeholder: Update the display settings.
- Image detail: View the image metadata.
- Remove item: Remove the embedded image.
Move an embedded image
You cannot move an embedded image.
If needed, you can insert a paragraph above an embedded image. Hover over the top of the placeholder, and select the Insert paragraph here icon. You can then start typing.
Preview an embedded image
If you want to see exactly how the embedded image will look on the published content page, use the options under Preview in the left panel.
Where can I embed images?
You can embed images in the main body on the following text-based content items:
You can also embed images:
- On an HTML widget
- In a Live blog post
- In the Verdict content on a FactCheck page
