Show Menu
ARGOMENTI×

Componente immagine

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

Utilizzo

Il componente Immagine offre una selezione adattiva delle immagini e un comportamento reattivo, con caricamento pigro per il visitatore della pagina e posizionamento e ritaglio semplificati delle immagini per l’autore del contenuto.
Le larghezze delle immagini, il ritaglio e altre impostazioni possono essere definiti dall’autore del modello nella finestra di dialogo Finestra di dialogo Progettazione della progettazione. L’editor del contenuto può caricare o selezionare le risorse nella finestra di dialogo di configurazione e ritagliare l’immagine nella finestra di dialogo di modifica. Per maggiore comodità, è disponibile anche una semplice modifica locale dell’immagine.

Funzioni reattive

Il componente Immagine è dotato di robuste funzioni reattive pronte all'uso. A livello di modello di pagina, la finestra di dialogo di progettazione può essere utilizzata per definire le larghezze predefinite della risorsa immagine. Il componente Immagine caricherà automaticamente la larghezza corretta da visualizzare a seconda delle dimensioni della finestra del browser. Quando la finestra viene ridimensionata, il componente Immagine carica automaticamente le dimensioni corrette. Non è necessario che gli sviluppatori di componenti si preoccupino di definire query multimediali personalizzate, dal momento che 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.

Versione e compatibilità

La versione corrente del componente Immagine è v2, introdotta con la release 2.0.0 dei componenti core a gennaio 2018, ed è descritta in questo documento.
La tabella seguente elenca tutte le versioni supportate del componente, le versioni AEM con cui sono compatibili le versioni del componente e i collegamenti alla documentazione delle versioni precedenti.
Versione componente
AEM 6.3
AEM 6.4
AEM 6.5
AEM as a Cloud Service
v2
-
Compatibile
Compatibile
Compatibile
Compatibile
Compatibile
Compatibile
-
Per ulteriori informazioni sulle versioni e sulle versioni dei componenti core, consulta il documento Versioni dei componenti core.

Supporto SVG

La grafica vettoriale scalabile (SVG) è supportata dal componente Immagine.
  • Sono supportati il trascinamento di una risorsa SVG da DAM e il caricamento di un file SVG da un file system locale.
  • Il Servlet immagine adattivo trasferisce in streaming il file SVG originale (le trasformazioni vengono ignorate).
  • Per un’immagine SVG, le "immagini intelligenti" e le "dimensioni avanzate" sono impostate su un array vuoto nel modello di immagine.

Sicurezza

Per motivi di sicurezza, l’SVG originale non viene mai chiamato direttamente dall’Editor immagine. Viene chiamato attraverso <img src=“path-to-component”> . Ciò impedisce al browser di eseguire eventuali script incorporati nel file SVG.
Il supporto per SVG richiede la release 2.1.0 dei componenti core o versioni successive insieme al service pack 2 per AEM 6.4 o al service pack 3 per AEM 6.3 o versioni successive per supportare le nuove funzioni dell’editor di immagini in AEM.

Output componente di esempio

Per provare il componente Immagine e per vedere esempi delle relative opzioni di configurazione, nonché l’output HTML e JSON, visita la Libreria aem_cmp_library_imageComponenti.

Dettagli tecnici

La documentazione tecnica più recente sul componente Immagine è disponibile su GitHub .
Per ulteriori informazioni sullo sviluppo dei componenti core, consulta la documentazione per lo sviluppatore di componenti core.
Dalla release 2.1.0 di Core Components, il componente Immagine supporta i microdati schema.orgschema.org.

Configura finestra di dialogo

Oltre alla finestra di dialogo standard per la modifica e la Finestra di dialogo Progettazione progettazione, il componente Immagine offre una finestra di dialogo di configurazione in cui l’immagine stessa è definita insieme alla descrizione e alle proprietà di base.

Scheda Risorsa

  • Risorsa immagine
    • Trascinate una risorsa dal browser delle risorse o toccate l'opzione Sfoglia per caricarla da un file system locale.
    • Toccate o fate clic su Cancella per deselezionare l'immagine attualmente selezionata.
    • Toccate o fate clic su Modifica per gestire le rappresentazioni della risorsa nell’editor risorse.

