Il componente core Immagine è un componente immagine adattivo che offre funzioni di modifica diretta.
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.
Questo documento descrive la versione 2 del componente Immagine, originariamente introdotto con la versione 2.0.0 dei Componenti core a gennaio 2018.
Questo documento descrive la versione 1 del componente Immagine.
Per informazioni dettagliate sulla versione corrente del componente Immagine, vedi il documento Componente Immagine.
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.
Il componente immagine è alimentato da Adaptive Image Servlet. Per informazioni dettagliate su come funziona, consulta il documento Adaptive Image Servlet.
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.
Il componente Immagine supporta la grafica vettoriale scalabile (SVG).
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.
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.
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.
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.
&
, indipendentemente da qualunque cosa sia selezionata per Tipo di predefinito.dc:description
metadati in DAM.dc:title
metadati in DAM.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.
La finestra di dialogo per modifica consente all’autore di contenuto di ritagliare, modificare la mappa di lancio ed eseguire lo zoom dell’immagine.
Le funzioni di ritaglio, rotazione e zoom non sono applicabili alle risorse Dynamic Media. Se le funzioni di Dynamic Media sono abilitate, tutte le modifiche apportate alle risorse Dynamic Media devono essere eseguite tramite la finestra di dialogo per configurazione.
Avvia ritaglio
Selezionando questa opzione si apre un elenco a discesa per le proporzioni predefinite del ritaglio.
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.
Le funzioni di modifica delle immagini (ritaglio, riflessione, rotazione) non sono supportate per le immagini GIF. Tutte le modifiche apportate in modalità di modifica alle immagini GIF non verranno mantenute.
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.
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.
Consulta il documento Adaptive Image Servlet per suggerimenti su come ottimizzare la selezione delle rappresentazioni definendone con attenzione le dimensioni.
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.
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.
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.
Il componente Immagine supporta il sistema di stili di AEM.
Il componente Immagine supporta Adobe Client Data Layer.