Carosello
Come garantire l'accessibilità del Carosello
Per superare il test di accessibilità che possono essere lanciati in rete e quindi guadagnare punteggio per un corretto posizionamento nei motori (ranking), selezionare le voci come da riquadro in rosso - vedi immagine qui a destra.
Come trattare le immagini da pubblicare nel Carosello
Come noto un carosello è costituito da una serie di immagini, dotate o meno di testi sovrapposti.
Le immagini si alternano con un effetto dissolvenza (fade) o con uno scivolamento laterale (scroll). Ogni immagine ha una dimensione (alezza e larghezza) esperessa in pixel (punti video)
In fase di configurazione del sito, svolta dagli amministratori, viene decisa la proporzione del carosello che ospita le immagini. Pertanto il Carosello viene configurato con una altezza fissa e una larghezza che varia in funzione dello spazio del blocco ospitante (piena pagina o una colonna).
Vanno seguite alcune regole per l'uso corretto delle immagini:
- se lo spazio che ospita il carosello è di 420px in senso verticale, sarà impossibile collocare nel carosello immagini che superano tale spazio in quanto saranno centrate sul blocco e ridimensionate da TYPO3 sempre al 100% dello spazio disponibile
- non si potranno caricare immagini con proporzioni differenti pena un risultato costituito da una serie di immagini che cambiano altezza ad ogni passaggio, facendo "saltare" continuamente il testo successivo al carosello con un effetto fortemente inestetico e molto fastidioso
- le immagini quindi vanno fornite nella giusta proporzione altezza/larghezza, ad esempio se configurata una altezza e larghezza di 16:9 (visualizzazione desktop), l'ideale è di passare una immagine con la medesima proporzione pena il ritaglio operato da TYPO3
- se viene caricata una immagine con una proporzione diversa il Carosello assumerà due comportamenti differenti:
- se l'opzione attivabile dalla linguetta Background è Parallax si potrà visualizzare l'immagine (sempre ridimensionata al 100%) allineata in basso e man mano la pagina viene scrollata si vede la sezione superiore della immagine (vedi più sotto carosello 1)
- se non è stata attivata l'opzione Parallax l'immagine sarà centrata sul box fisso che la ospita, subendo un taglio sopra e sotto la stessa (vedi carosello 2)
Supponiamo di voler a aggiungere la seguente immagine ad un carosello:
Laddove il Carosello è stato progettato per ospitare una immagine nella proporzione 16:9, il risultato sarà il seguente, dove TYPO3 ridimensiona l'immagine in orizzontale ridimensionandola al 100% dello spazio disponibile nella colonna ed operando un taglio della stessa sopra (se effetto parallax impostato) o sopra e sotto (senza effetto parallax)
i due caroselli soprastastanti, in uno schermo di 1440px x 768 saranno visualizzati nella dimensione orizzontale pari a 992px e dimensione verticale impostata a 360 pixel (fissa)
Pertanto se l'utente ridimensiona la pagina il blocco sarà di dimensione inferiore in larghezza ma sempre fisso in altezza ovvero di 360px.
COME RISOLVERE IL PROBLEMA
Dato che la dimensione verticale è sempre la stessa, il redattore potrà operare in uno dei seguenti modi:
- caricata l'immagine (vedi manuale9) espandere le opzioni e ritagliarla per ogni periferica (breakpoint) in modo differente, oppure
- caricare una immagine nella giusta proporzione o dimensione in altezza e larghezza del blocco ospitante
- se dispone di un programma grafico, ritagliare un pezzo dell'immagine e aggiungere un bordo bianco a sinistra e destra, in alto e/o basso e salvarla nella giusta proporzione. Ovviamente questa non è una soluzione auspicabile in quanto il risultato sarebbe simile al seguente (Carosello 3)