Componente Immagine

Il componente core Immagine è un componente immagine adattivo che offre funzioni di modifica diretta.

Utilizzo

Il componente Immagine offre all’autore di contenuto una selezione adattiva delle immagini e un comportamento reattivo con caricamento lento per il visitatore della pagina, nonché una facilità di posizionamento e ritaglio delle immagini.

Le larghezze delle immagini e le altre impostazioni possono essere definiti dall’autore del modello nella finestra di dialogo per progettazione. L’editor dei contenuti può caricare o selezionare le risorse nella finestra di dialogo di configurazione.

Versione e compatibilità

La versione corrente del componente Immagine è la v3, introdotta con la versione 2.18.0 dei Componenti core a febbraio 2022, ed è quella descritta in questo documento.

La tabella che segue descrive tutte le versioni supportate del componente, le versioni di AEM con cui le versioni del componente sono compatibili e i collegamenti alla documentazione delle versioni precedenti.

Versione del componente AEM 6.4 AEM 6.5 AEM as a Cloud Service
v3 - Compatibile Compatibile
v2 Compatibile Compatibile Compatibile
v1 Compatibile Compatibile -

Per ulteriori informazioni sulle versioni e sugli aggiornamenti dei Componenti core, vedi il documento Versioni dei Componenti core.

Funzioni reattive

Il componente Immagine è dotato di solide funzioni reattive pronte per l’uso. A livello di modello della pagina, si può utilizzare la finestra di dialogo per Progettazione per definire le larghezze predefinite della risorsa immagine. Il componente Immagine carica quindi automaticamente la larghezza corretta da visualizzare, in base alle dimensioni della finestra del browser. Quando la finestra viene ridimensionata, il componente Immagine carica dinamicamente la dimensione corretta dell’immagine. Gli sviluppatori di componenti non devono preoccuparsi di definire query multimediali personalizzate, in quanto il componente Immagine è già ottimizzato per caricare il contenuto.

Inoltre, il componente Immagine supporta il caricamento lento per posticipare il caricamento della risorsa immagine effettiva fino a quando non sarà visibile nel browser, aumentando la reattività delle pagine.

SUGGERIMENTO

Consulta la sezione Servlet Immagine adattiva per ulteriori informazioni tecniche su queste funzioni e suggerimenti per ottimizzare la selezione della rappresentazione.

Supporto di Dynamic Media

Il componente Immagine (a partire dalla versione 2.13.0) supporta le risorse di Dynamic Media. Se abilitate, queste funzioni consentono di aggiungere risorse immagine di Dynamic Media con una semplice azione di trascinamento e rilascio della selezione oppure tramite il browser delle risorse, esattamente come faresti con qualsiasi altra immagine. Sono inoltre supportati modificatori di immagini, immagini preimpostate e ritaglio avanzato.

La tua esperienza del web costruita con i Componenti core ora si arricchisce delle molte funzionalità per le immagini offerte da Dynamic Media, efficienti, performanti, multipiattaforma e con tecnologia Sensei.

Supporto di SVG

Il componente Immagine supporta la grafica vettoriale scalabile (SVG).

  • Il trascinamento e rilascio di una risorsa SVG da DAM e il caricamento di un file SVG da un file system locale sono entrambi supportati.
  • L’Adaptive Image Servlet trasmette in streaming il file SVG originale (le trasformazioni vengono ignorate).
  • Per un’immagine SVG, le “immagini intelligenti” e le “dimensioni intelligenti” sono impostate su un array vuoto nel modello di immagine.

Sicurezza

Per motivi di sicurezza, il file SVG originale non viene mai richiamato direttamente dall’editor di immagini. Viene richiamato tramite <img src=“path-to-component”>. Ciò impedisce al browser di eseguire eventuali script incorporati nel file SVG.

NOTA

Il supporto SVG richiede la versione 2.1.0 o successiva dei Componenti core insieme al service pack 2 per AEM 6.4 o versioni successive per supportare le funzioni dell’editor di immagini in AEM.

Esempio di output del componente

Per avere un’idea del componente Immagine e vedere esempi delle opzioni di configurazione e dell’output HTML e JSON, visita la libreria dei componenti.

Dettagli tecnici

La documentazione tecnica più recente sul componente Immagine è disponibile su GitHub.

Per ulteriori informazioni sullo sviluppo di Componenti core, vedi la documentazione per gli sviluppatori di Componenti core.

Il componente Immagine supporta i microdati schema.org.

Finestra di dialogo per configurazione

