Questo articolo è un aggiornamento del vecchio articolo valido per Drupal 6/7 riguardante ImageCache.
La gestione delle immagini in Drupal 11
In Drupal 11 il caricamento e il ritaglio delle immagini si basa sui campi “Image” e sugli Image Styles nativi. Non serve più installare moduli esterni come ImageCache: basta definire uno o più stili (ritaglio, ridimensionamento, watermark) da Amministrazione → Configurazione → Media → Image styles, quindi assegnarli al campo immagine del proprio contenuto.
Inserimento inline con Media Library
Per inserire immagini all’interno del testo si utilizza la Media Library integrata e il nuovo editor CKEditor 5. Basta configurare il campo “Media” su type “Image” e abilitare il plugin “Media” in Text Editor. Così durante la modifica del corpo del testo si può trascinare o selezionare un media image e scegliere lo stile (thumbnail, medium, large…) con un clic.
Campi immagine e gallerie
Se serve una galleria fotografica, si crea un tipo di contenuto “Gallery” con un campo ripetibile “Image” o un campo “Media” referenziabile. Quindi con Views e Layout Builder si imposta un display a griglia o masonry, applicando gli Image Styles configurati per garantire uniformità e performance. Allo stesso modo si può anche aggiungere un campo media multi valore all'interno di un tipo di contenuto esistente e, sempre con Layout Builder o una vista, si procede con la configurazione della modalità di visualizzazione.
Crop e ritaglio interattivo
Per Drupal 11 è disponibile il modulo Crop API che abbinato al modulo contrib Image widget Crop permette di ritagliare direttamente in anteprima la porzione desiderata. Dopo aver caricato l’immagine, si apre l’interfaccia di ritaglio nel form di modifica del media: l’utente trascina la selezione e salva, preservando l’originale e generando automaticamente le varianti ritagliate.
In alternativa si può usare Crop API + Focal Point per dare la possibilità all'editor di selezionare il centro dell'immagine in modo che tutti i vari Image Styles lo utilizzino come riferimento per centrare le immagini prima di un ritaglio in modo da mantenere il soggetto sempre visibile.
Best practice e accessibilità
Con Drupal 11 si hanno molti altri vantaggi nella gestione delle immagini:
- Lazy Loading nativo per attivare il caricamento ritardato in modo da alleggerire il primo rendering della pagina.
- Alt Text obbligatorio: configurare il campo “Alt” come richiesto per WCAG e SEO.
- Formati moderni: grazie al formato WebP integrato nativamente su Drupal 11 è possibile ottenere immagini di qualità ma con un peso più ridotto rispetto al classico formato JPG.