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.

Versione di AEM
Componente Immagine v1
6.3
Compatibile
6.4
Compatibile
CAUTION
Questo documento descrive la versione 1 del componente Immagine.
Per informazioni dettagliate sulla versione corrente del componente Immagine, vedi il documento 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="{&#34;smartImages&#34;:[],&#34;smartSizes&#34;:[],&#34;lazyEnabled&#34;: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"
            }
NOTE
L’esportazione JSON dai Componenti core richiede la versione 1.1.0 dei Componenti core. Per ulteriori informazioni, vedi le informazioni sulla compatibilità dei Componenti core v1.

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.

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

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

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c