Il componente Immagine offre una finestra di dialogo di configurazione in cui l’immagine stessa è definita insieme alla relativa descrizione e alle proprietà di base.

Scheda Risorsa

Scheda Risorsa della finestra di dialogo per configurazione del componente Immagine

  • Eredita immagine in primo piano dalla pagina - Questa opzione utilizza l’immagine in primo piano della pagina collegata o l’immagine in primo piano della pagina corrente se l’immagine non è collegata.

  • Testo alternativo per l’accessibilità - Questo campo consente di definire una descrizione dell’immagine per gli utenti ipovedenti.

    • Eredita testo alternativo dalla pagina - Questa opzione utilizza la descrizione alternativa del valore della risorsa collegata dei metadati dc:description in DAM o nella pagina corrente se non è collegata alcuna risorsa.
  • Risorsa immagine

    • Rilascia una risorsa dal browser di risorse oppure tocca l’opzione Sfoglia per caricarla da un file system locale.
    • Tocca o fai clic su Cancella per deselezionare l’immagine attualmente selezionata.
    • Tocca o fai clic su Modifica per gestire i rendering della risorsa nell’editor risorse.
  • Non fornire testo alternativo - Questa opzione contrassegna l’immagine da ignorare da tecnologie per l’accessibilità, come gli assistenti vocali, nei casi in cui l’immagine sia puramente decorativa o in altro modo non trasmetta informazioni aggiuntive alla pagina.

Scheda Metadati

Scheda Metadati della finestra di dialogo per configurazione del componente Immagine

  • Tipo di predefinito: definisce i tipi di immagini preimpostate disponibili, Predefinito immagine o Ritaglio avanzato, ed è disponibile solo se le funzioni di Dynamic Media sono abilitate.
    • Predefinito immagine: se per Tipo di predefinito è selezionata l’opzione Predefinito immagine, è disponibile l’elenco a discesa Predefinito immagine che consente di selezionare i predefiniti di Dynamic Media disponibili. Questa opzione è disponibile solo se per la risorsa selezionata esistono dei predefiniti.
    • Ritaglio avanzato: quando per Tipo di predefinito è selezionata l’opzione Ritaglio avanzato, avanzato, è disponibile l’elenco a discesa Rendering che consente di selezionare i rendering disponibili della risorsa selezionata. Questa opzione è disponibile solo se per la risorsa selezionata sono definiti rendering.
    • Modificatori immagine: qui si possono definire comandi Dynamic Media aggiuntivi per la gestione delle immagini, separati da &, indipendentemente da qualunque cosa sia selezionata per Tipo di predefinito.
  • Didascalia: informazioni aggiuntive sull’immagine, per impostazione predefinita viene visualizzata sotto l’immagine.
    • Ottieni didascalia da DAM: se questa opzione è selezionata, come didascalia dell’immagine verrà inserito il valore dei dc:titlemetadati in DAM.
    • Visualizza didascalia come nota a comparsa: se questa opzione è selezionata, la didascalia non verrà visualizzata sotto l’immagine, ma, in alcuni browser, come nota a comparsa quando si passa il puntatore sull’immagine.
  • Collegamento: collega l’immagine a un’altra risorsa.
    • Utilizza la finestra di dialogo per selezione per stabilire il collegamento con un’altra risorsa AEM.
    • Se non stabilisci il collegamento con un’altra risorsa AEM, immetti l’URL assoluto. Gli URL non assoluti vengono interpretati come relativi ad AEM.
    • Apri collegamento in una nuova scheda - Questa opzione apre il collegamento in una nuova finestra del browser.
  • ID: questa opzione consente di controllare l’identificatore univoco del componente nel codice HTML e in Data Layer.
    • Se non specificato, viene generato automaticamente un ID univoco reperibile sulla pagina risultante.
    • Se l’ID viene specificato, è responsabilità dell’autore accertarsi che sia univoco.
    • La modifica dell’ID può avere un impatto sul tracciamento di CSS, JS e Data Layer.
SUGGERIMENTO

Le opzioni Ritaglio avanzato e Predefinito immagine si escludono a vicenda. Se un autore deve utilizzare un predefinito immagine insieme a al rendering di un ritaglio avanzato, deve utilizzare i modificatori immagine per aggiungere manualmente i predefiniti.

Scheda Stili

Scheda Stili della finestra di dialogo di modifica del componente Immagine

Il componente Immagine supporta il sistema di stili di AEM.

Utilizza il menu a discesa per selezionare gli stili da applicare al componente. Le selezioni effettuate nella finestra di dialogo di modifica hanno lo stesso effetto di quelle selezionate nella barra degli strumenti del componente.

