30 Ottobre 2015 - Design & Development

Immagini responsive con Drupal: breakpoints & picture

Immagini responsive con Drupal

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.

Le impostazioni di breakpoints Drupal

Breakpoints settings

 

Definiti tutti i breakpoint, creiamo un nuovo gruppo a cui verranno associati.

Breakpoints groups

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 style

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 drupal

Picture mapping

 

Nelle impostazioni del picture mapping associamo ad ogni breakpoint il relativo stile per le immagini.

Breakpoints Picture

Breakpoints Picture

 

Il passo finale consiste nel cambiare il tipo formato di output nelle opzioni di visualizzazione del nostro campo immagine.

Image output picture

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

Condividi questo articolo

Altre notizie dal blog.

Accessibilità siti web

13 Novembre 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.

Leggi
Drupal 8

6 Febbraio 2018 - Design & Development

Passaggio da Drupal 7 a Drupal 8: i pro e i contro raccontati dai nostri developer

Una delle novità più rilevanti che hanno recentemente interessato il mondo dello sviluppo è stata l’avvento di Drupal 8, la più recente versione del software utilizzato dalle più importanti companies e dai maggiori siti governativi presenti in tutto il mondo.

Leggi
Giornata Internazionale dei Musei

18 Maggio 2016 - Design & Development

Giornata Internazionale dei Musei: quando condividere fa cultura

Custodire tesori di inestimabile bellezza e valore e tenerli quasi nascosti. È il colmo, no? Il pensar comune che vede museo=noia è ancora molto diffuso nonostante le numerose iniziative messe in atto negli ultimi anni, volte a diffondere una sempre maggiore cultura legata alle visite museali. Il museo non dev’essere considerato solo un contenitore di cultura, ma un luogo in cui la cultura vive e interagisce con chi ne entra in contatto.

Leggi
Immagini Responsive

24 Settembre 2015 - Design & Development

Immagini Responsive: approcci e tecniche di implementazione

Ad oggi il Responsive Web Design rappresenta uno standard per quanto riguarda lo sviluppo di siti e web application: abbiamo la possibilità di progettare e realizzare design che si adattano in base al display in cui vengono visualizzati.

Leggi