Inlines are used to embed content into an article's body text. This article describes the standard inlines supported by the latest versions of the site frameworks.
Article Link
The Article Link inline provides a link to another article.
Here's an article link to the release notes: Release Notes
The link appears as a standard link defined by the site's design and opens in the same browser window. The link title is either the target article's heading, or its alternative link text (if set). The inline definition also lets you enter your own title for the link.
If the target article is secured then the link still appears in the body text as described. However, if a user who is not logged in clicks the link, they will be redirected to the login page. Upon successful authentication the user will be redirected to the secured page.
The style drop-down lets you add CSS modifiers to the link, which can be styled by the site's stylesheet. For example, if the style drop-down has a value called "cta", this would generate a link as:
<a href="/defaults" class="a-body__link a-body__link--cta">Default with CTA</a>
Document Link
The Document Link inline provides a link to a downloadable media item from the media library.
Here's a document link to the iCM 10.0.5.0 new features: A PDF of the 10.0.5.0 Release Notes (PDF) [1MB]
Typically an icon is displayed to the left of the link text which represents the media type. The link text is either the title of the media item, or the title provided in the inline dialogue. To the right of the link text the download size is shown in square brackets. The link text and download size act as a link to the document.
You can choose the target for the link, either "_self" (the current browsing context) or "_blank" (usually a new tab, but users can configure browsers to open a new window instead).
External Link
The External Link inline provides a link to an external URL from the external link library.
Here's a link to the main GOSS site, with a custom title: The GOSS Site (opens new window)
The link appears as a standard link defined by the site's design. The link title can be overridden in the inline dialogue.
You can choose the target for the link, either "_self" (the current browsing context) or "_blank" (usually a new tab, but users can configure browsers to open a new window instead).
The style drop-down lets you add CSS modifiers to the link, which can be styled by the site's stylesheet. For example, if the style drop-down has a value called "cta", this would generate a link as:
<a href="https://www.gossinteractive.com/" class="a-body__link a-body__link--cta" target="_self">The GOSS Site</a>
Highlight Box
The highlight box lets you add styled alert messages to an article.
If you pick an article, the selected article's heading will appear as the title of the box and body text as the content. Note that only body text is brought across - any inlines in the source article will be removed to guard against recursive behaviour.
Alternatively you can set the box title and text directly in the inline dialog.
The standard styles are:
You can also add your own modifier to the dialog, which will be output in the page source. For example, adding a "contrast" modifier to an "info" alert would be output as:
<div class="alert alert--contrast alert--info" role="alert">
<h2 class="alert__title">Information</h2>
<div class="alert__message">
<div class="highlightbox__bodytext">
Dismissible Highlight Box inline with alert type of 'Info'
</div>
</div>
<button class="btn btn--icon-only btn--cancel" aria-label="Close" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">
</button>
</div>
You can add multiple modifiers by separating values with commas. Whitespace and other special characters will be removed.
If a box is set as "dismissible" users will be able to hide it by pressing a cross that appears in the top right corner. Refreshing the page displays the box again.
Image
The image inline adds an image from the media library to the body text of the article.
The inline dialog lets you:
- Choose the image size from thumbnail, standard or large (these dimensions are set by your site's theme, but the usual widths are 150px, 400px and 2000px)
- Float the image left, right, centre, inline, or not at all
- Link to a large version of the image, or to the article/external link embedded via the media item in the media library
- Set whether the image is decorative or not. This controls the
alt tag of the image. Decorative images output an empty tag, otherwise the image description (set in the media library) is used - Add a caption to the image
Image Gallery
The gallery inline is designed to showcase high quality images that can be viewed in a full screen scrolling gallery.
The inline lets you select up to 20 images which will appear as thumbnails on your page. You can set the height of the thumbnails in the inline dialog.
Selecting an image expands the gallery. You can then scroll through the images or press the "play" button to view a slideshow.
The text of the gallery carousel is set as follows:
- The title text you set in the inline is the
<h2> heading for the carousel. This will fall back to "Image gallery carousel" if you don't set a title - The image description is output above each image
- The image title is output as a hidden
<h3> accessibility heading
Jump List
The Jump List inline creates an "on this page" menu that links to headings on the page. Note that only headings added directly to the article body text in iCM are included. Headings that are part of other inlines (like the titles of highlight boxes) or the disclosure styles, are excluded.
The inline dialog lets you:
- Override the heading. The default is "On this page"
- Choose whether the menu will include h2 headings, h3 headings, or both
- If a "back to top" link should be added to the bottom of the page
- Override the "back to top" link text. The default is "Back to top"
- Add additional styling modifiers that will be output in the page source
The inline relies on browser-side JavaScript. You can position it anywhere in your article body text, but it is generally best placed near the top. It will automatically do the following:
- Output a list of links to all of the headings on the page built from either the h2s, h3s, or both. h4 and below are ignored. Note that all headings are included, even those that are higher up the page than the inline
- Assign an ID to each heading on the page that is part of the menu to act as an anchor
- Optionally insert a back to top link immediately below the body text
This image shows a Jump List placed at the top of a page. It includes h2 and h3 headings, and shows the default list heading:
The image of the inline dialog above shows the modifiers
<div class="gi-jumplist gi-jumplist--red gi-jumplist--orange gi-jumplist--yellow" id="i11587868137217">
<div>
Jump List HTML
</div>
</div>
Script
The Script Inline lets you insert JavaScript, HTML and other third party embedding code, such as YouTube videos, into the body text of the article. Content embedded in this way will bypass the article editor's script tidying and protection functionality.
When embedding content from other sites you should be wary of third party cookies that might be set. See Embedding Content from Other Sites for guidance.
Video
This inline can be used to embed video media items uploaded to the iCM media library into your article. Videos are output using the HTML5 video tag.
You can set the size of the player and its position, and the playback options. For accessibility reasons autoplay should be set to "No".
Many of the video features, like the transcript, captions, description and "poster" (an image displayed before the video plays) are set in the video media item itself - only the link to the transcript can be toggled on and off via the inline.
Share this page
