Magnolia 6.0 reached end of life on June 26, 2019. This branch is no longer supported, see End-of-life policy.
This page describes how to use the Stories app, an example of a custom content editor that authors can use to quickly create and publish flexible content in Magnolia.
Stories app is a feature available only in Magnolia EE Professional.
Use the Stories app to create and edit stories on a Magnolia author instance. Complete the structured outline to give the story a set of key, static properties. Then build up the unstructured body of your story using content blocks you want: images, texts, videos and links. You can save and publish in one click to get your content on your website fast.
Compared to pages, stories are ideal for quickly producing free-form content without any page-hierarchy constraints. Stories, with a clear distinction between formatting and content, can then be published to different destinations: from a web page to a mobile app or as an article for an online newspaper.
You create stories in the Stories app.
To add a new story, click Add story. You can organize your stories by adding folders.
If you have the Magnolia demo modules installed, the Stories app contains some sample blogposts to show what you can do with the Stories app. Without the demo modules, the Stories app does not contain any content by default.
In the demo, the Stories app has been decorated to extend the default functionality described in this page. The customization of the Stories app introduces new blocks, changed outline properties, sample content and templates for rendering the content.
When you create a new story, it provides title and lead text fields as well as several collapsible multi-field sections where you can fill in some key properties.
By default, the outline consists of the following fields and collapsible sections:
URL slug - Used as the name of the story and in the URL. If you leave this field empty, the URL slug is automatically generated from the story's Title when you first save the story.
Mandatory fields are indicated by an asterisk.
Once you have completed the outline, you can add, reorder and delete content blocks to suit your requirements.
See the shortcuts below to work even faster.
Magnolia provides the following block types out-of-the-box:
To add blocks to your story, hover over the
plus icon in your story to expand the Block chooser toolbar and select the type of blocks you want.The types of block available may vary depending on what your development team has configured.
The Date and Tour blocks are provided by the Magnolia demo modules.
You can also expand the toolbar to open a Block chooser dialog.
To delete a block, click the wastebasket icon to the right of the block or use the backspace shortcut.
Add text blocks to write paragraphs or headings. Each paragraph or heading must be a separate text block. You cannot use line breaks within a block. If you press enter while typing, a new text block is created.
You can format the text and insert or remove links to external content or to Magnolia items using the formatting bar displayed when you are editing a text block.
If you apply a header style to text in a block, the entire block becomes a heading.
If you paste text from another source into a text block, all formatting is removed. If you paste several paragraphs at the same time, multiple corresponding blocks are created.
When you are typing in a text block, press Enter to add a new text box.
If you insert links in a text block:
The list of apps with content you can link to may vary depending on what your development team has configured.
Add image or video blocks to select an existing asset or upload a new one. Magnolia uses basic mtk components to embed images and videos in your stories.
Click browse to open the Assets chooser dialog and select an asset for your story or upload a new one. You can also add image-related or video-related metadata.
Image block:
Video block:
Use content-from-another-website blocks to embed content from another external website.
This block uses link unfurling: it scans the URL you enter for metadata and provides a preview in the story. For example, this YouTube link displays a thumbnail preview, title and lead text:
The preview displayed for external links depends on the metadata the site owner embedded in their web page header.
When you have finished writing your story, you can directly click Save and Publish at the bottom of the story. Alternatively, you can select a story in the workbench and click Publish. The publication process and statuses are explained here.
You must publish any assets you use in your stories separately.
The Stories app does not provide any default page or component templates to render the stories. The templates to render the stories must be configured by your development team. The templates provided by the
article-editor
module may be used and adapted for this purpose. You can see an example of published stories in the Magnolia demo.
The Stories app supports several shortcuts to make editing more user-friendly. The shortcuts vary depending on if you are editing a block (edit mode) or not (select mode).
Edit mode is indicated by a blue background on the block.
Action | Shortcut |
---|---|
Change to select mode | Esc |
Create a new text block | Enter |
To | Shortcut |
---|---|
Change to edit mode | Enter |
Delete the selected block | Backspace |
The Stories app doesn't yet support multi-language content.
2 Comments
Swamy Kottur
Can we access the content of stories nodes via API?
Bradley Andersen
Hi Swamy Kottur ! sure - you could use the rest endpoints. For example, using the Nodes endpoint: