Creating Clarity’s Web Content

Content Management is a broad term that can apply to a range of feature sets in the data lifecycle. We’re going to focus specifically on Liferay’s Web Content application, a tool for creating and managing content. With it, users can define structures for different types of content and then design templates for rendering them in site pages. You can also render content items by mapping their fields directly to page fragments.

Note

While Liferay provides other applications for creating content, you can address most use cases for an enterprise website with the Web Content application.

Clarity can use Web Content for the flexibility of implementing custom structures and the efficiency of rendering content with fragments and templates. With Web Content, Clarity can rapidly produce dynamic, versatile assets without limiting the creativity of their writers and editors.

Web Content Structures

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 create your own.

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 these custom structures, Clarity can enforce a consistent format for 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.

Caution

While FreeMarker is a powerful tool in the right hands, it can produce unexpected behavior if you aren’t sure how to use it. Stick to rendering web content with fragments whenever possible, and if you must use FreeMarker, avoid adding your own logic.

Exercise: Creating Web Content Structures

The training workspace already includes most of the custom web content structures Clarity needs. In this exercise, you’ll add the Announcements structure as Christian Carter.

To do this,

1. Sign in as Christian Carter.

   • Email: [e-mail]
   • Password: learn

2. Open the Site Menu (), expand Content & Data, and select Web Content.

3. Go to the Structures tab and click New.

4. Enter Announcements for the title.

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

6. Select the Text field and configure these options:

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

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

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

9. Select the Text field and configure these options:

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

10. Return to the Builder sidebar menu.

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

12. Select the Link to Page field and configure these options:

    Tab	Field	Value
    Advanced	Field Reference	linkPage

13. Click Save.

Users can now create web content articles using the Announcements structure. You should now have eight web content structures implemented in Clarity’s website. Next, you’ll create some web content articles.

Exercise: Creating Web Content Articles

The training workspace already includes some web content articles. However, Clarity also needs some FAQ and announcement articles. Here you’ll create them as Christian Carter.

To do this,

1. Open the Site Menu (), expand Content & Data, and select Web Content.

2. Click New, select Folder.

3. Enter these values:

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

   Tip: It’s best practice to organize your web content into folders instead of adding it to the home folder.

4. Click Save.

5. Click the Announcements folder.

6. Click New and select Announcements.

7. Enter these values:

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

   

8. Click Publish.

   Next, you’ll add some missing web content articles.

9. Go to the Home web content folder.

10. Go to FAQ → Retail Partners.

11. Create these FAQ articles:

    Title (Question)	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 should have all the web content Clarity needs for their pages. Next, you’ll map some of this content to fragments on Clarity’s pages.

Exercise: Mapping Content to Fragments

Many fragments include sub-elements with their own configuration options, which depend on the sub-element’s type. Available types include

• Simple Text Element
• Rich Text Element
• Link Element
• HTML Element
• Image Element

You can set each sub-element’s content directly, or you can map them to existing content items so that they update dynamically. Here you’ll map some image elements in the Home page to asset library images as Walter Douglas.

1. Begin editing Clarity’s Home page.

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

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

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

5. For Source Selection, select Mapping.

6. For Item, click the Plus button ().

7. In the Documents and Media tab, click Sites and Libraries in the breadcrumb menu.

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

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

10. Repeat steps 4-9 for the Image fragment in the Clarity Solutions Promo container and select the sunglasses-on-shelves image named from the Marketing Assets asset library.

11. In the Browser side panel (), select the Content Wrapper container in the Clarity Solutions Promo container.

    Here you’ll use a background image instead of an image sub-element.

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

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

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

15. Repeat steps 13-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 design. Let’s fix this.

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

    Tab	Setting	Value
    General	Container Width	Fixed Width

17. Repeat this step for Content Container and Clarity Solutions Promo.

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

You have now mapped content from Clarity’s asset libraries to the image fragments on the Home page. Next, let’s explore how you can create content in Liferay with ChatGPT.

Exercise: Generating Content with ChatGPT (Optional)

You may have noticed that web content articles include the AI Creator button for generating content using ChatGPT. Using this feature requires a valid API key.

Here you’ll add an API key to your instance as the Clarity Admin user so that you can generate content.

To do this,

1. Sign in as the Clarity Admin user.

   • Username: [e-mail]
   • Password: learn

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

3. Click AI Creator.

4. Enter your API key.

   Note

   Bootcamp participants are provided a temporary key.

5. Ensure Enable ChatGPT to Create Content is checked.

6. Click Save.

7. Return to Clarity’s site, begin creating a web content article, and click the AI Creator button to generate content.

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

Conclusion

Great! You’ve learned about creating structured content with Liferay’s Web Content application and mapping content for display with fragments. Now let’s take a look at how you can organize your content in Liferay.

Next Up: Organizing Clarity’s Content

Additional Resources

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

• Web Content
• Mapping and Linking Fragment Elements