Creating and Mapping Clarity’s Content

Content Management is a broad term that can apply to a range of feature sets in the data lifecycle. Liferay DXP provides several tools for creating and managing content, and the optimal choice depends on which content management system you use. With these tools, you can define structures for different types of content and render them uniformly across site pages with templates or mapped fragments. This article explores Liferay’s tools for modeling content structures and authoring content.

Creating Content Structures in Liferay CMS

In Liferay CMS, every asset uses a content structure. Out of the box, Liferay CMS provides two structures for content (Basic Content and Blog) and two for files (Basic Document and External Video). However, you can create your own in the Content Structures application, which offers a drag-and-drop interface with field types you can arrange in a form layout. You can create structures for both content items (for structured information meant for presentation) and file entries (for raw, file-based resources).

Creating structures standardizes authoring, reduces editorial errors, and ensures consistency. Well-structured data also optimizes assets for headless delivery, so developers can retrieve and render content on external channels.

Defining Content Structures in Classic CMS

Web Content is the core tool in Classic CMS for structured, reusable content such as articles, news items, banners, announcements, and FAQs. Its power comes from separating content from presentation through three components: structures, articles, and templates.

Web Content Structures and Articles

Web content structures define generic content types. Each structure determines the fields available to creators when creating content items (e.g., title, body, image). Liferay includes a Basic Web Content structure out of the box, but you can also create your own. Furthermore, web content articles are the individual content items created from these structures, containing the actual text, images, and data.

Clarity Vision Solutions needs these types of web content for their enterprise website:

• Announcement
• Blog Post
• FAQ
• Helpful Article
• Job Listing
• Leadership Profile
• Legal Article

Using custom structures, Clarity can enforce a consistent format for each type of content across their site, reducing effort for writers, editors, and designers alike.

Web Content Templates

Once you’ve defined a structure, you can create a template for it. Web content templates use FreeMarker (FTL) to determine how specific types of content items render in site pages. This means different types of web content can have different visual presentations, providing designers with an extra layer of configuration and customization.

Exercise: Creating Web Content Structures

Web content structures provide standardized formats for different types of content. While your course workspace includes most of Clarity’s required custom web content structures, they still need an Announcements structure.

Here, you’ll create this as Christian Carter, Clarity’s Marketing Coordinator.

1. Sign in using these credentials:

   • Email: christian.carter@clarityvisionsolutions.com
   • Password: learn

2. Open the Global Menu (), go to the Applications tab, and click Asset Libraries.

3. Select the Marketing Assets library and click Web Content.

4. Go to the Structures tab and click New.

5. Enter Announcements for the title.

6. From the Builder sidebar, drag and drop a Text field into the structure.
   

7. Select the Text field and configure these options:

   Tab	Field	Value
   Basic	Label	Message
   Basic	Required Field	Enabled
   Advanced	Field Reference	message

8. Click the back arrow () to return to the Builder sidebar menu.
   

9. Drag and drop another Text field just below the first one.

10. Select the Text field and configure these options:

    Tab	Field	Value
    Basic	Label	Link Text
    Basic	Required Field	Enabled
    Advanced	Field Reference	linkText

11. Return to the Builder sidebar.

12. Drag and drop a Link to Page field on top of the Link Text field.
    
    This creates a Fields Group that contains both Link Text and Link to Page.

13. Select the Link to Page field and configure this option:

    Tab	Field	Value
    Advanced	Field Reference	linkPage

14. Click Save.

Well done! Users can now create web content articles using the Announcements structure.

Exercise: Creating Web Content Articles

Web content articles contain the actual content being presented on sites. Though the course workspace already includes some web content articles, Clarity also wants to create FAQ and Announcement articles.

Here, you’ll create these as Christian Carter.

1. Open the Global Menu (), go to the Applications tab, and click Asset Libraries.

2. Select the Marketing Assets library and click Web Content.

3. Click New, then select Folder.

4. Enter these values:

   Field	Value
   Name	Announcements
   Description	Stores announcement articles for the page header.

   NOTE
   It’s a best practice to organize your web content into folders instead of directly within the home folder.

5. Click Save.

6. Click the Announcements folder.

7. Click New and select Announcements.
   

8. Enter these values:

   Field	Value
   Metadata > Title	Product Innovations
   Fields > Message	See Clarity's latest eyewear innovations!
   Fields > Link Text	Learn more
   Fields > Link to Page	Pages > Products

   NOTE
   When selecting the Products page, click Sites and Libraries in the breadcrumb menu and select Clarity Public Enterprise Website.

   

9. Click Publish.
   Next, you’ll add FAQ articles for Clarity’s site.

