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?
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)
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.
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.
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.
The following display settings are available for every embedded 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:
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.
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.
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.
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.
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.
Under Size, select a size for the image. In most cases, the following options are available:
If you're creating a Feature story, the following additional options are available:
- Full Size
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.
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.
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.
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.
You can embed images in the main body on the following text-based content items:
You can also embed images: