Article summary

Summary
Discusses how to create content fragments for AEM 6.2. 
Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (beginner - intermediate)
Required Skills
JCR nodes, JavaScript, HTML
Tested On Adobe Experience Manager 6.2

Introduction

Have you ever wondered how to easily create text snippets in Adobe Experience Manager (AEM) and store them in the AEM repository, for easy re-use when authoring web pages, mobile applications, social content, and so on?

In AEM 6.2, you can use content fragments that let you create original content in AEM, enabling copy writers to create editorial content before it is being authored in a page, and to further allow curating such content by creating channel specific variations and by associating collections with relevant media content. As a result, web producers receive content that is prepared and "ready to go”, enabling them to focus on assembling content across channels, globally and on a local level.

Overview
Overview of AEM Content Fragments

It is important when using Content Fragments is to understand core concepts and terminology.

Overview2
Content Fragments

Content Fragments are based on templates; not page templates, but specific fragment templates.
Fragment templates are created and maintained in the AEM repository by using CRXDE Lite. Typically, copy writers and authors select a template when creating a content fragment.

Here is what templates define for a Content Fragment:

Elements

  • Self-contained pieces of editorial content that are meant to be authored in a page with their own design and layout, i.e. component, as opposed to "paragraphs" which are meant to be authored with a common component.

Default content

  • Content every user sees the first time a fragment is created.

Fragments themselves have a name/title value, like every AEM asset, and contain the following structural elements:

Paragraphs

  •  Groups of words separated by a vertical space (carriage return).
  •  Can include a title, which has to be formaed as such (header). Otherwise titles are seen as
    paragraphs on their own.
  •  Paragraphs are important as fragment components allow creating fragment instances in a page
    with just one paragraph or a sequence of paragraphs. We will see this later on when using a Content Fragment in a web page.

Variations

  • Copies of the content master that are optimized for a certain editorial purpose or channel. A mobile variation can for example be optimized for a mobile channel, by removing and/or rewriting certain parts of a master. Or an email variation can be optimized for using the same content in emails.

Associated Collections

  • Relevant media content that is added to the fragment. Purpose is to expose channel producers to only this curated media content during production rather than the entire repository.

Content Fragments do not contain any layout and design beyond rich text formats. Fragments are pure content. Experiences are created by combing fragments with AEM components when authoring them in a page or other channel (mobile, email, etc.). Components add layout and design. 

Note:

Fragments + Components = Experiences

Create a Content Fragment

Create a new content fragment by using this text:

Cycling is Awesome

Cycling is essentially the perfect outdoor activity. With limitless bike options and seemingly endless trail choices, cycling accommodates all fitness levels and age groups,. Chose your own adventure.

This fragment uses a "Simple" template provided with AEM. This template provides for a single element,
named Main.

To create a Content Fragment, perform these steps: 

1. Open the AEM Assets view at http://localhost:4502/assets.html/content/dam/geometrixx#.

2. Create a new folder named ContentFragments by clicking Create, Folder. 

3. Switch to the ContentFragments folder. 

4. Click the Create and select Content Fragment from the drop-down menu.

CreateFragments
Create Fragments

5. In the New Content Fragment wizard, select the Simple Fragment template and click the Next.

6. Specify biking as the title and editorial content about riding bicycles as the description.

7. Click on the Tag icon to open the Tag Selector and select Geometrixx-Outdoors > Activity > Biking

8 Click the checkmark icon to add the tag to the fragment.

9. Click the Create button. 

10. When the Success dialog appears, click Open.

11. Paste the biking text that is specified at the start of this article. 

Edit Text within the Content Fragment

You can edit text defined in content fragments. For example, you can define headings. To edit text defined in content fragments, perform these steps: 

1. In the Content Fragment view, click Edit.

 

Edit
Edit content fragments

2. At the start of the content - type Cycling is Awesome

3. Select Cycling is Awesome.

