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

You can build and display web content in your website.

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.

Web content structures define generic content types.

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.

Use web content templates to control how your content displays on a page.

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 includes most of the custom web content structures Clarity needs. Here you’ll add the Announcements structure as Christian Carter.

To do this,

  1. Sign in as Christian Carter.

    • Email: christian.carter@clarityvisionsolutions.com
    • Password: learn
  2. Open the Global Menu (Global Menu), go to the Applications tab, and click Asset Libraries.

  3. Select the Marketing Assets library and 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:

    TabFieldValue
    BasicLabelMessage
    BasicRequired FieldYes
    AdvancedField Referencemessage
  8. Click the back arrow (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:

    TabFieldValue
    BasicLabelLink Text
    BasicRequired FieldYes
    AdvancedField ReferencelinkText
  11. Return to the Builder sidebar menu.

  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 these options:

    TabFieldValue
    AdvancedField ReferencelinkPage
  14. Click Save.

Create the Announcements web content structure.

Users can now create web content articles using the Announcements structure. Next, you’ll create some web content articles.

Exercise: Creating Web Content Articles

The training workspace 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 Global Menu (Global Menu), go to the Applications tab, and click Asset Libraries.

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

  3. Click New, select Folder.

  4. Enter these values:

    FieldValue
    NameAnnouncements
    DescriptionStores 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.

  5. Click Save.

  6. Click the Announcements folder.

  7. Click New and select Announcements.

  8. Enter these values:

    FieldValue
    TitleProduct Innovations
    MessageSee Clarity's latest eyewear innovations!
    Link TextLearn more
    Link to PageProducts
    Note

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

    Create the Product Innovations web content article.

  9. Click Publish.

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

  10. Click Web Content in the breadcrumb menu.

  11. Go to FAQ folder → Retail Partners subfolder.

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

Create three FAQ web content articles.

Great! You should have all the web content Clarity needs for their pages. Next, you’ll map 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.

To do this,

  1. Sign in as Walter Douglas.

    • Email: walter.douglas@clarityvisionsolutions.com
    • Password: learn
  2. Begin editing Clarity’s Home page.

  3. In the Browser side panel (Browser), 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.

    Select the image-square sub-element under the Banner's Image fragment.

  6. For Source Selection, select Mapping.

  7. For Item, click Select Item (Select Item Button).

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

    Go to the Documents and Media tab and use 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.

    Map the image to display it in the fragment.

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

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

    Here you’ll use a 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.

    Map the image to use it as the fragment's background.

  16. Repeat steps 12-14 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 Home page design. Let’s fix this.

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

    TabSettingValue
    GeneralContainer WidthFixed Width

    Set the Banner Content container's width setting to Fixed Width.

  18. Repeat the previous step for these containers

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

    Set the containers' width setting to Fixed Width.

    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 their Home page. In later lessons, you’ll map content fields to additional types of fragment sub-elements. But for now, you’ve completed all exercises for day one of Building Enterprise Websites!

Navigate to the home page, and confirm every field is mapped correctly.

Next, you’ll learn about how you can use AI to assist in content creation and tagging.

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 a temporary API key to your instance as the Clarity Admin user.

To do this,

  1. Sign in as the Clarity Admin user.

    • Username: admin@clarityvisionsolutions.com
    • Password: learn
  2. Open the Global Menu (Global Menu), go to the Control Panel tab, and click Instance Settings.

  3. Click AI Creator.

  4. Enter the API key provided for this training.

    Note: This key is temporary.

  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 the AI Creator button (AI Creator Button) to generate content.

    Use the AI Creator tool to generate content.

  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

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:

Capabilities

Product

Contact Us

Connect

Powered by Liferay
© 2024 Liferay Inc. All Rights Reserved • Privacy Policy