1.8. Immagine: Lavorare con le immagini, preset.

Drupal può lavorare non solo con pagine di testo, ma anche con immagini. Per farlo, è necessario attivare il modulo Image. Il modulo Image permette di allegare foto ai nodi e di visualizzarle nelle dimensioni desiderate. Inoltre, in posizioni diverse del sito queste dimensioni possono variare. Ad esempio, nel teaser di un nodo possiamo mostrare una foto piccola, mentre nel nodo completo una foto grande.

Nelle lezioni precedenti abbiamo creato il tipo di contenuto Dipendente. Apriamo la scheda Gestisci campi (Manage fields) per questo tipo di contenuto e aggiungiamo un campo immagine.

Ora, nel modulo per creare o modificare un dipendente, sarà presente un campo per il caricamento dell’immagine:

Questa immagine verrà visualizzata nella pagina del dipendente, ma nelle dimensioni originali e con l’etichetta del campo “Immagine”. Per configurare l’output, è necessario andare nella scheda Gestisci visualizzazione (Manage display) nelle impostazioni del tipo di contenuto Dipendente.

Spostiamo il campo immagine verso l’alto, rimuoviamo la visualizzazione del nome del campo e clicchiamo sull’icona dell’ingranaggio (impostazioni) per impostare la dimensione dell’immagine visualizzata. Per impostazione predefinita, abbiamo già dei formati predefiniti (preset): Large (480x480), Medium (220x220), Thumbnail (100x100). Impostiamo per il teaser il formato Thumbnail e per il nodo completo Medium. Inoltre, nel teaser faremo in modo che l’immagine sia un link alla pagina del dipendente:

Ora, negli elenchi teaser, ciascun dipendente avrà un collegamento alla sua pagina completa.

Oltre ai preset predefiniti Large, Medium e Thumbnail, puoi creare le tue dimensioni personalizzate per le immagini. Andiamo nella pagina Configurazione → Stili immagine:

/admin/config/media/image-styles

Lì vedrai i preset esistenti e il pulsante per aggiungere un nuovo stile di immagine:

Creiamo un formato da 150x150 pixel e chiamiamolo con lo stesso nome. Nella pagina di modifica del preset vediamo le azioni che possono essere aggiunte:

Convert – converte l’immagine in un altro formato.

Crop – ritaglia la foto senza ridimensionarla.

Desaturate – converte la foto in bianco e nero.

Resize – ridimensiona l’immagine senza mantenere le proporzioni.

Rotation – ruota la foto dell’angolo desiderato.

Scale – ridimensiona l’immagine mantenendo le proporzioni.

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

Scala:

Ora torniamo alla pagina Gestisci visualizzazione e impostiamo l’output del campo immagine tramite il preset 150x150 per il teaser del dipendente.

Ora il teaser del dipendente apparirà così:

Ora sai come caricare le foto in Drupal e come visualizzarle nel modo che desideri. Nelle prossime lezioni vedremo come creare una galleria fotografica con un approccio simile.