Scheda Metadati

  • L'immagine è decorativa Controllare se l'immagine deve essere ignorata dalla tecnologia di supporto e quindi non richiede un testo alternativo. Questo vale solo per le immagini decorative.
  • Testo alternativo Alternativo testuale del significato o della funzione dell'immagine per lettori ipovedenti.
    • Ottieni testo alternativo da DAM: se questa opzione è attivata, il testo alternativo dell'immagine verrà popolato con il valore dei dc:description metadati in DAM.
  • Didascalia Ulteriori informazioni sull’immagine, visualizzate per impostazione predefinita sotto l’immagine.
    • Ottieni didascalia da DAM Se questa opzione è selezionata, il testo della didascalia dell’immagine verrà popolato con il valore dei dc:title metadati in DAM.
    • Visualizza la didascalia come pop-up Se questa opzione è selezionata, la didascalia non verrà visualizzata sotto l'immagine, ma come pop-up visualizzato da alcuni browser quando si passa il puntatore sull'immagine.
  • Collegamento
    • Collegate l’immagine a un’altra risorsa.
    • Utilizzate la finestra di dialogo di selezione per collegarvi a un’altra risorsa AEM.
    • Se non effettuate il collegamento a una risorsa AEM, immettete l’URL assoluto. Gli URL non soluti verranno interpretati come relativi ad AEM.
  • ID - Questa opzione consente di controllare l’identificatore univoco del componente nell’HTML e nel livello Utilizzo del livello dati client Adobe con i componenti core dati.
    • Se lasciato vuoto, viene generato automaticamente un ID univoco che può essere trovato esaminando la pagina risultante.
    • Se viene specificato un ID, è responsabilità dell’autore assicurarsi che sia univoco.
    • La modifica dell’ID può avere un impatto su CSS, JS e tracciamento dei livelli di dati.

Edit Dialog

La finestra di dialogo di modifica consente all’autore del contenuto di ritagliare, modificare la mappa del lancio e ingrandire l’immagine.
  • Avvia ritaglio
    Selezionando questa opzione si apre un elenco a discesa per le proporzioni di ritaglio predefinite.
    • Scegliete l’opzione Mano ​libera per definire il ritaglio personalizzato.
    • Scegliete l’opzione Rimuovi ritaglio per visualizzare la risorsa originale.
    Una volta selezionata l’opzione di ritaglio, usate le maniglie blu per ridimensionare il ritaglio sull’immagine.
  • Ruota a destra
    Usate questa opzione per ruotare l’immagine di 90° verso destra (in senso orario).
  • Rifletti orizzontalmente
    Usate questa opzione per riflettere l’immagine in orizzontale o ruotare l’immagine di 180° lungo l’asse y.
  • Rifletti in verticale
    Usate questa opzione per riflettere l’immagine in verticale o ruotare l’immagine di 180° lungo l’asse x.
  • Ripristina zoom
    Se l’immagine è già stata ingrandita, usate questa opzione per ripristinare il livello di zoom.
  • Apri cursore zoom
    Usate questa opzione per visualizzare un cursore per controllare il livello di zoom dell’immagine.
L’editor locale può anche essere usato per modificare l’immagine. A causa di limiti di spazio, sono disponibili solo opzioni di base in linea. Per le opzioni di modifica completa, utilizzate la modalità a schermo intero.
Le operazioni di modifica delle immagini (ritaglio, capovolgimento, rotazione) non sono supportate per le immagini GIF. Eventuali modifiche apportate in modalità di modifica ai GIF non verranno mantenute.

Finestra di dialogo Progettazione

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

Scheda Principale

