Componente Immagine (v1) image-component-v
Il componente core Immagine è un componente immagine adattivo che offre funzioni di modifica diretta.
Utilizzo usage
Il componente Immagine permette di posizionare facilmente le immagini e modificarle direttamente una volta posizionate. Consente all’autore di contenuto la selezione adattiva delle immagini con caricamento lento e il ritaglio delle immagini.
Le larghezze consentite 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à version-and-compatibility
Questo documento descrive la versione 1 del componente Immagine, originariamente introdotto con la versione 1.0.0 dei Componenti core in AEM 6.3.
La tabella che segue riporta la compatibilità della versione 1 del componente Immagine.
Esempio di output del componente sample-component-output
Di seguito è riportato un esempio tratto da We.Retail.
Schermata screenshot
HTML html
<div class="cmp cmp-image aem-GridColumn aem-GridColumn--default--12">
<noscript data-cmp-image="{"smartImages":[],"smartSizes":[],"lazyEnabled":true}">
<img src="/content/we-retail/us/en/equipment/_jcr_content/root/responsivegrid/image.img.jpg" alt="Surfboard"/>
</noscript>
</div>
JSON json
"image": {
"columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
"smartSizes": [],
"smartImages": [],
"lazyEnabled": true,
"src": "/content/we-retail/us/en/equipment/equipment/jcr%3acontent/root/responsivegrid/image.img.jpeg",
":type": "weretail/components/content/image"
}
Finestra di dialogo per configurazione configure-dialog
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.
-
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.
-
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.
-
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.
-
Didascalia: informazioni aggiuntive sull’immagine, per impostazione predefinita viene visualizzata sotto l’immagine.
-
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.
Finestra di dialogo per modifica edit-dialog
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).
-
Mappa di lancio
Utilizza questa opzione per applicare una mappa di lancio all’immagine. Selezionando questa opzione si apre una nuova finestra che consente all’utente di selezionare la forma della mappa:
-
Aggiungi mappa rettangolare
-
Aggiungi mappa circolare
-
Aggiungi mappa poligonale
- Per impostazione predefinita, aggiunge una mappa triangolare. Fare doppio clic su una linea della forma per aggiungere una nuova maniglia di ridimensionamento blu su un nuovo lato.
Una volta selezionata, la forma della mappa viene sovrapposta all’immagine per consentire il ridimensionamento. Trascinare e rilasciare le maniglie di ridimensionamento blu per adattare la forma.
Dopo aver ridimensionato la mappa di lancio, fai clic su di essa per aprire una barra degli strumenti mobile e definire il percorso del collegamento.
-
Percorso
-
Utilizza l’opzione Selettore percorso per selezionare un percorso in AEM
-
Se il percorso non è in AEM, utilizza l’URL assoluto. I percorsi non assoluti vengono interpretati come relativi ad AEM.
-
Testo alt
Descrizione alternativa della destinazione del percorso -
Destinazione
- Stessa scheda
- Nuova scheda
- Frame principale
- Frame superiore
-
Tocca o fai clic sul segno di spunta blu per salvare, sulla x nera per annullare e sul cestino rosso per eliminare la mappa.
-
-
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 design-dialog
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.
Principale main
Nella scheda Principale puoi definire un elenco di larghezze consentite, espresse in pixel, in modo che l’immagine possa automaticamente caricare la larghezza giusta tra quelle in elenco.
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. Deseleziona l’opzione Attiva il caricamento lento per caricare le immagini al caricamento della pagina.
-
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.
Funzioni features
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.
-
Abilita immagini ottimizzate per il web: se questa opzione è selezionata, il servizio di consegna delle immagini ottimizzate per il web distribuisce le immagini in formato WebP, riducendone le dimensioni in media 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.
-
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: utilizza questa opzione per consentire all’autore di contenuto di utilizzare l’opzione Ruota a destra.
- Riflessione
Utilizzare questa opzione per consentire all'autore di contenuto di utilizzare le opzioni Riflessione orizzontale e Riflessione verticale.
note caution CAUTION 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.
note caution CAUTION 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.
Dettagli tecnici technical-details
La documentazione tecnica più recente sul componente Immagine è disponibile su GitHub.
L’intero progetto dei Componenti core può essere scaricato da GitHub.
Per ulteriori informazioni sullo sviluppo di Componenti core, vedi la documentazione per gli sviluppatori di Componenti core.