Text Overlay text-overlay

This section covers the following topics:

  • Overview
  • Using Text Overlay
  • Understanding Text Overlay Properties
  • Using ContextHub Values in Text Overlay
CAUTION
The Text Overlay feature is only available if you have installed AEM 6.3 Feature Pack 5 or AEM 6.4 Feature Pack 3.

Overview overview

Text Overlay is a feature available in AEM Screens. It lets you create a compelling experience in a Sequence Channel by providing a title or a description overlaid on top of an image.

To learn how to create your own custom component, see Extending an AEM Screens Component.

This section only showcases how to use and apply the poster component in an AEM Screens project. It also showcases using it as a text overlay in one of your sequence channels.

Using Text Overlay using-text-overlay

The following section describes the use of text overlay in an AEM Screens project.

Prerequisites

Before implementing this functionality, make sure you have set up a project as a prerequisite to start implementing text overlay. For example,

  • Create an AEM Screens project (in this example, TextOverlayDemo)

  • Create a sequence channel titled as TextSample under the Channels folder

  • Add content to your TextSample Channel

The following image shows the TextOverlayDemo project with the TextSample channel in the Channels folder.

screen_shot_2018-12-16at75908pm

Follow the steps below to use text overlay in an AEM Screens channel:

  1. Navigate to TextOverlayDemo > Channels > TextSample and click Edit from the action bar.

    screen_shot_2018-12-16at80017pm

  2. Click the image and click Configure (wrench icon) to open the properties dialog box.

    screen_shot_2018-12-16at80221pm

  3. Click the Text Overlay option from the navigation bar of the dialog box, as shown in the figure below.

    screen_shot_2018-12-16at80424pm

Understanding Text Overlay Properties understanding-text-overlay-properties

Using the Text Overlay properties, you can add text to any of the components in your Screens project. The following section provides an overview of the properties that are available in Text Overlay:

text

You can add a text to the text box and add typographical emphasis such as bold, italics, and underline.

Color Variant This option allows the text to be either Dark (text in black color) or Light (text in white color).

Sizing & positioning This option lets the user align the text horizontally or vertically or also use fine-grained tools for text alignment.

NOTE
When using fine-grained tools, be sure to identify the correct position in pixels using (px) as a suffix, for example 200 px. The result of this expression is 200 pixels from the start point.

Using ContextHub Values in Text Overlay using-text-overlay-context-hub

The following section describes the usage of values from a data store, for example, google sheets in the text overlay component.

Prerequisites

Set up ContextHub configurations for your AEM Screens project.

To learn how to setup and manage data driven asset changes using a data store, see Configuring ContextHub in AEM Screens.

After you set up the required configurations for your project, follow the steps below to use values from the Google Sheets:

  1. Navigate to TextOverlayDemo > Channels > TextSample and click Properties from the action bar.

  2. Click the Personalization tab so you can set up the ContextHub configurations.

    1. Click the ContextHub Path as libs > settings > cloudsettings > default > ContextHub Configurations and click Select.

    2. Click the Segments Path as conf > screens > settings > wcm > segments and click Select.

    3. Click Save & Close.

      note note
      NOTE
      Use the ContextHub and the Segments path, where you initially saved your context hub configurations and segments.

      image1

  3. Navigate to TextOverlayDemo > Channels > TextSample and click Edit from the action bar.

    image1

  4. Add an image and text overlay component to your image as described in the Using Text Overlay section of this page.

  5. Click on Configure (wrench icon) to open the Image dialog box.

    image1

  6. Navigate to the ContextHub tab from the Image dialog box. Click Add.

    note note
    NOTE
    If you have not set up your ContextHub configuration, this option is disabled for your project.
  7. Enter Value in the Placeholder field. Click the row that you want to get the value from your Google sheet in ContextHub Variable. In this case, the value is retrieved from row 2 and column 1 from the Google sheets. Now, enter the Default Value as 20, a shown in the figure below. When you are done, click the checkmark.

    image1

    note note
    NOTE
    For your reference, the following image showcases the value that is retrieved from the Google Sheets:

    image1

  8. Navigate back to the Text Overlay tab from the Image dialog box and add the text Current Temperature {Value}, as shown in the figure below.

    image1

  9. Click Preview.

    image1

recommendation-more-help
adce462a-f916-4dbe-9ab5-0b62cfb0f053