Griglia galleria

Utilizzare una griglia galleria per presentare contemporaneamente una serie di immagini in righe e colonne.

Per aggiungere una galleria di immagini alla pagina, effettuare le operazioni riportate di seguito.
  1. Andare alla pagina che si desidera modificare e assicurarsi che Selettore modifica sia impostato su Modifica.
  2. Aggiungere il componente alla pagina. Il componente griglia di modelli mostra un'immagine segnaposto finché non si selezionano le immagini che si desidera utilizzare.
  3. Per aggiungere una o più immagini alla galleria, fare clic sulla relativa icona di menu Icona del menu Componente, scegliere Impostazioni, quindi fare clic su Immagini nella scheda Generale.
  4. Fare clic su Aggiungi immagini.
  5. Selezionare una o più immagini.

    Nota:

    Nella finestra vengono visualizzati tutti i file disponibili. È necessario scegliere il tipo di file appropriato per il contesto. Ad esempio, se si sceglie un file immagine, è necessario selezionare un file con un formato immagine valido (GIF, JPG, JPEG, PNG o SVG).
    1. Individuare e selezionare le immagini che si desidera usare.

      Se non viene visualizzato alcun asset digitale, fare clic su Icona filtro asset e modificare il filtro della raccolta in Tutti.

    2. Se è stata selezionata un'immagine da una cartella di documenti, è possibile collegare il file invece di copiarlo nel sito. Per creare un collegamento al file, selezionare Utilizzare un riferimento al file originale anziché copiare il file nel sito. Se non si seleziona questa opzione, una copia del file verrà memorizzata con il sito e verranno creati riferimenti per la copia dal sito. Il collegamento al file originale evita la duplicazione del contenuto. Il collegamento consente ai visitatori del sito di visualizzare il contenuto anche se le autorizzazioni per il file vengono modificate o limitano in altro modo la visualizzazione.
    3. Fare clic su OK.
    4. Se è stato selezionato un asset digitale, è possibile selezionare una rendition specifica. Se non si seleziona una rendition, verrà utilizzata la dimensione originale. Se si desidera che sia pubblicata la versione più recente dell'asset quando il sito viene pubblicato, selezionare Usa la versione più recente dell'asset.
    Le immagini selezionate vengono aggiunte alla lista di immagini. Trascinare le immagini per riordinarle nell'elenco (e nella griglia). Il titolo predefinito di ciascuna immagine è il nome file senza l'estensione.
  6. Per modificare il titolo, la descrizione o altre opzioni per una determinata immagine, fare clic sull'immagine nella lista e apportare la modifica.
    È anche possibile associare un collegamento o altre azioni a un'immagine nella galleria.
    1. Nel pannello Impostazioni di una determinata immagine, fare clic sul campo Collega.
    2. Selezionare una delle opzioni riportate di seguito.
      • Nessun collegamento: quando l'utente fa clic sull'immagine, non viene eseguita alcuna azione.

      • Pagina Web: consente di specificare l'URL completo di una pagina esterna o di un sito e di selezionare dove aprire il collegamento.

      • Pagina sito: usare il selettore pagina per selezionare una pagina nel sito corrente, quindi selezionare dove aprire il collegamento. È possibile specificare parametri URL aggiuntivi nel formato key1=value1&key2=value2. I valori vuoti sono supportati. Ad esempio: key1=&key2=value2. È inoltre possibile specificare un ancoraggio URL, ma in questo caso sarà necessario aggiungere un layout di sezione Ancoraggio speciale nel punto della pagina sito di destinazione in cui si desidera venga risolto il collegamento di ancoraggio e specificare lo stesso nome di ancoraggio nelle impostazioni di layout utilizzate durante la definizione dell'azione trigger.

        Nota:

        Il layout della sezione Ancoraggio necessario per utilizzare gli ancoraggi URL è distribuito in OCE Toolkit. Per informazioni su come ottenere il toolkit, vedere Sviluppare con OCE Toolkit.
      • Download file: consente di scaricare un file selezionato dal repository. Selezionare un file.

        Se si seleziona un asset digitale, è possibile selezionare una rendition specifica. Se non si seleziona una rendition, verrà utilizzata la dimensione originale. Se si desidera che sia pubblicata la versione più recente dell'asset quando il sito viene pubblicato, selezionare Usa la versione più recente dell'asset. Se non si seleziona Usa la versione più recente dell'asset, viene utilizzata la versione più recente pubblicata, anziché una versione bozza più recente, se disponibile.

      • Elemento di contenuto: selezionare un elemento di contenuto da un repository degli asset associato, scegliere la pagina dei dettagli da visualizzare e indicare se si desidera aprire la pagina nella stessa finestra o in una nuova.

      • Posta elettronica: specificare un indirizzo di posta elettronica valido e, facoltativamente, un oggetto. Il messaggio risultante viene aperto e inviato tramite il client di posta elettronica predefinito.

      • Anteprima immagine: l'immagine selezionata apparirà come un overlay sulla pagina.

      • Mappa: immettere un indirizzo valido o coordinate valide e selezionare dove si desidera venga aperta la mappa nei browser desktop e Mobile.

      • Chiamata telefonica: immettere un numero di telefono valido.

    3. Fare clic su Indietro per tornare al pannello di impostazioni dell'immagine. Fare di nuovo clic su Indietro per tornare alla lista di immagini e selezionare un'altra immagine da aggiornare.
    4. Una volta terminato l'aggiornamento delle singole immagini, fare clic su Indietro per specificare le opzioni della galleria.
  7. Utilizzare l'opzione Layout per disporre le immagini in una griglia.
    • Muratura
    • Colonne
    • Personalizzato
    Ciascuna di queste opzioni è descritta nelle operazioni riportate di seguito.
  8. Scegliere il layout Muratura per disporre automaticamente le immagini in righe all'interno dello spazio disponibile.
    Le righe risultanti avranno un'altezza uniforme, ma nessuna colonna definita.
    Segue la descrizione di GUID-4CAF671A-F931-4177-BB92-E5F082663996-default.png
    Descrizione dell'illustrazione GUID-4CAF671A-F931-4177-BB92-E5F082663996-default.png
    1. Specificare Altezza per scalare tutte le immagini in proporzione con l'altezza specificata in pixel.
    2. Specificare Spaziatura immagini per aumentare o ridurre lo spazio tra le immagini nella riga.
  9. Scegliere il layout Colonna per disporre le immagini in righe e colonne.
    1. Selezionare un'opzione di Scala per modificare la presentazione delle immagini nella griglia.
      • Ritaglia: la più piccola delle due dimensioni (larghezza o altezza) viene scalata in base allo spazio disponibile e la dimensione più grande viene ritagliata per impedire che l'immagine venga deformata.

      • Adatta: ciascuna immagine viene scalata in modo che l'intera immagine rientri nello spazio disponibile senza essere distorta.
      La griglia seguente, ad esempio, utilizza quattro colonne e scala le sei immagini per adattarle.
      Segue la descrizione di GUID-4AB0B5DD-89B4-492D-A968-45482B3953CE-default.png
      Descrizione dell'illustrazione GUID-4AB0B5DD-89B4-492D-A968-45482B3953CE-default.png

      La stessa griglia con l'immagine ritagliata:
      Segue la descrizione di GUID-3B1C55AE-E995-41C4-A9D9-F52FA75FF7E3-default.png
      Descrizione dell'illustrazione GUID-3B1C55AE-E995-41C4-A9D9-F52FA75FF7E3-default.png

    2. Specificare la Simmetria per determinare la forma delle celle nella griglia.
      • Quadrato: simmetria di 1:1.

      • Orizzontale: simmetria di 16:9.

      • Verticale: simmetria di 9:16.
      • Personalizzata: specificare valori numerici personalizzati per la simmetria.

    3. Specificare il numero di Colonne.
      La griglia viene modificata automaticamente per creare colonne di pari larghezza.
    4. Specificare Spaziatura immagini per aumentare o ridurre lo spazio tra le immagini sia nelle righe che nelle colonne.
  10. Scegliere il layout Personalizzato per disporre le immagini in righe e colonne in base alla dimensione e alla larghezza di un'immagine specificate.
    1. Selezionare un'opzione di Scala per modificare la presentazione delle immagini nella griglia.
      • Ritaglia: la più piccola delle due dimensioni (larghezza o altezza) viene scalata in base allo spazio disponibile e la dimensione più grande viene ritagliata per impedire che l'immagine venga deformata.

      • Adatta: ciascuna immagine viene scalata in modo che l'intera immagine rientri nello spazio disponibile senza essere distorta.
    2. Specificare un valore per Altezza immagine e per Larghezza immagine al fine di determinare la forma delle celle nella griglia.
      La griglia viene modificata automaticamente per creare celle con le dimensioni specificate.
    3. Specificare Spaziatura immagini per aumentare o ridurre lo spazio tra le immagini sia nelle righe che nelle colonne.
  11. Specificare le opzioni di Allineamento, Larghezza e Spaziatura per posizionare la griglia nello slot.
    Utilizzare Larghezza per specificare la larghezza, espressa in pixel, della galleria all'interno dello slot. Fare clic su un'opzione di allineamento diversa da Riempimento per specificare la larghezza. Dopo avere impostato la larghezza, è possibile utilizzare Riempimento per estendere l'immagine in base alla larghezza specificata.