Passa al contenuto principale

Immagini, Video, Documenti

Il CMS può utilizzare il DAM integrato nella piattaforma Discovery come media library. In questo modo è possibile utilizzare nelle pagine qualsiasi immagine, video, documento, o anche file di altro tipo. Ad esempio, è possibile selezionare un'immagine da usare come Hero Image per un componente CallToAction, oppure è possibile scegliere dei PDF da allegare ad un articolo, permettendo agli utenti finali di scaricarli quando visitano la pagina del sito che si sta realizzando.

Il CMS eroga tutti i file (immagini, video, etc.) tramite Content Delivery Network (CDN), in modo da garantire la minima latenza a livello globale. Se è stato incluso nel contratto con Reply, viene utilizzato AKAMAI come CDN per l'ottimizzazione delle immagini, come spiegato nella relativa sezione. Dal punto di vista del frontend, la CDN è completamente trasparente: il CMS fornisce delle URL che devono essere utilizzate nel frontend per immagini, video player, azioni di download, etc.

Nelle sezioni seguenti vengono approfonditi alcuni temi legati all'utilizzo degli asset digitali.

CMS & DAM​

E' possibile utilizzare asset digitali nel CMS con o senza il modulo Discovery DAM attivo. La differenza fondamentale è che senza modulo DAM gli asset devono essere caricati direttamente nel formato finale, mentre con il modulo DAM attivo è possibile beneficiare di conversioni di formato (transcodifiche). Ad esempio, per un file video in alta qualità il DAM può generare più versioni in diverse codifiche. Per un file Word o PowerPoint viene generato un PDF, etc.

Pubblicazione Asset Digitali​

Gli asset digitali sono indipendenti dal concetto di property: quando un'immagine o un video viene pubblicato, ad esempio, sarà disponibile a tutte le properties. Non è possibile pubblicare un media soltanto per una specifica property.

Quando si utilizza un media da una pagina o un contenuto, tramite un field di tipo Media, l'asset corrispondente viene automaticamente pubblicato se non è stato già pubblicato.

Ci sono casi, però, in cui si vuole pubblicare asset digitali per poter effettuare ricerche tramite i metadati degli stessi. Questo tipo di pubblicazione richiede la licenza DAM.

Selezione nel CMS​

Quando si sta editando un contenuto/componente con campi di tipo Media (da versione 1.1), Immagine o Video, in corrispondenza del campo appaiono un'icona di upload, per caricare dal file system locale, o un'icona "lente" che apre una popup per la scelta di un asset digitale presente nel DAM.

Ci sono due modalità per usare questa popup:

  • tramite carrello: prima di editare il contenuto/componente si cercano nel Discovery gli asset che servono navigando nella sezione Digital Assets. Questa sezione permette di effettuare ricerche incrociando vari tipi di filtro, ordinamenti, etc. Ogni volta che si individua un asset che si vuole usare per il frontend, si aggiunge al carrello tramite l'apposita icona. Quando si va ad editare il contenuto/componente con un campo di tipo Media (o equivalenti) e si clicca sull'icona "lente", viene subito proposto il contenuto del carrello, in modo da poter scegliere uno degli asset che erano stati precedentemente selezionati.
  • tramite ricerca libera: nella popup di selezione asset si utilizza uno switch in alto che permette di commutare tra la modalità "Carrello" e "Search". Nella modalità ricerca è possibile quindi inserire del testo libero per le ricerche.

La modalità utilizzata dipende da quanto è ricco il repository di asset digitali e da quanto è sufficiente utilizzare una semplice ricerca a testo libero per trovare gli asset. In presenza di un repository con migliaia, o decine di migliaia di asset, potrebbe essere necessario utilizzare ricerche più complesse, incrociando vari criteri, per individuare gli asset da utilizzare. In tal caso, il Carrello è la scelta consigliata. Altrimenti, è possibile utilizzare la ricerca a testo libero.

Utilizzo di URL Esterne​

Qualora si vogliano utilizzare immagini, video, etc. che non sono caricati in Discovery, è necessario definire un field di tipo String in cui mettere la URL dell'immagine esterna. Il frontend utilizzerà questo field per visualizzare l'immagine. Per le URL esterne non sarà disponibile la preview nel Page Builder del CMS, né sarà possibile ritagliare le immagini.

Immagini​

Per le immagini, se incluso nel contratto, il servizio preferenziale è AKAMAI Image Manager. Questo servizio permette di ottimizzare le immagini dinamicamente in base al browser e di passare una serie di parametri alla URL dell'immagine per applicare delle trasformazioni.

