Esempio di utilizzo del caso Left20-LandscapeHD3Zone
Layout
Seguire la sezione seguente per creare un modello personalizzato Left20-LandscapeHD3Zone
con la seguente configurazione:
Left20
- La zona superiore a sinistra copre il 20% delle dimensioni dello schermo orizzontale e verticale.Landscape
- Orientamento dello schermo.HD
- Proporzioni 16:9.3Zone
- Tre aree della visualizzazione.
Rappresentazione visiva del layout MultiZone
Il layout Left20-LandscapeHD3Zone
consente di creare il seguente layout multizona nel progetto:
Creazione di un layout Left20-LandscapeHD3Zone
Per creare un layout Left20-LandscapeHD3Zone
per un progetto AEM Screens, eseguire la procedura seguente.
-
Creare un progetto AEM Screens con titolo
customtemplate
. -
Passa a CRXDE Liti dalla tua istanza AEM > Strumenti > CRXDE Liti.
-
Crea una cartella in app con titolo
customtemplate
. Analogamente, creare un'altra cartella con titolo modello incustomtemplate
, come illustrato nella figura seguente.NOTEFare clic su Salva tutto nella barra delle azioni di CRXDE Lite ogni volta che si crea, si modifica o si copia contenuto in uno dei nodi. In caso contrario, non è possibile eseguire il commit degli aggiornamenti. -
Copia il modello a sinistra della barra da
/libs/screens/core/templates/splitscreenchannel/lbar-left
a/apps/customtemplate/template
. -
Rinomina lbar-left (
/apps/customtemplate/template
) copiato in my-custom-layout.
-
Passare a
/apps/customtemplate/template/my-custom-layout
e aggiornare le proprietàjcr:description
a Modello perLeft20-LandscapeHD3Zone
ejcr:title
aLeft20-LandscapeHD3Zone
. -
Passare al nodo
offline-config
da/apps/customtemplate/template/my-custom-layout/jcr:content/offline-config
e aggiornarejcr:title
aLeft20-LandscapeHD3Zone
. -
Passa alla proprietà
jcr:content
di my-custom-template da/apps/customtemplate/template/my-custom-layout/jcr:content
e aggiorna la proprietàcq:cssClass
per poter utilizzare aem-Layout my-custom-layout. -
Con riferimento al passaggio (4) in cui è stato copiato il modello barra a sinistra, è possibile visualizzare tre griglie reattive in
my-custom-layout/jcr:content
. Aggiungi una classe CSS personalizzata a ciascuna griglia reattiva nella proprietàcq:cssClass
, ad esempio my-custom-layout-top-left per il nodo r1c1.Allo stesso modo, aggiungi my-custom-layout-top-right per r1c2 e my-custom-layout-bottom per il nodo r2c1.
NOTEQueste classi personalizzate vengono utilizzate nel CSS per impostare la larghezza/altezza di queste griglie reattive.NOTEÈ possibile aggiungere o rimuovere le griglie reattive in base al numero di griglie totali desiderate. In questo esempio vengono visualizzate due griglie nella prima riga e una nella seconda riga, in modo da ottenere un totale di tre griglie reattive (r1c1, r1c2, r2c1). -
Copiare
/libs/settings/wcm/designs/screens
in/apps/settings/wcm/designs/
e rinominare la progettazione copiata come custom-template-designs. -
Passa a
/apps/settings/wcm/designs/custom-template-designs
e aggiorna la proprietàjcr:title
di custom-template-designs in customtemplate-design. -
Passare a
/apps/settings/wcm/designs/custom-template-designs
e creare un file static.css. -
Copia il contenuto nel file
static.css
:/*my-custom-layout styles*/ .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-left { width:20%; height: 36%; float: left !important; } .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-right { width:80%; height: 36%; float: left !important; } .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--bottom { width:100%; height: 64%; }
NOTEPuoi aggiornare le percentuali in base ai requisiti del modello personalizzato. -
Passare a
/apps/<project>/templates/my-custom-layout/jcr:content
e aggiornare la proprietàcq:designPath
a/apps/settings/wcm/designs/customtemplate-designs
in modo da poter caricare gli stili configurati in static.css.NOTEDigita tutti gli stili invece di copiare o incollare, il che può causare spazi bianchi che causano problemi di stile CSS.
Visualizzazione del risultato
Segui i passaggi seguenti per utilizzare il modello personalizzato di cui sopra nel tuo progetto AEM Screens:
-
Passa al progetto Screens creato al passaggio 1 e fai clic sulla cartella Canali.
-
Fare clic su Crea nella barra delle azioni e fare clic sul modello
Left20-LandscapeHD3Zone
nella procedura guidata Crea. -
Dopo aver creato un canale con il modello personalizzato, puoi aggiungere risorse al canale dall’editor. L’anteprima seguente mostra le immagini in un modello personalizzato.
Inserimento di un'immagine come livello di sfondo
Potete inserire un'immagine come livello di sfondo nel layout:
È possibile regolare la regola CSS per utilizzare "data-uri" e allineare direttamente l'immagine (Base64
codificata) nel file CSS creato in (passaggio 13), static.css.
Questa disposizione viene eseguita come segue:.cq-Screens-channel--multizone.my-CustomLayout { background: url('data:image/…;base64,…') no-repeat center center; }
Oppure, puoi seguire i passaggi seguenti:
- Assicurati che l’immagine sia inclusa in qualche modo nella configurazione offline per il canale.
- Utilizza un collegamento diretto all’immagine nel CSS qui sopra, invece della variante "data-uri".