Article summary

Summary

Discusses how to create content fragments for Adobe Experience Manager 6.4. 

Thank you to Ratna Kumar Kotla for testing this article to ensure it works. 

Digital Marketing Solution(s) Adobe Experience Manager 
Audience
Developer (beginner - intermediate)
Required Skills HTML
Tested On Adobe Experience Manager 6.4

Introduction

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

In Experience Manager 6.4, you can use content fragments that let you create original content in Experience Manager, enabling copywriters 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 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, copywriters 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 formatted 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. The 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

Note:

This article does not cover Content Fragment Models. For information, see Content Fragment Models.

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.

To create an Experience Manager Content Fragment, perform these steps: 

1. Open the Experience Manager Assets view at http://localhost:4502/assets.html/content/dam/we-retail#.

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 We.Retail Experience template and click Next.

 

weretail
A We Retail Content Fragment

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 We.Retail Activity Biking

 

tags
Selecting tags

8. Click the checkmark icon to add the tag to the content 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 section. 

Edit Text within the Content Fragment

You can edit text defined within a content fragment. For example, you can define headings. To edit text defined in the biking content fragment, perform these steps: 

1. In the Content Fragment view, click in the text.

 

text
Click in the content fragment text

2. Click on the full-screen icon.  

full
Click on the full screen icon

3. Select Cycling is Awesome.

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

 

head3
Select Head 3

5. Click the Save button to save the changes. 

Once done, you see your new content fragment.

conFrag1
A new content fragment

Create a Variation

You can create a channel-specific variation of this fragment for use in different Experience Manager applications. In this example, a mobile variation is created.

To create a variation, perform these steps:

1. Click on the Variations button and click Create Variation

var
Create Variation button

2. In the New Variation dialog, specify mobile as the title and 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. 

mobile1
Mobile variation of the content fragment

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 Associated Content icon.

 

AC
Associated Content

3. Click the Associate Content button to open the Collection Selector. Then select the Collection that you want to use. 

AC1
Collection Selector

Note:

If you do not see an Asset Collection, create a new one. To learn how to create a new collection and populate it with assets, see the following video. 


4. Click the Select button to associate the collection with the biking content fragment. You will now see the assets associated with this fragment.

AC2
An Asset Collection displaying images

5. Finally, click the Save button. This takes you back to the Content Fragment view at http://localhost:4502/assets.html/content/dam/we-retail/contentfragments. Notice how the images are displayed, as shown in this illustration. 

AC3
The Content Fragment folder displaying images

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 (http://localhost:4502/editor.html/content/dam/we-retail/contentfragments/biking).

md
Metadata menu option

2. Click on the Tag icon to open the Tag Selector and select We.Retail, Season, Summer.

 

md1
Select metadata tags

3. Click the  Save button to save the Content Fragment.

Use a Content Fragment in a web page

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

1. Add a Content Fragment in a web page

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

Open the web page in the Page Editor

Add the Content Fragment to a web page by performing these steps: 

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

http://localhost:4502/editor.html/content/we-retail/us/en/products/equipment/biking.html

biking
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.

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

 

CF
Dragging the Content Fragment component

3. 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.

CF1
Content Fragments

4. The biking Content Fragment appears (as shown in previous illustration).

5. Drag the biking Content Fragment into the Content Fragment drop area (that you dropped in step 2) in the page. 

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.

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

CF3
Drag the image component onto the page

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

CF4
Dragging an image

Now the page appears as shown in the following illustration. 

CF5
A Content Fragment located in a We Retail page

See also

Congratulations, you have just created an Experiecne Manager 6.4 content fragment. 

You can view additional Community generated content:

Join the Experience League

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