Gli stili devono essere configurati per questo componente nella finestra di dialogo di progettazione affinché il menu a discesa sia disponibile.

Finestra di dialogo per progettazione

Scheda Principale della finestra di dialogo per progettazione del componente Immagine

  • Abilita funzioni DM - Se questa opzione è selezionata, sono disponibili le funzioni di Dynamic Media.
    • Questa opzione viene visualizzata solo quando Dynamic Media è abilitato nell’ambiente.
  • Disattiva il caricamento lento - Se questa opzione è selezionata, il componente precarica tutte le immagini senza caricamento lento.
  • L’immagine è decorativa: consente di definire se l’opzione dell’immagine decorativa è abilitata automaticamente quando si aggiunge il componente Immagine a una pagina.
  • Ottieni testo alternativo da DAM: consente di definire se l’opzione per recuperare il testo alternativo dal DAM è abilitata automaticamente quando si aggiunge il componente Immagine a una pagina.
  • Ottieni didascalia da DAM: consente di definire se l’opzione per recuperare la didascalia dal DAM è abilitata automaticamente quando si aggiunge il componente Immagine a una pagina.
  • Visualizza didascalia come nota a comparsa: consente di definire se l’opzione per visualizzare la didascalia dell’immagine come nota a comparsa è abilitata automaticamente quando si aggiunge il componente Immagine a una pagina.
  • Larghezza di ridimensionamento - Questo valore viene utilizzato per ridimensionare la larghezza delle immagini di base che sono risorse DAM.
    • Le proporzioni delle immagini vengono mantenute.
    • Se il valore è maggiore della larghezza effettiva dell’immagine, questo valore non avrà alcun effetto.
    • Questo valore non ha alcun effetto sulle immagini di SVG.

Nella scheda Principale puoi definire un elenco di larghezze consentite, espresse in pixel, in modo che l’immagine e il componente possano automaticamente caricare la larghezza appropriata in base alle dimensioni della finestra del browser. Questa è una parte importante delle funzioni reattive del componente Immagine.

  • Larghezze: consente di definire un elenco di larghezze, espresse in pixel, in modo che l’immagine e il componente possano automaticamente caricare la larghezza appropriata in base alle dimensioni della finestra del browser.
    • Tocca o fai clic sul pulsante Aggiungi per aggiungere un’altra dimensione.
      • Utilizza le maniglie per modificare l’ordine delle dimensioni.
      • Utilizza l’icona Elimina per rimuovere una larghezza.
    • Per impostazione predefinita, il caricamento delle immagini viene differito fino a quando non diventano visibili.
      • Seleziona l’opzione Disattiva il caricamento lento per caricare le immagini al caricamento della pagina.
  • Qualità JPEG: fattore di qualità, espresso come percentuale tra 0 e 100, per le immagini JPEG trasformate, ad esempio ridimensionate o ritagliate.
SUGGERIMENTO

Consulta la sezione Servlet immagine adattiva per ulteriori informazioni tecniche sulle sue funzioni e suggerimenti su come ottimizzare la selezione della rappresentazione definendo con cura le larghezze.

Scheda Stili

Il componente Immagine supporta il sistema di stili di AEM.

Adaptive Image Servlet

Il componente Immagine utilizza l’Adaptive Image Servlet dei Componente core. L’Adaptive Image Servlet è responsabile dell’elaborazione e dello streaming delle immagini e può essere utilizzato dagli sviluppatori nelle loro personalizzazioni dei Componenti core.

Ottimizzazione della selezione della rappresentazione

Il servlet per immagini adattive cercherà di scegliere la rappresentazione migliore per le dimensioni e il tipo di immagine richiesti. Si consiglia di definire in sincronia le rappresentazioni DAM e le larghezze consentite del componente Immagine, in modo che il servlet per immagini adattive possa eseguire la minor quantità di elaborazione possibile.

Ciò migliora le prestazioni ed evita che alcune immagini non vengano elaborate correttamente dalla libreria di elaborazione delle immagini sottostante.

NOTA

Le richieste condizionali tramite l’intestazione Last-Modified sono supportate dall’Adaptive Image Servlet, ma il caching dell’intestazione Last-Modified deve essere abilitato in Dispatcher.

L’esempio di configurazione di Dispatcher in Archetipo progetto AEM già include questa configurazione.

Adobe Client Data Layer

Il componente Immagine supporta Adobe Client Data Layer.

In questa pagina