Inleiding: beeldveld, weergaven, & Fotoalbumoplossingen

Deze Zelfstudie zal laten zien hoe je een Afbeeldingengalerij met ondersteuning voor responsieve thumbnails & mobiele thema’s voor Drupal 8 gebruik makend van Weergaven, CCK-velden, en Kleurdoos JavaScript-ondersteuning.


Om de galerij te bouwen, de Zelfstudie bespreekt twee methoden:

  1. De … gebruiken Afbeeldingsveld module en Weergaven Table Grid voor weergave.
  2. De … gebruiken Foto albums module en Kleurdoos JavaScript voor weergave.

De eerste methode vereist het instellen van een aangepaste methode Drupal 8 inhoudstype voor de Afbeeldingen met velden, terwijl Foto albums heeft dit vooraf geïnstalleerd met gewas & afbeelding effect opties op uploads.

Om te beginnen, heb je een Drupal-hostingservice nodig (d.w.z. een hostingservice die Drupal ondersteunt).

Stap één: installeer de vereiste modules & Afhankelijkheden

Begin: Download de vereiste modulebestanden van Drupal.org en installeer ze op: admin / modules / installeren met behulp van de zip / gzip-bestanden of een vergelijkbare methode (FTP, Git, Drush, etc.).

Vereiste modules – Downloadlinks:

  • Albumfoto’s: https://www.drupal.org/project/photos
  • Crop API: https://www.drupal.org/project/crop
  • Afbeeldingswidget bijsnijden: https://www.drupal.org/project/image_widget_crop
  • Afbeeldingseffecten: https://www.drupal.org/project/image_effects
  • Kleurdoos:https://www.drupal.org/project/colorbox

Notitie: Om de bijsnijdfunctionaliteit te installeren, moeten de bestanden van Kropper moet geïnstalleerd worden.

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

Vereisten: Indien nog niet geïnstalleerd op de Drupal 8 CMS, installeer de Bibliotheken API module.

  • Bibliotheken API:https://www.drupal.org/project/libraries

Configuratie: Downloaden & verplaats de Kropper JavaScript-bestanden naar de / bibliotheken map op de webserver na de Bibliotheken API is geïnstalleerd op Drupal 8 & check rapporten voor bevestiging.

Hoe maak je een afbeeldingengalerij met weergaven in Drupal 8?

Vereisten: De Afbeeldingseffecten module vereist ook ImageMagick & de Bestandsmetadata-informatie beheermodule om correct te werken. Installeer de Drupal 8 modulebestanden van:

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

Configuratie: Bekijk de Rechten instellingen voor de nieuw ingeschakelde modules op admin / people / permissions en breng de benodigde wijzigingen aan voor Gebruikersrollen.

  • Kleurdoos:https://github.com/jackmoore/colorbox/archive/master.zip

Configuratie: Download de JavaScript bestanden voor Kleurdoos & ga naar de / bibliotheken map.

Af hebben: Voer een diagnostische controle uit op admin / rapporten / status om te controleren of de installatie is geslaagd.

Stap twee: maak een aangepast inhoudstype voor afbeeldingen

Begin: Sinds de Fotoalbum creëert een Foto’s inhoudstype met een aangepaste galerijwidget, Drupal 8 ontwikkelaars die alleen deze module gebruiken hoeven de stap niet te herhalen of te creëren Keer bekeken.

  • Navigeren naar:admin / structuur / typen & Klik op de link “Nieuw inhoudstype toevoegen”.

De volgende:Drupal 8 ontwikkelaars die een onafhankelijke galerij bouwen, kunnen een nieuwe maken Inhoudstype genaamd “Galerijafbeelding” (gallery_img) en voeg dan een toe BeeldVeld naar het formulier.

  • Navigeren naar:admin / structuur / types / beheren / * / velden & voeg de toe Afbeeldingsveld.

De volgende: Toevoegen Taxonomietags of andere Velden naar de Galerijafbeelding knooppunt zoals vereist & opslaan.

Hoe maak je een afbeeldingengalerij met weergaven in Drupal 8?