10. Click Web Content in the breadcrumb menu.

11. Click FAQ and go to the Retail Partners subfolder.

12. Create these three FAQ articles:

    Metadata > Title	Fields > Answer
    Can I become a retail partner?	Yes, we are always looking to expand our network of retail partners. If you are interested in stocking our eyewear, please contact our sales team for more information.
    Do you have retail partners where I can try on your eyewear?	Yes, we have partnered with various optical shops where you can try on our eyewear. Please visit our website to find the nearest location.
    What types of eyewear do you offer?	We offer a wide range of eyewear including prescription glasses, sunglasses, and contact lenses. We also have a collection of designer frames to suit different styles and preferences.

    

Great! You’ve created the remaining web content Clarity needs for their pages. Next, you’ll map content to fragments on Clarity’s pages.

Exercise: Mapping Content to Fragments

Many layout fragments include sub-elements with their own configuration options based on the sub-element’s type (e.g., Simple Text, Rich Text, Link, HTML, or Image elements). You can set each sub-element’s content manually, or, you can map them to existing content items so they update dynamically whenever the underlying content changes.

Here, you’ll map image elements in the Home page to asset library images as Walter Douglas.

1. Sign in using these credentials:

   • Email: walter.douglas@clarityvisionsolutions.com
   • Password: learn

2. Begin editing Clarity’s Home page.

3. In the Browser side panel (), select the Banner container.

4. Select the Image fragment in the Banner container.
   
   Notice that the fragment includes an image-square sub-element.

5. Select the fragment’s image-square sub-element to access its mapping options.

6. For Source Selection, select Mapping.

7. For Item, click Select Item ().

8. Go to the Documents and Media tab and click Sites and Libraries in the breadcrumb menu.
   

9. Go to the Asset Library tab, select Marketing Assets, and select the image named home-banner-narrow-no-background.

10. For Field, select File URL. The image should appear in the Home page banner.
    

11. Repeat steps 4-10 for the Image fragment in the Clarity Solutions Promo container, selecting the sunglasses-on-shelves image from the Marketing Assets asset library.

12. In the Browser side panel (), select the Content Wrapper container in the Clarity Solutions Promo container.
    Next, you’ll configure the container to use background image instead of an image sub-element.

13. In the configuration side panel, go to the Styles tab.

14. Under Background, set Image Source to Mapping and select the gradient-overlay image from the Marketing Assets asset library.

15. For Field, select File URL. The texture should overlay the gradient promotion.
    

16. Repeat steps 12-15 for the Distributor Promo container and select the home-promotion image from the Marketing Assets asset library.
    Once you’ve finished, you may notice that the image dimensions don’t match Clarity’s proposed Home page design. You’ll fix this next.

17. Select the Banner Content container and configure this setting:

    Tab	Setting	Value
    General	Container Width	Fixed Width

    

18. Repeat the previous step for these three containers:

    • Clarity Solutions Promo
    • Content Container (under See the Difference)
    • Helpful Articles
      
      

    Now the contents of these containers should be fixed and the dimensions should better resemble Clarity’s designs.

19. Click Publish.

Well done! You've mapped content from Clarity’s asset libraries to the image fragments on their Home page. Later, you’ll also map additional types of fragment sub-elements.

Exercise: Generating Content with ChatGPT (Optional)

Liferay provides an AI Creator for generating web content using ChatGPT.

Here, you’ll add an API key to your instance and use this feature to create a web content article as the Clarity Admin user.

1. Sign in as the Clarity Admin user.

   • Username: admin@clarityvisionsolutions.com
   • Password: learn

2. Open the Global Menu (), go to the Control Panel tab, and click Instance Settings.

3. Click AI Creator.

4. Enter your ChatGPT API key.

5. Ensure these options are checked:

   • Enable ChatGPT to Create Content.
   • Enable DALL-E to Create Images.

6. Click Save.

7. Go to the Marketing Assets library and select Web Content.

8. Click New and select Basic Web Content.

9. Click AI Creator () to generate content with ChatGPT.
   

10. Enter your desired description, tone, and word count.

11. Click Create.
    This generates a text response.

12. Click Add to copy the response into your web content.
    Alternatively, click Try Again to generate a new response.

Great! You’ve used ChatGPT to generate web content.

Conclusion

With web content structures and templates, you can produce consistent, brand-aligned content at scale. By mapping these structured assets directly to page fragments, you ensure your sites remain visually cohesive and easy to maintain. Next, you’ll explore how to organize and classify your content effectively.

Additional Resources

See official documentation to learn more about Liferay’s Web Content application and fragment mapping:

• Web Content
• Mapping and Linking Fragment Elements