logo

Extra Block Types (EBT) - Nuova esperienza con Layout Builder❗

Extra Block Types (EBT) - tipi di blocchi stilizzati e personalizzabili: Slideshows, Tabs, Cards, Accordion e molti altri. Impostazioni integrate per sfondo, DOM Box, plugin javascript. Vivi oggi il futuro della costruzione dei layout.

Demo moduli EBT Scarica moduli EBT

❗Extra Paragraph Types (EPT) - Nuova esperienza con Paragraphs

Extra Paragraph Types (EPT) - insieme di moduli basati su paragrafi in modo analogo.

Demo moduli EPT Scarica moduli EPT

Scorri
  1. Home
  2. Articles

1.8. Immagine - Lavorare con le immagini, stili di immagine.

18/10/2025, by Ivan

Drupal è in grado di lavorare non solo con pagine di testo, ma anche con immagini. Per farlo, è necessario abilitare il modulo Image. Questo modulo consente di allegare foto ai nodi e di visualizzarle nelle dimensioni desiderate. Inoltre, in punti diversi del sito, le dimensioni possono variare. Ad esempio, nel teaser del nodo possiamo mostrare una foto piccola, mentre nella pagina completa del nodo una foto grande.

Nelle lezioni precedenti abbiamo creato il tipo di contenuto Dipendente. Apriamo ora la gestione dei campi di questo tipo di contenuto e aggiungiamo un campo immagine.

employee field

Ora, nel modulo di creazione/modifica di un dipendente, sarà disponibile un campo per il caricamento dell’immagine:

employee photo

Questa immagine verrà mostrata nella pagina del dipendente, ma nelle dimensioni originali e con l’etichetta “Image”. Per personalizzare la visualizzazione, andiamo nella scheda Gestisci visualizzazione del tipo di contenuto Dipendente.

setting up Drupal fields

Spostiamo il campo immagine in alto, disattiviamo la visualizzazione del nome del campo e clicchiamo sull’icona dell’ingranaggio (impostazioni) per scegliere la dimensione dell’immagine da mostrare. Per impostazione predefinita, Drupal fornisce tre stili di immagine: Large (480x480), Medium (220x220) e Thumbnail (100x100). Impostiamo quindi per il teaser lo stile Thumbnail e per il nodo completo Medium. Inoltre, nel teaser facciamo sì che l’immagine sia un link al contenuto del dipendente:

image field Drupal

Ora, negli elenchi dei teaser, i dipendenti avranno un link alla loro pagina completa. Oltre agli stili di immagine predefiniti (Large, Medium, Thumbnail), è possibile crearne di personalizzati. Andiamo quindi in Configurazione → Stili di immagine:

/admin/config/media/image-styles

Qui vedremo gli stili già esistenti e il pulsante Aggiungi stile di immagine.

types of displaying images of drupal

Creiamo uno stile di dimensioni 150x150 pixel e diamogli un nome che ne renda facile l’identificazione. Nella pagina di modifica vedremo le azioni disponibili che possiamo applicare:

drupal presets

Convert – converte la foto nel formato desiderato.
Crop – ritaglia la foto senza ridimensionarla.
Desaturate – rende la foto in bianco e nero.
Resize – ridimensiona senza mantenere le proporzioni.
Rotate – ruota la foto dell’angolo desiderato.
Scale – ridimensiona mantenendo le proporzioni.
Scale and crop – ridimensiona mantenendo le proporzioni e poi ritaglia sul lato più grande.

È possibile combinare più azioni. Ad esempio, impostiamo Scale 150x150 e poi rendiamo la foto in bianco e nero.

Ridimensionamento:

Drupal image scaling

Il risultato sarà simile a questo:

image drupal

Torniamo ora alla pagina di gestione della visualizzazione dei campi e impostiamo per il teaser del dipendente lo stile 150x150.

new preset drupal

Ora il teaser del dipendente apparirà così:

Drupal teaser

Ora sai come caricare immagini in Drupal e come mostrarle nel formato desiderato. Nelle prossime lezioni vedremo come creare una galleria fotografica in modo analogo.