Componente Immagine (v2)

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 il ritaglio nonché le altre impostazioni possono essere definiti dall’autore del modello nella finestra di dialogo per progettazione. L’editor di contenuto può caricare o selezionare le risorse nella finestra di dialogo per configurazione e ritagliare l’immagine nella finestra di dialogo per modifica. Per maggiore comodità, è disponibile anche una semplice modifica diretta dell’immagine.

Versione e compatibilità

Questo documento descrive la versione 2 del componente Immagine, originariamente introdotto con la versione 2.0.0 dei Componenti core a gennaio 2018.

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.

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

• L’inserimento tramite trascinamento di una risorsa SVG da DAM e il caricamento di un file SVG da un file system locale sono entrambi supportati.
• Il file SVG originale viene inviato in streaming (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.

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

Oltre alla normale finestra di dialogo per modifica e finestra di dialogo per progettazione, il componente Immagine offre anche una finestra di dialogo per configurazione, in cui l’immagine stessa viene definita insieme alla sua descrizione e alle sue proprietà di base.

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

Scheda Metadati

• 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.
• L’immagine è decorativa: controlla se l’immagine deve essere ignorata dalla tecnologia per l’accessibilità e quindi non richiede un testo alternativo. Questo vale solo per le immagini decorative.
• Testo alternativo: alternativa testuale del significato o della funzione dell’immagine per utenti ipovedenti.
  • Ottieni testo alternativo da DAM: se questa opzione è selezionata, come testo alternativo dell’immagine verrà inserito il valore dei dc:descriptionmetadati in DAM.
• 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:title metadati 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.
• 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.

Finestra di dialogo per modifica

La finestra di dialogo per modifica consente all’autore di contenuto di ritagliare, modificare la mappa di lancio ed eseguire lo zoom dell’immagine.

• Avvia ritaglio

  

  Selezionando questa opzione si apre un elenco a discesa per le proporzioni predefinite del ritaglio.

  • Scegli l’opzione Free Hand per definire il ritaglio desiderato.
  • Scegli l’opzione Rimuovi Ritaglio per visualizzare la risorsa originale.

  Una volta selezionata un’opzione di ritaglio, utilizza le maniglie blu per dimensionare il ritaglio sull’immagine.

  

• Ruota a destra

  

  Utilizza questa opzione per ruotare l’immagine di 90° verso destra (in senso orario).

• Riflessione orizzontale

  

  Utilizza questa opzione per capovolgere l’immagine orizzontalmente o ruotarla di 180° lungo l’asse y.

• Riflessione verticale

  

  Utilizza questa opzione per capovolgere l’immagine verticalmente o ruotarla 180° lungo l’asse x.

• Reimposta zoom

  

  Se l’immagine è già stata ingrandita, utilizza questa opzione per reimpostare il livello di zoom.

• Apri cursore Zoom

  

  Utilizza questa opzione per visualizzare un cursore che permette di controllare il livello di zoom dell’immagine.

  

L’editor locale può essere utilizzato anche per modificare l’immagine. A causa di limiti di spazio, in linea sono disponibili solo opzioni di base. Per le opzioni di modifica completa, utilizza la modalità a schermo intero.

Finestra di dialogo per progettazione

La finestra di dialogo per progettazione consente all’autore del modello di definire le opzioni di ritaglio, caricamento e rotazione disponibili per l’autore di contenuto quando utilizza questo componente.

Scheda Principale

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.

Inoltre, puoi definire quali opzioni generali del componente vengono automaticamente abilitate o disabilitate quando l’autore aggiunge il componente a una pagina.

• Abilita funzioni DM: se questa opzione è selezionata, sono disponibili le funzioni di Dynamic Media.
• Abilita immagini ottimizzate per il web: se questa opzione è selezionata, il servizio di consegna delle immagini ottimizzate per il web fornisce immagini in formato WebP, riducendone in media le dimensioni del 25%.
  • Questa opzione è disponibile solo in AEMaaCS.
  • Se non è selezionata o se il servizio di consegna delle immagini ottimizzate per il web non è disponibile, viene utilizzato Adaptive Image Servlet.
• Attiva il caricamento lento: consente di definire se l’opzione di caricamento lento è abilitata automaticamente quando si aggiunge il componente Immagine a una pagina.
• 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.
• Disabilita tracciamento UUID: consente di disabilitare il tracciamento dell’UUID della risorsa 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.

Scheda Funzioni

Nella scheda Funzioni è possibile definire le opzioni disponibili per gli autori di contenuto quando utilizzano il componente, incluse le opzioni di caricamento, orientamento e ritaglio.

• Origine

  

  Seleziona l’opzione Consenti caricamento risorse dal file system per consentire agli autori di contenuto di caricare immagini dal proprio computer locale. Per forzare gli autori di contenuto a selezionare solo le risorse da AEM, deseleziona questa opzione.

• Orientamento

  

• Rotazione
  Seleziona questa opzione per consentire all’autore di contenuto di utilizzare l’opzione
  Ruota a destra.

• Riflessione
  Seleziona questa opzione per consentire all’autore di contenuto di utilizzare
  le opzioni Riflessione orizzontale e Riflessione verticale.

  ATTENZIONE

  L’opzione Riflessione è disabilitata per impostazione predefinita. Attivando questa opzione, i pulsanti Riflessione verticale e Riflessione orizzontale vengono visualizzati nella finestra di dialogo per modifica del componente Immagine, ma questa funzione non è attualmente supportata da AEM e le modifiche effettuate utilizzando queste opzioni non verranno mantenute.

• Ritaglio

  

  Seleziona l’opzione Consenti ritaglio per consentire all’autore di contenuto di ritagliare l’immagine nella finestra di dialogo per modifica del componente.

  • Fai clic su Aggiungi per aggiungere una proporzione predefinita per il ritaglio.
  • Immetti un nome descrittivo che verrà visualizzato nel menu a discesa Avvia ritaglio.
  • Immetti il rapporto numerico per la proporzione.
  • Utilizza le maniglie di trascinamento per modificare l’ordine delle proporzioni
  • Utilizza l’icona cestino per eliminare una proporzione.
  ATTENZIONE

  In AEM, i rapporti di proporzione del ritaglio sono definiti come altezza/larghezza. Ciò differisce dalla definizione tradizionale di larghezza/altezza e viene fatto per ragioni di compatibilità con le versioni precedenti. Gli autori di contenuto non noteranno alcuna differenza, purché venga fornito un nome chiaro per la proporzione, in quanto il nome viene visualizzato nell’interfaccia utente e non nella proporzione stessa.

Scheda Stili

Il componente Immagine supporta il sistema di stili di AEM.

Adobe Client Data Layer

Il componente Immagine supporta Adobe Client Data Layer.