Configuratie: Beheer de instellingen voor de Foto’s knooppuntveld op: admin / structuur / typen / beheren / foto’s / formulierweergave & bekijk de weergavevolgorde voor het formulier.

Hoe maak je een afbeeldingengalerij met weergaven in Drupal 8?

De volgende: De formulierinstellingen voor het uploaden van afbeeldingen zijn dan te vinden op knooppunt / toevoegen / foto’s of knooppunt / toevoegen / * afhankelijk van welke methode Afbeeldingengalerij wordt ter plaatse geïmplementeerd.

Configuratie: Navigeren naar admin / config / media / image-styles & bekijk de hele site Afbeelding Thumbnail instellingen. Creëer unieke waarden voor uw Drupal 8 themagebieden & responsieve opvattingen.

Hoe maak je een afbeeldingengalerij met weergaven in Drupal 8?

Af hebben: Ga naar de knooppunt / toevoegen / foto’s of knooppunt / toevoegen / * pagina en upload 8 tot 10 foto’s naar uw website, voeg een beschrijving toe & taxonomie trefwoordtags in het formulier. Publiceer de knooppunten.

Stap drie: bouw een weergavescherm met afbeeldingengalerij

Begin: Navigeer na het uploaden van afbeeldingen naar het CMS naar admin / structuur / views en klik op de “Weergave toevoegen” knop. Volg de eerste stappen om uw pagina in te stellen met een uniek filter & galerijweergave.

Hoe maak je een afbeeldingengalerij met weergaven in Drupal 8?

Configuratie: Selecteer “Inhoud van type Galerij Afbeelding getagd met — gesorteerd op Nieuwste eerst” & sla de instellingen op met een unieke naam voor de Visie. Ga verder met het aanpassen van de galerijpagina.

  • Instellingen: Maak een pagina & kies een weergave van “Raster” met “Knooppuntvelden”.
  • Instellingen: Stel een paginatitel in & URL zoals “Afbeeldingengalerij” (/ image-gallery)

De volgende: Klik op de knop om “Opslaan & Bewerk”. Op de Keer bekeken configuratiepagina, onder de Velden categorie, voeg de Veld naar de Visie voor de Galerijafbeelding bestanden (d.w.z.. Inhoud: gallery_img).

Hoe maak je een afbeeldingengalerij met weergaven in Drupal 8?

De volgende: U zou nu een live preview van de kunnen zien Visie met de Galerijafbeeldingen evenals knooppunttitels, beschrijving, taxonomietags, & andere Velden die zijn toegevoegd aan de weergavepagina.

Hoe maak je een afbeeldingengalerij met weergaven in Drupal 8?

Af hebben: Pas het aantal afbeeldingen op het scherm, de sorteervolgorde en de miniatuurgrootte aan, & andere variabelen volgens de vereisten van uw Drupal 8 thema en sla de weergave op publiceren.

Stap vier: Configureer het fotoalbum & Upload bestanden

Begin: Met de Drupal 8 Fotoalbum module maakt u eerst een pagina die functioneert als een enkel album voor een kleinere subset van foto’s. Voeg een Album voor elk evenement & afbeelding uploaden.

Configuratie: Navigeren naar knooppunt / toevoegen / foto’s en maak een nieuwe Fotoalbum bladzijde. Sla de instellingen op en gebruik vervolgens de tabnavigatie om een ​​batch foto’s toe te voegen aan de Album met labels.

Hoe maak je een afbeeldingengalerij met weergaven in Drupal 8?

De volgende: Na het maken van de Fotoalbum pagina, gebruik de tabnavigatie om een ​​groep afbeeldingen te uploaden die in een Kleurdoos pop-up scherm. Kies de Afbeelding Thumbnail maten.

Hoe maak je een afbeeldingengalerij met weergaven in Drupal 8?

Configuratie: Stel het aantal geüploade afbeeldingen in dat is toegestaan ​​per Fotoalbum op de instellingenpagina voor administraties. Toegestane bestandstypen voor het uploaden van afbeeldingen: jpg gif png jpeg zip

