Come creare una galleria di immagini usando Views in Drupal 8?

Introduzione: campo immagine, viste, & Soluzioni per album fotografici

Questo lezione mostrerà come creare un galleria di immagini con supporto per miniature reattive & temi mobili per Drupal 8 utilizzando Viste, campi CCK, e Scatola dei colori Supporto JavaScript.


Per costruire la galleria, il lezione discuterò di due metodi:

  1. Usando il Campo immagine modulo e Visualizza tabella griglia per la visualizzazione.
  2. Usando il Album fotografici modulo e Scatola dei colori JavaScript per la visualizzazione.

Il primo metodo richiede l’impostazione di un’abitudine Drupal 8 tipo di contenuto per il immagini con campi, mentre Album fotografici ha preinstallato con crop & opzioni di effetto immagine sui caricamenti.

Per iniziare, avrai bisogno di un servizio di hosting Drupal (ovvero un servizio di hosting che supporti Drupal).

Fase 1: installare i moduli richiesti & dipendenze

Inizio: Scarica i file del modulo richiesti da Drupal.org e installali su: admin / modules / install usando i file zip / gzip o un metodo simile (FTP, Git, Drush, ecc.).

Moduli richiesti – Link per il download:

  • Foto dell’album: https://www.drupal.org/project/photos
  • API di ritaglio: https://www.drupal.org/project/crop
  • Ritaglio widget immagine: https://www.drupal.org/project/image_widget_crop
  • Effetti immagine: https://www.drupal.org/project/image_effects
  • Scatola dei colori:https://www.drupal.org/project/colorbox

Nota: Per installare la funzionalità di ritaglio, i file da coltivatore deve essere installato.

  • Cropper:https://github.com/fengyuanchen/cropper

Prerequisiti: Se non è già installato sul Drupal 8 CMS, installa il API delle biblioteche modulo.

  • API delle librerie:https://www.drupal.org/project/libraries

Configurazione: Scarica & muovi il coltivatore File JavaScript su / librerie cartella sul server Web dopo il API delle biblioteche è installato su Drupal 8 & controllare i rapporti per la conferma.

Come creare una galleria di immagini usando Views in Drupal 8?

Prerequisiti: Il Effetti immagine richiede anche il modulo ImageMagick & il Informazioni sui metadati del file modulo manager per funzionare correttamente. Installa il Drupal 8 file del modulo da:

  • ImageMagick:https://www.drupal.org/project/imagemagick
  • File Metadata Manager: https://www.drupal.org/project/file_mdm

Configurazione: Rivedi il permessi impostazioni per i moduli appena abilitati su admin / persone / permessi e apporta le modifiche necessarie per Ruoli utente.

  • Scatola dei colori:https://github.com/jackmoore/colorbox/archive/master.zip

Configurazione: Scarica il JavaScript file per Scatola dei colori & passare a / librerie cartella.

Finire: Eseguire un controllo diagnostico a admin / reports / Stato per verificare che l’installazione abbia avuto esito positivo.

Passaggio due: creare un tipo di contenuto personalizzato per le immagini

Inizio: Dal momento che il Album di foto crea un Fotografie tipo di contenuto con un widget galleria personalizzato, Drupal 8 gli sviluppatori che utilizzano solo questo modulo non devono ripetere il passaggio o creare Visualizzazioni.

  • Navigare verso:admin / struttura / tipi & clicca sul link “Aggiungi nuovo tipo di contenuto”.

Il prossimo:Drupal 8 gli sviluppatori che stanno costruendo una galleria indipendente possono crearne una nuova Tipo di contenuto di nome “Galleria immagine” (Gallery_img) e quindi aggiungere un ImmagineCampo al modulo.

  • Navigare verso:admin / struttura / tipo / gestire / * / campi & Aggiungi il Campo immagine.

Il prossimo: Inserisci Tag tassonomia o altro campi al Galleria immagine nodo come richiesto & Salva.

Come creare una galleria di immagini usando Views in Drupal 8?

Configurazione: Gestire le impostazioni per Fotografie campo nodo in: admin / struttura / tipo / gestire / foto / form-display & rivedere l’ordine di visualizzazione per il modulo.

Come creare una galleria di immagini usando Views in Drupal 8?

Il prossimo: È quindi possibile accedere alle impostazioni del modulo per il caricamento delle immagini all’indirizzo node / add / foto o node / aggiungere / * a seconda di quale metodo di galleria di immagini è implementato sul posto.

Configurazione: Navigare verso admin / config / media / immagine-styles & rivedere l’intero sito Miniatura dell’immagine impostazioni. Crea valori unici per il tuo Drupal 8 regioni tematiche & opinioni reattive.

Come creare una galleria di immagini usando Views in Drupal 8?

Finire: Vai al node / add / foto o node / aggiungere / * pagina e carica da 8 a 10 foto sul tuo sito web, aggiungendo una descrizione & tag parole chiave tassonomia nel modulo. Pubblica i nodi.

Passaggio tre: creare una visualizzazione visualizzazioni con Galleria di immagini

Inizio: Dopo aver caricato le immagini sul CMS, accedere a admin / struttura / views e fai clic su “Aggiungi vista” pulsante. Segui i passaggi iniziali per configurare la tua pagina con un filtro univoco & visualizzazione della galleria.

Come creare una galleria di immagini usando Views in Drupal 8?

Configurazione: Selezionare “Contenuto del tipo Galleria Immagine taggata con — ordinata per Prima il più recente” & salvare le impostazioni con un nome univoco per Visualizza. Procedere per personalizzare la pagina della galleria.

  • Impostazioni: Crea una pagina & scegli un display di “Griglia” con “Campi nodo”.
  • Impostazioni: Imposta un titolo di pagina & URL come “galleria di immagini” (/galleria di immagini)