Di seguito i riferimenti per il servizio AKAMAI Image Manager:

Quando si carica o seleziona un'immagine, portando il mouse in prossimità dell'immagine appare un'icona di ritaglio (Crop). Cliccandoci, appare una popup che permette di ritagliare l'immagine, mantenendo o meno le proporzioni. Il risultato di questo ritaglio è la generazione di una URL che contiene già i parametri di "crop" AKAMAI. In questo modo non viene modificata l'immagine originale presente nel DAM e il ritaglio viene eseguito dinamicamente dal servizio AKAMAI. Dopo il primo taglio, grazie al caching della CDN, lo stesso ritaglio viene servito con latenze minime.

Oltre ai parametri di "crop" applicati da Discovery, l'applicazione client può applicare ulteriori parametri per altre trasformazioni, come ad esempio scaling dell'immagine, compressioni, etc. Per i parametri di trasformazione si rimanda al link fornito sopra.

Alcuni Esempi​

  • Crop: https://domain/.../image.jpg?im=Crop=(0,0,200,300) (ritaglio)
  • Resize: https://domain/.../image.jpg?im=Resize=(250,250) (ridimensiona rispetto ad una width x height)
  • Resize solo per width o height:
    • https://domain/.../image.jpg?im=Resize,width=500 (ridimensiona rispetto ad una width, height proporzionale)
    • https://domain/.../image.jpg?im=Resize,height=500 (ridimensiona rispetto ad una height, width proporzionale)
  • Resize (2): https://domain/.../image.jpg?imwidth=${width} (ridimensiona rispetto ad una width)
  • Scale: https://domain/.../image.jpg?im=Scale,width=0.5,height=0.5 (ridimensiona rispetto ad una % di width/height, dove 1 = 100%)
  • FitAndFill: https://domain/.../image.jpg?im=FitAndFill=(400,500)
  • FeatureCrop: https://domain/.../image.jpg?im=FeatureCrop,width=300,height=800 (ritaglia la parte importante di un'immagine)

E' possibile applicare sequenze di trasformazioni:

  • https://domain/.../image.jpg?im=Crop=(0,0,200,200);Resize=(50,50)
  • https://domain/.../image.jpg?im=Crop=(3689,343,1033,1040);Blur;Resize,width=100

Video​

Quando viene associato un video ad un componente di tipo Media, l'API restituisce la URL del video così com'è stato caricato. Se è attivo il modulo Discovery DAM, è possibile anche ottenere le URL di file generati a partire dal video caricato. Il modulo DAM permette di codificare il video in vari bitrate (dettaglio Video > Formati > Generate...) in formato progressivo o adattativo (HLS), assumendo che il player sia in grado di gestire questo formato. E' anche possibile caricare un video codificato con un tool esterno (dettaglio Video > Formati > Upload new file). Questo upload può essere utile qualora si desideri mantenere più tagli dello stesso video (es. 16:9 e 1:1) all'interno dello stesso asset. Se il modulo DAM è attivo, quando viene interrogata l'API vengono restituiti tutti questi formati e il frontend può scegliere quale mostrare, ad esempio in base al tipo di dispositivo/browser dell'utente.

Qualora si desideri usare due formati diversi a seconda del tipo di schermo, ad esempio 1:1 per smartphone in posizione verticale e 16:9 in tutti gli altri casi, è necessario ad oggi tagliare il video con un tool esterno (es. Adobe PremierePro). Una volta prodotte le due versioni del video, sono possibili due strade:

  1. caricare i due video in 2 asset diversi (es. "Campaign Summer 2023 - desktop" e "Campaign Summer 2023 - mobile"), aggiungere due field di tipo Media al Component o Content che deve usare il video, e lato frontend scegliere quale dei due fields utilizzare. Questa è l'unica opzione disponibile in assenza del modulo Discovery DAM;
  2. caricare prima il formato desktop come video master, e poi all'interno dello stesso asset caricare il video con taglio per il mobile. In questo modo al Component/Content è sufficiente aggiungere un unico field di tipo Media, e poi prendere la rendition relativa restituita dall'API.

Documenti e Altri File​

Quando viene associato un documento o qualsiasi altro tipo di file (Excel, Zip, etc.) ad un componente di tipo Media, l'API restituisce la URL del file così com'è stato caricato.

In presenza del modulo DAM alcuni formati vengono transcodificati. Ad esempio, dai formati Word e PowerPoint viene generato un PDF. Entrambe le renditions saranno disponibili via API.