Hoe maak je een afbeeldingengalerij met weergaven in Drupal 8?

Scherm: De Fotoalbum module gebruikt de Kleurdoos JavaScript om de afbeeldingsbestanden weer te geven in een pop-up lichtscherm met navigatie door de afbeeldingsbestanden die door knoppen worden geleverd & pijlen.

Hoe maak je een afbeeldingengalerij met weergaven in Drupal 8?

Configuratie: Navigeren naar admin / config / media / foto’s om de miniatuurafbeeldingsgroottes, het opslagpad, privacy, algemene weergave, albumafbeeldingsgroottes, enz. in te stellen Fotoalbum toediening.

Af hebben: De Fotoalbum module zou nu succesvol moeten werken, waardoor Drupal 8 beheerders om te creëren Kleurdoos afbeeldingsgalerijen die zijn gegroepeerd op knooppuntpagina’s.

Stap vijf: Schakel Colorbox-weergave in op knooppuntafbeeldingsvelden

Begin:Colorbox-afbeeldingengalerij weergave in lightbox-animatie of met interactieve navigatie kan op elk worden ingeschakeld Drupal 8 knooppunt of inhoudstype door toe te voegen Afbeeldingsvelden in de administratie.

De volgende: Navigeer naar de Inhoudstypen sectie en selecteer het knooppunttype dat zal worden gebruikt. Klik op “Bewerk” & “Velden beheren” om naar het tabblad te navigeren waar de Afbeeldingsveld kan toegevoegd worden.

Hoe maak je een afbeeldingengalerij met weergaven in Drupal 8?

Configuratie: Selecteer “Kleurdoos” display voor de Afbeeldingsveld & zorgen ervoor dat meerdere bestanden aan het knooppunt kunnen worden toegevoegd. Sla de instellingen op & navigeer naar de knooppunt / toevoegen / * pagina om de formulierweergave te testen.

Af hebben: Bekijk de Bladzijde & Teaser uitzicht voor de Inhoudstype onder de “Beheer display” tabblad. Zeker weten dat “Colorbox Gallery” is geselecteerd als beeldweergave voor beide opties.

Conclusie: gebruik Responsive Drupal Theme Region CSS

Overzicht: Een gewoonte gebruiken Drupal 8 inhoudstype met Afbeeldingsveld en het vergelijken met de Fotoalbum module-opties tonen de verschillen tussen de twee methoden voor afbeeldingen.

Aanbeveling: Het rooster Visie werkt het beste met een groot aantal afbeeldingsbestanden, terwijl de Foto albums zijn beter voor het organiseren van kleinere sets met uploads van afbeeldingen Kleurdoos navigatie.

Bekijk deze top 3 Drupal-hostingservices:

ChemiCloud

Beginprijs:
$ 2,76


Betrouwbaarheid
10


Prijzen
9,9


Gebruikersvriendelijk
9,9


Ondersteuning
10


Kenmerken
9,9

Lees recensies

Bezoek ChemiCloud

Hostinger

Beginprijs:
$ 0,99


Betrouwbaarheid
9.3


Prijzen
9.3


Gebruikersvriendelijk
9.4


Ondersteuning
9.4


Kenmerken
9.2

Lees recensies

Bezoek Hostinger

A2-hosting

Beginprijs:
$ 3,92


Betrouwbaarheid
9.3


Prijzen
9.0


Gebruikersvriendelijk
9.3


Ondersteuning
9.3


Kenmerken
9.3

Lees recensies

Bezoek A2 Hosting

Gerelateerde How-To-artikelen

  • Hoe maak je een geanimeerde diavoorstelling in Drupal 8
    gemiddeld
  • Hoe maak je een aangepast inhoudstype voor Drupal 8 met velden
    gemiddeld
  • Thumbnails van sociale media beheren in Drupal 8?
    gemiddeld
  • Hoe maak je een landingspagina voor Drupal 8 met themagebieden
    Nieuweling
  • Weergaven maken in Drupal 8
    gemiddeld
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me