DokumentationAEMAnvändarhandbok om AEM Screens

Textövertäckning text-overlay

Last update: Fri Jul 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Mellanliggande
  • Administratör
  • Utvecklare

Detta avsnitt behandlar följande ämnen:

  • Översikt
  • Använda textövertäckning
  • Förstå egenskaper för textövertäckning
  • Använda ContextHub-värden i textövertäckning
CAUTION
Funktionen Textövertäckning är bara tillgänglig om du har installerat AEM 6.3 Feature Pack 5 eller AEM 6.4 Feature Pack 3.

Ökning overview

Textövertäckning är en funktion i AEM Screens. Du kan skapa en övertygande upplevelse i en sekvenskanal genom att ange en rubrik eller en beskrivning som läggs ovanpå en bild.

Mer information om hur du skapar en egen anpassad komponent finns i Utöka en AEM Screens-komponent.

I det här avsnittet visas bara hur du använder och använder förhandsgranskningskomponenten i ett AEM Screens-projekt. Det visas också hur du använder det som en textövertäckning i en av sekvenskanalerna.

Använda textövertäckning using-text-overlay

I följande avsnitt beskrivs hur du använder textövertäckning i ett AEM Screens-projekt.

Förutsättningar

Innan du implementerar den här funktionen bör du kontrollera att du har konfigurerat ett projekt som en förutsättning för att börja implementera textövertäckning. Exempel:

  • Skapa ett AEM Screens-projekt (i det här exemplet TextOverlayDemo)

  • Skapa en sekvenskanal med namnet TextSample i mappen Channels

  • Lägg till innehåll i din TextSample-kanal

Följande bild visar TextOverlayDemo -projektet med TextSample -kanalen i mappen Channels .

screen_shot_2018-12-16at75908pm

Följ stegen nedan för att använda textövertäckning i en AEM Screens-kanal:

  1. Navigera till TextOverlayDemo > Kanaler > TextSample och klicka på Redigera i åtgärdsfältet.

    screen_shot_2018-12-16at80017pm

  2. Klicka på bilden och klicka på Konfigurera (skiftnyckelsikon) för att öppna dialogrutan för egenskaper.

    screen_shot_2018-12-16at80221pm

  3. Klicka på alternativet Textövertäckning i navigeringsfältet i dialogrutan, vilket visas i bilden nedan.

    screen_shot_2018-12-16at80424pm

Förstå egenskaper för textövertäckning understanding-text-overlay-properties

Med hjälp av egenskaperna för textövertäckning kan du lägga till text i någon av komponenterna i ditt Screens-projekt. I följande avsnitt ges en översikt över de egenskaper som är tillgängliga i Textövertäckning:

text

Du kan lägga till en text i textrutan och lägga till typografisk betoning som fet, kursiv och understrykning.

Färgvariant Med det här alternativet kan texten antingen vara mörk (text i svart färg) eller Ljus (text i vit färg).

Storlek och placering Med det här alternativet kan användaren justera texten vågrätt eller lodrätt eller också använda finkorniga verktyg för textjustering.

NOTE
När du använder finkorniga verktyg måste du se till att identifiera rätt position i pixlar med (px) som suffix, till exempel 200 px. Resultatet av det här uttrycket är 200 pixlar från startpunkten.

Använda ContextHub-värden i textövertäckning using-text-overlay-context-hub

I följande avsnitt beskrivs användningen av värden från ett datalager, till exempel Google sheets i textövertäckningskomponenten.

Förutsättningar

Konfigurera ContextHub för ditt AEM Screens-projekt.

Mer information om hur du konfigurerar och hanterar datadrivna resursändringar med ett datalager finns i Konfigurera ContextHub i AEM Screens.

När du har ställt in de konfigurationer som krävs för ditt projekt följer du stegen nedan för att använda värden från Google Sheets:

  1. Navigera till TextOverlayDemo > Kanaler > TextSample och klicka på Egenskaper i åtgärdsfältet.

  2. Klicka på fliken Personalization så att du kan konfigurera ContextHub-konfigurationer.

    1. Klicka på ContextHub Path som libs > settings > cloudssettings > default > ContextHub Configurations och klicka på Select.

    2. Klicka på Segmentbanan som conf > screens > settings > wcm > segments och klicka på Markera.

    3. Klicka på Spara och stäng.

      note note
      NOTE
      Använd ContextHub och Segments-sökvägen, där du först sparade dina kontextnavkonfigurationer och segment.

      bild1

  3. Navigera till TextOverlayDemo > Kanaler > TextSample och klicka på Redigera i åtgärdsfältet.

    bild1

  4. Lägg till en bild- och textöverläggskomponent i bilden enligt beskrivningen i avsnittet Använda textövertäckning på den här sidan.

  5. Klicka på Konfigurera (skiftnyckelsikon) för att öppna dialogrutan Bild .

    bild1

  6. Gå till fliken ContextHub i dialogrutan Bild. Klicka på Lägg till.

    note note
    NOTE
    Om du inte har konfigurerat din ContextHub-konfiguration inaktiveras det här alternativet för ditt projekt.

  7. Ange Värde i fältet Platshållare. Klicka på raden som du vill hämta värdet från ditt Google-blad i ContextHub-variabeln. I det här fallet hämtas värdet från rad 2 och kolumn 1 från Google-bladen. Ange nu standardvärdet som 20, vilket visas i figuren nedan. När du är klar klickar du på bockmarkeringen.

    bild1

    note note
    NOTE
    Följande bild visar det värde som hämtas från Google Sheets:

    bild1

  8. Gå tillbaka till fliken Textövertäckning i dialogrutan Bild och lägg till texten Aktuell temperatur {Value} enligt bilden nedan.

    bild1

  9. Klicka på Förhandsgranska.

    bild1

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