Image and Text Section
Con "Image and Text Section" possiamo strutturare i contenuti delle pagine standard, aggiungendo sezioni che contengono testi e immagini.
Il contenuto di questa pagina
Image and Text: panoramica
Col modulo "Image and Text Section" possiamo aggiungere un blocco di testo con o senza immagine.
Visto che all’interno di una pagina standard è possibile inserire un’unica immagine, grazie a questo modulo possiamo aggiungerne altre.
Nel CMS
Sezione "Container"
All’interno di una pagina è possibile integrare i moduli nella sezione dedicata “Container”.
Ci sono due opzioni, pertanto puoi:
- inserire un modulo già esistente tramite il bottone “Add existing items”
- crearne uno nuovo tramite il secondo bottone “Create new item”.
Per creare un modulo nuovo, devi cliccare sul bottone ”Create new item”.
Quindi, devi selezionare il tipo di ”content type” desiderato, in questo caso “Image and Text Section”.
Poi devi confermare la selezione con il bottone “Create”.
Si apre il nuovo modulo che devi compilare in tutte le sue parti necessarie.
Campo "Content item name"
Si tratta del nome assegnato all’item all’interno di Kontent.ai, quindi non del titolo del modulo che si vede poi online, ma può esserci corrispondenza. Serve per identificare l’item nel CMS e viene utilizzato per la ricerca effettuata sotto il campo presente nella sezione “Content & assets”. Come standard va assegnato un nome per tutte le varianti linguistiche del progetto, ad es. Name Modul / Nome Modulo.
Ricordati di staccare le versioni linguistiche con uno "slash".
Questo campo è editabile solamente in una lingua del progetto.
Campo "Title"
Se desiderato può essere assegnato un titolo al modulo, altrimenti si lascia vuoto questo campo.
Campo "Description"
In questo campo bisogna inserire i testi ricordando che non è previsto l’inserimento di immagini (solamente nella sezione dedicata).
Nota: sotto la sezione “Pagina standard” di questo manuale si trovano una serie di suggerimenti su come scrivere correttamente i testi per il web.
Sezione "Image"
In questa sezione può essere inserita una sola immagine alla volta.
Viene indicata la dimensione massima che può avere un’immagine, cioè non più di 3 MB.
L’immagine può essere caricata direttamente dalla sezione asset di Kontent.ai tramite il bottone “Pick from assets”.
Se si tratta invece di un’immagine nuova, ancora non presente sotto la sezione asset, si carica tramite “Browse” o si trascina direttamente in questo spazio con la funziona di “Drag & drop”.
Sezione "Image position"
Seguono varie impostazioni, possiamo ad es. decidere l’allineamento dell’immagine, a destra o sinistra. Il testo segue l’immagine e quindi si adegua all’orientamento della foto.
Sezione "Image expansion"
Inoltre è possibile definire lo spazio da occupare in larghezza. Un’immagine può occupare l’intera larghezza ("full") del contenuto disponibile, solo metà ("half") o infine solo un terzo ("single").
Con la versione a piena larghezza ("full") compare prima l’immagine e a seguire poi il testo.
La qualità delle immagini dovrebbe sempre essere buona e la risoluzione di 72 DPI.
Inoltre vanno rispettate le misure standard previste dal webdesigner, questo per garantire un aspetto ottimale su ogni tipo di dispositivo ("responsive design").
Di seguito puoi visionare i prototipi del webdesigner.
Varianti immagini con testo (pagine di dettaglio):
https://demo.siag.it/landesverwaltung_v3/modules/bilder.html
Di seguito le misure standard da rispettare:
Varianti immagini con testo:
- "full": larghezza: 1170 pixel, altezza: 450 pixel
- "half": larghezza: 562 pixel, altezza: 300 pixel
- "single": larghezza: 562 pixel, altezza: 300 pixel
Sezione "Image height"
L’impostazione successiva riguarda la definizione dell’altezza dell’immagine, si può lasciare quella predefinita ("fixed") o invece ottenere l’altezza piena dell’immagine ("full").
Nota: Tutte le immagini utilizzate devono essere libere da diritto d'autore ("Copyright") o "royalty-free". Oppure, di proprietà di chi le usa. Non è permesso per legge prendere delle immagini da internet senza autorizzazione.
Tutte le immagini necessitano di un testo descrittivo chiamato "alt-text". Questo testo deve descrivere l’immagine stessa e serve per essere conformi agli obblighi di accessibilità. I programmi di Screenreader leggono questo testo all'utente diversamente abile. Nel caso di loghi o testi contenuti nell’immagine stessa, ad es. dei banner, è buona norma inserire gli stessi testi nel campo descrittivo per fare in modo che tutti gli utenti giungano all'informazione completa.
Nel caso di un'immagine più complessa, bisogna inserire una descrizione più approfondita in formato testo per dare un'alternativa accessibile.
Una volta inserita l’immagine bisogna inserire la descrizione ("alt-text") nel campo dedicato o se presa dall’archivio del progetto (sezione "Assets") controllare che sia compilato.
Cliccando sull’immagine inserita si raggiunge il campo descrittivo obbligatorio:
Sezione "Background Type"
Nell’ultima sezione possiamo definire il colore di sfondo per l’intero modulo, c’è una variante con sfondo trasparente ("transparent") e un’altra con sfondo grigio ("grey").
Online: esempio anteprima modulo “Image and Text Section” con immagine inserita assieme ad un testo (versione trasparente + immagine "single"):
Online: esempio anteprima modulo “Image and Text Section” con immagine inserita assieme ad un testo (versione grigia + immagine "half"):
Ultimo aggiornamento: 08/09/2025