Il prossimo: Fare clic sul pulsante per “Salva & modificare”. Sul Visualizzazioni pagina di configurazione, sotto il campi categoria, aggiungi il Campo al Visualizza per il Galleria immagine file (ad es. Contenuto: gallery_img).

Come creare una galleria di immagini usando Views in Drupal 8?

Il prossimo: Ora dovresti essere in grado di vedere un’anteprima dal vivo di Visualizza con il Galleria immagini così come titoli dei nodi, descrizione, tag tassonomia, & altro campi che vengono aggiunti alla pagina di visualizzazione.

Come creare una galleria di immagini usando Views in Drupal 8?

Finire: Regola il numero di immagini sul display, l’ordinamento, la dimensione della miniatura, & altre variabili in base ai requisiti del tuo Drupal 8 tema e salvare la vista in pubblicare.

Fase quattro: configura l’album fotografico & Caricare files

Inizio: Con il Drupal 8 Album fotografico modulo, si crea prima una pagina che funziona come un singolo album per un sottoinsieme più piccolo di foto. Aggiungi un Album per ogni evento & caricamento di immagini.

Configurazione: Navigare verso node / add / foto e creane uno nuovo Album di foto pagina. Salvare le impostazioni e quindi utilizzare la scheda di navigazione per aggiungere un gruppo di foto a Album con le etichette.

Come creare una galleria di immagini usando Views in Drupal 8?

Il prossimo: Dopo aver creato il Album di foto pagina, utilizzare la scheda di navigazione per caricare un gruppo di immagini che verranno visualizzate in a Scatola dei colori schermo pop-up. Scegli il Miniatura dell’immagine dimensioni.

Come creare una galleria di immagini usando Views in Drupal 8?

Configurazione: Imposta il numero di immagini caricate consentite per Album di foto nella pagina delle impostazioni delle amministrazioni. Tipi di file di caricamento delle immagini consentiti: jpg gif png jpeg zip

Come creare una galleria di immagini usando Views in Drupal 8?

Schermo: Il Album di foto Il modulo utilizza il Scatola dei colori JavaScript per visualizzare i file di immagine in una schermata a comparsa pop-up con navigazione attraverso i file di immagine forniti da pulsanti & frecce.

Come creare una galleria di immagini usando Views in Drupal 8?

Configurazione: Navigare verso admin / config / media / foto per impostare le dimensioni dell’immagine in miniatura, il percorso di archiviazione, la privacy, la visualizzazione globale, le dimensioni dell’immagine dell’album, ecc. in Album di foto amministrazione.

Finire: Il Album di foto il modulo ora dovrebbe funzionare correttamente, permettendo Drupal 8 amministratori da creare Scatola dei colori gallerie di immagini che sono raggruppate insieme nelle pagine dei nodi.

Passaggio 5: abilitare la visualizzazione Colorbox nei campi immagine nodo

Inizio:Colorbox Image Gallery visualizzazione in animazione lightbox o con navigazione interattiva può essere abilitato su qualsiasi Drupal 8 nodo o tipo di contenuto aggiungendo Campi immagine nell’amministrazione.

Il prossimo: Passare al Tipi di contenuto sezione e selezionare il tipo di nodo che verrà utilizzato. Clicca su “modificare” & “Gestisci campi” per passare alla scheda in cui il Campo immagine può essere aggiunto.

Come creare una galleria di immagini usando Views in Drupal 8?

Configurazione: Selezionare “Scatola dei colori” display per Campo immagine & abilitare l’aggiunta di più file al nodo. Salva le impostazioni & vai al node / aggiungere / * pagina per testare la visualizzazione del modulo.

Finire: Rivedi il Pagina & Teaser punti di vista per il Tipo di contenuto sotto il “Gestisci display” scheda. Assicurati che “Colorbox Gallery” è selezionato come visualizzazione dell’immagine per entrambe le opzioni.

Conclusione: utilizzare il CSS della regione tematica Drupal reattivo

Sommario: Usando un’abitudine Drupal 8 Tipo di contenuto con Campo immagine e confrontandolo con Album di foto le opzioni del modulo mostreranno le differenze tra i due metodi per le immagini.

Raccomandazione: La griglia Visualizza funziona meglio con un gran numero di file di immagine, mentre il Album fotografici sono migliori per organizzare set più piccoli di upload di immagini con Scatola dei colori navigazione.

Dai un’occhiata a questi 3 principali servizi di hosting Drupal:

ChemiCloud

Prezzo di partenza:
$ 2.76


Affidabilità
10


Prezzi
9.9


Di facile utilizzo
9.9


Supporto
10


Caratteristiche
9.9

Leggi le recensioni

Visita ChemiCloud

Hostinger

Prezzo di partenza:
$ 0.99


Affidabilità
9.3


Prezzi
9.3


Di facile utilizzo
9.4


Supporto
9.4


Caratteristiche
9.2

Leggi le recensioni

Visita Hostinger

Hosting A2

Prezzo di partenza:
$ 3.92


Affidabilità
9.3


Prezzi
9.0


Di facile utilizzo
9.3


Supporto
9.3


Caratteristiche
9.3

Leggi le recensioni

Visita A2 Hosting

Articoli How-To correlati

  • Come creare una presentazione animata in Drupal 8
    intermedio
  • Come creare un tipo di contenuto personalizzato per Drupal 8 con campi
    intermedio
  • Come gestire le miniature dei social media in Drupal 8?
    intermedio
  • Come creare una landing page per Drupal 8 usando le aree tematiche
    novizio
  • Come creare viste in Drupal 8
    intermedio
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me