Il componente Immagine componente di base è un componente immagine adattivo che offre funzioni di modifica diretta.
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 impostazioni aggiuntive possono essere definiti dall'autore del modello nella finestra di dialogo di progettazione . L'editor dei contenuti può caricare o selezionare le risorse nella finestra di dialogo configura e ritagliare l'immagine nella finestra di dialogo di modifica a3/>. Per maggiore comodità, è disponibile anche una semplice modifica locale dell’immagine.
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.
Il componente Immagine (a partire da release 2.13.0) supporta le risorse Contenuti multimediali dinamici. Quando questa opzione è attivata, queste funzioni consentono di aggiungere risorse di immagini per file multimediali dinamici con un semplice trascinamento o tramite il browser delle risorse, esattamente come per qualsiasi altra immagine. Sono inoltre supportati i modificatori di immagini, i predefiniti per immagini e le colture intelligenti.
Le esperienze Web create con i componenti core non possono includere funzionalità avanzate, potenti, robuste, ad alte prestazioni e multipiattaforma per le immagini multimediali dinamiche.
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.
Nella tabella seguente sono elencate 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.4 | AEM 6.5 | AEM as a Cloud Service |
---|---|---|---|
v2 | Compatibile | Compatibile | Compatibile |
v1 | Compatibile | Compatibile | - |
Per ulteriori informazioni sulle versioni e sulle versioni dei componenti core, consultare il documento Versioni dei componenti core.
La grafica vettoriale scalabile (SVG) è supportata dal componente Immagine.
Per motivi di sicurezza, l’SVG originale non viene mai chiamato direttamente dall’Editor immagine. Viene chiamato tramite <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 successiva insieme a service pack 2 per AEM 6.4 o superiore per supportare le funzionalità di editor di immagini all'interno di AEM.
Per provare il componente Immagine e vedere esempi delle relative opzioni di configurazione, nonché l'output HTML e JSON, visitare la Libreria componenti.
La documentazione tecnica più recente sul componente Immagine è disponibile su GitHub.
Ulteriori dettagli sullo sviluppo di componenti core sono disponibili nella documentazione per lo sviluppo di componenti core.
Il componente Immagine supporta schema.org microdata.
Oltre alla finestra di dialogo modifica e alla finestra di dialogo di progettazione standard, 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.
&
, indipendentemente da quale predefinito sia selezionato.dc:description
metadati in DAM.dc:title
metadati in DAM.Smart Cropand Image Preset si escludono a vicenda. Se l’autore deve usare un predefinito per immagini insieme a una rappresentazione Ritaglio avanzato, dovrà usare i Modificatori immagini per aggiungere manualmente dei predefiniti.
La finestra di dialogo di modifica consente all’autore del contenuto di ritagliare, modificare la mappa del lancio e ingrandire l’immagine.
Le funzioni di ritaglio, rotazione e zoom non si applicano alle risorse per file multimediali dinamici. Se le funzioni per contenuti multimediali dinamici sono abilitate, qualsiasi modifica alle risorse per contenuti multimediali dinamici deve essere eseguita tramite la finestra di dialogo Configura.
Avvia ritaglio
Selezionando questa opzione si apre un elenco a discesa per le proporzioni di ritaglio predefinite.
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.
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.
Nella scheda Principale è possibile 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 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.
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 da file system per consentire agli autori di contenuti di caricare immagini dal proprio computer locale. Per obbligare gli autori del contenuto a selezionare solo le risorse da AEM, deselezionate questa opzione.
Orientamento
Ruota: utilizzate questa opzione per consentire all'autore del contenuto di utilizzare il pulsante
Ruota a destra.
CapovolgiUtilizzate questa opzione per consentire all'autore del contenuto di utilizzare il pulsante
Capovolgi orizzontalmente e Rifletti verticalmente.
Per impostazione predefinita, l'opzione Capovolgi è disattivata. Attivando questa opzione, i pulsanti Rifletti in verticale e Rifletti in orizzontale vengono visualizzati nella finestra di dialogo di modifica del componente immagine, ma la funzione non è attualmente 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.
In AEM, le proporzioni del ritaglio sono definite come altezza/larghezza. 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.
Il componente Immagine supporta il AEM Sistema di stile.
Il componente Immagine utilizza il servlet immagine adattivo del componente principale. I servlet adattivi per immagini sono responsabili dell’elaborazione e dello streaming delle immagini e possono essere utilizzati dagli sviluppatori nelle personalizzazioni dei componenti core.
Le richieste condizionali effettuate tramite l'intestazione Last-Modified
sono supportate dal servlet immagine adattivo, ma la memorizzazione nella cache dell' Last-Modified
intestazione deve essere abilitata nel dispatcher.
La configurazione del Dispatcher di esempio di AEM Project Archetype contiene già questa configurazione.