Crea una galleria di immagini.

Impara DXPR BuilderCrea le pagineSegui un tutorial

Qui crei una galleria fotografica: un’intestazione centrata, tre foto fianco a fianco con testo alt, e una presentazione su una banda grigia. Usala per mostrare un luogo o un evento in immagini. Per mostrare progetti ciascuno con una descrizione, segui invece Crea una galleria portfolio.

Il video crea una galleria di dipinti di studenti per un’università.

Prima di iniziare

  • Il tuo ruolo ha il permesso Edit with DXPR Builder.
  • La libreria multimediale contiene almeno sei foto, ritagliate alle stesse proporzioni.
  • La pagina è aperta nel builder. Per una nuova, vai in Content > Add content > Landing Page (/node/add/landing_page) e fai clic su Save.

Passaggio 1: aggiungi l’header

  1. Fai clic su Add Elements sulla pagina vuota e scegli Section dalla scheda Layout.
  2. Passa sopra alla sezione e apri More > Settings. In HTML classes scegli Align text center, poi fai clic su Save.
  3. Fai clic su + sulla sezione e scegli Text dalla scheda Content.
  4. Digita "Student art gallery" come Heading 2, aggiungi una riga di introduzione e fai clic su Save. Il tema stampa il titolo della pagina come Heading 1 della pagina. Per rendere invece questa intestazione l’Heading 1, vedi Crea pagine SEO-friendly.

Passaggio 2: aggiungi la griglia di foto

  1. Passa sopra alla sezione e fai clic su Add Section Below. Fai clic su + sulla nuova sezione e scegli Row; arriva con due colonne uguali.
  2. Fai clic sull’icona griglia della riga (Column layout), scegli il preset 1/3 + 1/3 + 1/3 e fai clic su Save.
  3. Fai clic su + nella prima colonna e scegli Image.
  4. Fai clic su Select Image, cerca nella libreria multimediale con Apply filters, fai clic su una foto e fai clic su Insert selected.
  5. Apri il pannello SEO e digita l’Alt attribute: ciò che chi non può vedere la foto dovrebbe sapere. Fai clic su Save.
  6. Ripeti per la seconda e la terza colonna.

Foto ritagliate alle stesse proporzioni mantengono la riga pari.

Passaggio 3: aggiungi la presentazione

  1. Aggiungi una terza sezione con Add Section Below e apri il suo More > Settings. Scegli Align text center in HTML classes e un Background grigio chiaro nel pannello Style. Fai clic su Save.
  2. Fai clic su + sulla sezione e scegli Image carousel.
  3. Fai clic su Select Image, cerca nella libreria, fai clic su tre foto e fai clic su Insert selected, poi fai clic su Save.
  4. Fai di nuovo clic su + sulla sezione e scegli Text; arriva sopra il carosello. Digita "Slideshow" come Heading 2 e fai clic su Save.

Passaggio 4: salva e vedi l’anteprima

  1. Fai clic su Save nella barra degli strumenti del builder.
  2. Apri il menu vista (l’icona occhio) e scegli Preview.

Per approfondire

Non mostrato nel video:

  • Didascalie: metti una Card nella colonna e aggiungi un elemento Text con la didascalia dentro. Poi aggiungi l’Image dentro la card; arriva sopra la didascalia.
  • Foto a dimensione intera: imposta Image link sul file a dimensione intera e Image link target su New window.
  • Stile: su ogni immagine, imposta Border radius su 4 e Drop shadow su 1 nel pannello Style per un leggero rilievo.
  • Tempi della presentazione: imposta Interval sul carosello, in millisecondi. In Hide seleziona Hide pagination control o Hide prev/next buttons per rimuovere quei controlli.
  • Galleria che si riempie automaticamente: in Structure > Views > Add view, crea una vista dei media immagine con una visualizzazione blocco in formato Grid. Inseriscila dalla scheda Drupal Views e i nuovi caricamenti compaiono automaticamente.

Cosa vedi

L’intestazione centrata apre la pagina, seguita da tre foto fianco a fianco. Sulla banda grigia sotto, la presentazione mostra una foto alla volta e passa alla successiva ogni cinque secondi.

Se non vedi le foto come mostrate

  • Insert selected non aggiunge foto. La libreria si stava ancora ricaricando dopo Apply filters, quindi il tuo clic non ha selezionato la foto. Aspetta che la griglia si assesti, verifica che la foto mostri un segno di spunta, e fai di nuovo clic su Insert selected.
  • La libreria multimediale è vuota. Non ci sono ancora immagini caricate, oppure il browser multimediale non è impostato. Vedi Le immagini non si caricano o spariscono.
  • Le tre foto hanno altezze diverse. Le loro proporzioni differiscono. Ritagliale alle stesse proporzioni, ricaricale e scegli le nuove copie.
  • Le tue modifiche non ci sono più dopo un ricaricamento. Hai lasciato la pagina prima di fare clic su Save nella barra degli strumenti del builder. Se Save mostra un errore, vedi Le modifiche non si salvano.

E adesso?