Nella scheda Principale potete definire un elenco di larghezze in pixel per l’immagine e il componente caricherà automaticamente la larghezza più appropriata in base alle dimensioni del browser. Si tratta di una parte importante delle funzioni Funzioni reattive reattive del componente Immagine.
Inoltre, è possibile definire quali opzioni generali del componente vengono automaticamente o disattivate quando l’autore aggiunge il componente a una pagina.
  • Abilita caricamento lento Consente di definire se l’opzione di caricamento pigro è abilitata automaticamente quando si aggiunge il componente immagine a una pagina.
  • L’immagine è decorativa Consente di definire se l’opzione per l’immagine decorativa è abilitata automaticamente quando si aggiunge il componente immagine a una pagina.
  • Ottieni testo alternativo da DAM Definisci se l’opzione per recuperare il testo alternativo da DAM è abilitata automaticamente quando aggiungi il componente immagine a una pagina.
  • Ottieni didascalia da DAM Definisci se l’opzione per recuperare la didascalia da DAM è abilitata automaticamente quando si aggiunge il componente immagine a una pagina.
  • Visualizza la didascalia come pop-up Definisci se l’opzione per visualizzare la didascalia immagine come pop-up è abilitata automaticamente quando si aggiunge il componente immagine a una pagina.
  • Disattiva il controllo tracciamento UUUID per disattivare il tracciamento dell’UUID della risorsa immagine.
  • Larghezza Definisce un elenco di larghezze in pixel per l’immagine e il componente carica automaticamente la larghezza più appropriata in base alle dimensioni del browser.
    • Toccate o fate clic sul pulsante Aggiungi per aggiungere un’altra dimensione.
      • Utilizzare le maniglie per riordinare l'ordine delle dimensioni.
      • Utilizzate l'icona Elimina per rimuovere una larghezza.
    • Per impostazione predefinita, il caricamento delle immagini viene differito finché non diventano visibili.
      • Selezionate l’opzione Disattiva caricamento lento per caricare le immagini al caricamento della pagina.
  • Qualità JPEG Fattore di qualità (in percentuale da 0 e 100) per le immagini JPEG trasformate (ad es. ridimensionate o ritagliate).
L’opzione Qualità JPEG è disponibile a partire dalla release 2.2.0 dei componenti core.
A partire dalla release 2.2.0 dei componenti core, il componente Immagine aggiunge alla risorsa immagine l’attributo UUID univoco data-asset-id per consentire il tracciamento e l’analisi del numero di visualizzazioni ricevute dalle singole risorse.

Features Tab

Nella scheda Funzioni è possibile definire le opzioni disponibili per gli autori dei contenuti quando utilizzano il componente, incluse le opzioni di caricamento, orientamento e ritaglio.
  • Origine
    Selezionate l’opzione Consenti caricamento risorse dal file system per consentire agli autori di contenuti di caricare immagini dal computer locale. Per obbligare gli autori di contenuti a selezionare solo le risorse da AEM, deselezionate questa opzione.
  • Orientamento
  • Ruota Utilizzate questa opzione per consentire all'autore del contenuto di utilizzare l'opzione Ruota a destra .
  • Capovolgi Utilizzate questa opzione per consentire all’autore del contenuto di utilizzare le opzioni Rifletti in orizzontale e Rifletti in verticale .
    Per impostazione predefinita, l’opzione Rifletti è disattivata. Attivando questa opzione, i pulsanti Rifletti in verticale e Rifletti in orizzontale vengono visualizzati nella finestra di dialogo di modifica del componente immagine. Tuttavia, al momento la funzione non è supportata da AEM e le modifiche apportate con queste opzioni non vengono mantenute.
  • Ritaglio
    Selezionate l’opzione Consenti ritaglio per consentire all’autore del contenuto di ritagliare l’immagine nel componente nella finestra di dialogo di modifica.
    • Fate clic su Aggiungi per aggiungere proporzioni di ritaglio predefinite.
    • Immettete un nome descrittivo che verrà visualizzato nel menu a discesa Avvia ritaglio .
    • Immettete il rapporto numerico dell’aspetto.
    • Usate le maniglie di trascinamento per riordinare l’ordine delle proporzioni
    • Usate l’icona del cestino per eliminare le proporzioni.
    Note that in AEM, crop aspect ratios are defined as height/width . Questo differisce dalla definizione tradizionale di larghezza/altezza, per ragioni di compatibilità con versioni precedenti. Gli autori dei contenuti non saranno a conoscenza di alcuna differenza, purché sia stato specificato un nome chiaro per il rapporto, dal momento che il nome viene visualizzato nell’interfaccia utente e non per il rapporto stesso.

Scheda Stili

Il componente Immagine supporta AEM Style System .

Servlet immagine adattiva

Il componente Immagine utilizza il servlet immagine adattivo del componente principale. Il Servlet immagine adattivo è responsabile dell’elaborazione e dello streaming delle immagini e può essere utilizzato dagli sviluppatori nelle personalizzazioni dei componenti core.
Le richieste condizionali effettuate tramite l’ Last-Modified intestazione sono supportate dal servlet immagine adattivo, ma la memorizzazione nella cache dell’ Last-Modified intestazione deve essere abilitata nel dispatcher .