4. Click on the Paragraph icon to open the paragraphstyle drop-down list and select Heading 3.

HeadingThree
Rich Text Editor in Content Fragments

5. Click the checkmark icon to save the changes. 

Create a Variation

You can create a channel-specific variation of this fragment for use in different AEM applications. In this example, a mobile variation is created, as shown in the following illustration. 

Variationmobile
Mobile variations

To create a variation, perform these steps:

1. Click on the Variations link (in the left pane) and click Create Variation

Variation2
Create Variation button

2. In the New Variation dialog, specify the mobile as the title and shortened content for the mobile channel as the description.

3. Add the sentence This is mobile to the text to the end of the text. 

4. Click the checkmark icon to save the changes. 

Associate an Asset Collection to a Content Fragment

You can link an Asset Collection to a content fragment by performing these steps:

1. Click the Edit link in the top corner to open the drop-down list.

2. Select Associated Content.

AssContent
Associated Content

3. Click the Associate Content button to open the Collection Selector.

SelectCollection
Collection Selector

Note:

If you do not see an Asset Collection, create a new one. For details, see Managing Collections.

4. Click on the arctic collection to select it and click the checkmark icon to associate the collection with this fragment. You will now see the assets associated with this fragment.

ArticCollection
Select an Asset Collection

5. Finally, click the checkmark in the top right corner to save the Content Fragment. This takes you back to the Assets Admin.

Set Content Fragment Metadata

You can set Content Fragment metadata by performing these steps:

1. From the menu in the left hand side, select Metadata.

MetaData
Metadata menu option

2. Click on the Tag icon to open the Tag Selector and select Geometrixx-Outdoors
> Season > Summer.

3, Click the checkmark icon to add the tag to the fragment.

4. Click the checkmark in the top right corner to save the Content Fragment.

Use a Content Fragment in a web page

You can add a content fragment to an AEM web page by performing these tasks: 

1. Add a Content Fragment in a web page

2. Specify different paragraphs to be displayed in a web page.

3. Add associated assets from a Content Fragment to a web page

Open the web page in the Page Editor

In this section, you can use the AEM Sites Page Editor to add the Content Fragment into a web page. 

Perform these steps: 

1. To start, switch to the Page Editor browser tab for the Biking web page at:

http://localhost:4502/editor.html/content/geometrixx-outdoors/en/activities/cajamara-biking.html

BikePage
Biking Page

Note:

If the side panel on the left side of the screen is not visible, click the Toggle Side Panel button (furthest to the left) in the top toolbar.

Add a Content Fragment in the page

You can add a Content Fragment in an AEM web page by performing these steps: 

1. From the components section under the General category, select Content Fragments and drag and drop this component onto the page.

 

ContentFragments
Dragging the Content Fragments component

2. In the side panel, switch to the Asset Finder (if it is not displayed). In the type selector, select Content Fragments, as shown in this illustration.

SearchContentFragments
Content Fragments

3. The biking Content Fragment appears.

ShowFragments
The Content Fragment is displayed

4. Drag the biking Content Fragment into the Content Fragment drop area (that you dropped in step 1) in the page. Click on the first header to reveal the component’s toolbar.

5. Click on the Wrench icon to open up the component’s dialog.

6. Select the Range radio button and enter 1 as the paragraph range.

fragdialog
Content Fragment dialog

Use Associated Assets

You can add additional assets to a content fragment, which is known as an associated asset. Perform these steps:

1. In the side panel, switch to the Components list.

Components
Components located in the side rail

2. Drag and drop the Image - Sightly component above the header Cycling is Awesome.

Components2
Dragging the Sightly Image component

3. In the side panel, switch to the Associated Assets list. Drag and drop the an image into the Image component.

Components3
Dragging an image

See also

Congratulations, you have just created AEM 6.2 content fragments. Please refer to the AEM community page for other articles that discuss how to build AEM services/applications.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy