Design & Development
Immagini responsive con Drupal: breakpoints & picture
30 Ottobre 2015
L’utilizzo delle immagini responsive ormai è un elemento fondamentale nello sviluppo di ogni progetto web. Le tecniche “classiche” permettono di adattare le immagini al design fluido dei nostri siti e richiedono fondamentalmente una buona conoscenza del linguaggio CSS.
Tuttavia rendere le immagini responsive non risolve uno degli aspetti principali: servire immagini che abbiano dimensioni e peso opportuni per il dispositivo utilizzato dall’utente.
Le tecnologie alla base delle adaptive images risolvono questo problema fornendo immagini ottimizzate in base alla risoluzione del client. In questo caso è molto probabile ritrovarsi a dover gestire un buon numero di file per una singola immagine e questo può rappresentare uno svantaggio per la gestione dei contenuti. Diventa quindi necessario ricorrere agli automatismi offerti dai CMS.
Drupal, un CMS opensource molto versatile, rende le cose semplici grazie a due moduli aggiuntivi che saranno integrati in Drupal 8: Breakpoints e Picture.
Il modulo Breakpoints permette di definire le media query e i multipliers necessari in base alla risoluzione e alla densità di pixel dei device. Picture si occupa di stampare il tag <picture> che conterrà il set di immagini stabilito in base ai breakpoint.
Le impostazioni di breakpoints
Il primo passo consiste nel creare i nostri breakpoint e indicare le media query corrispondenti. Per supportare anche i display ad alta densità di pixel possiamo utilizzare i multipliers.
Breakpoints settings
Definiti tutti i breakpoint, creiamo un nuovo gruppo a cui verranno associati.
Breakpoint group
Una volta creato il gruppo per il nostro tema aggiungiamo gli stili per le immagini dalla voce di menù “Add responsive style”. Il modulo duplicherà uno stile esistente (che poi imposteremo in base alle nostre esigenze) tante volte quanto sono i nostri breakpoint.
Breakpoints styles
Associare i breakpoint a picture
A questo punto dobbiamo associare gli stili per le immagini ai breakpoint ed è qui che entrerà in gioco il modulo Picture.
Aggiungiamo quindi un nuovo picture mapping selezionando il gruppo di breakpoint creato in precedenza.
Picture mapping
Nelle impostazioni del picture mapping associamo ad ogni breakpoint il relativo stile per le immagini.
Breakpoints Picture
Il passo finale consiste nel cambiare il tipo formato di output nelle opzioni di visualizzazione del nostro campo immagine.
Image output picture
Adesso ogni immagine caricata in quel campo verrà fornita in diversi formati attraverso il tag <picture>!
Per avere una panoramica più completa del supporto e del funzionamento di questo particolare tag potete leggere il nostro articolo Immagini responsive: approcci e tecniche di implementazione.
Riferimenti:
https://www.drupal.org/documentation/modules/picture
http://www.mediamachine.co.za/sandbox/responsive-images-drupal-7
Altri post
Dal Blog
-
12 Gen 2021
News
On-line il nuovo sito di Athena, che sceglie IM*MEDIA per il web design e WebDev per l'applicazione e-commerce
Una storia di imprenditoria tutta italiana. Athena nasce nel 1973 come una piccola impresa artigiana, fino a diventare una realtà internazionale.
-
15 Dic 2020
Digital
Promuovere attività locali su Google: vantaggi e opportunità per le aziende
Che siano piccoli negozi di paese o grandi centri commerciali, le attività locali possono usufruire di numerosi vantaggi e ricevere grande visibilità sui motori di ricerca grazie a strumenti pensati ad hoc, come Google My Business.
-
13 Nov 2020
Design & Development
Accessibilità siti web e e-commerce: cos'è e perché è importante
A causa dell’isolamento sociale forzato dal Covid-19, un numero sempre maggiore di persone, soprattutto persone con disabilità, è costretta a usufruire di servizi online, scontrandosi spesso con le difficoltà legate al tema dell’accessibilità dei siti web e degli e-commerce.