Fotogalerij en fotoalbums in Drupal
Fotoalbums en een fotogalerij verfraaien elke website — of het nu een persoonlijke blog of een bedrijfswebsite is. Mooie foto’s zijn precies wat mensen langer vasthoudt op sociale netwerken zoals Facebook of VK. Daarom gaan we nu een fotogalerij toevoegen aan onze Drupal-site.
Ik stel voor om een eenvoudige galerij te maken met behulp van de Colorbox-effecten. Colorbox is een jQuery-plug-in die een goed alternatief is voor Thickbox en Lightbox. Colorbox is handig omdat het afbeeldingen automatisch aanpast aan het schermformaat. Dat is erg praktisch, omdat er tegenwoordig veel verschillende monitoren zijn met uiteenlopende formaten en resoluties.
Laten we beginnen. Ik zal laten zien hoe je een fotogalerij maakt in Drupal 7 — hetzelfde principe geldt ook voor Drupal 6.
We hebben de volgende modules nodig:
Colorbox — http://drupal.org/project/colorbox
Libraries API — http://drupal.org/project/libraries
Views — http://drupal.org/project/views
Fields API (voor Drupal 7 zit dit in de core; voor Drupal 6 is dit de module CCK)
Imagecache — http://drupal.org/project/imagecache
File (voor Drupal 7 in de core, Filefield voor Drupal 6)
Image (voor Drupal 7 in de core, Imagefield voor Drupal 6)
Voor Drupal 6 is ook de module jQuery Update nodig om jQuery te upgraden naar versie 1.3.2.
Download en installeer al deze modules.
Nu moeten we Colorbox zelf downloaden. Deze wordt afzonderlijk gedownload van de volgende website:
http://colorpowered.com/colorbox/
Pak het Colorbox-archief uit en kopieer de map naar sites/all/libraries. Als de map libraries nog niet bestaat, maak die dan aan en plaats daar de Colorbox-map in.
In de map libraries zou nu de Colorbox-map moeten staan:
Je ziet dat ik de Colorbox-map inclusief voorbeelden heb gekopieerd. Dit is handig om te kunnen testen hoe Colorbox werkt.
Als alles correct is ingesteld, zou in het statusrapport de volgende melding moeten verschijnen:
Perfect, alles is ingesteld en de modules zijn geactiveerd. De voorbereiding is klaar — laten we nu de galerij maken.
We gaan de galerij opzetten als een reeks albums. Maak een nieuw inhoudstype aan: Fotoalbum.
/admin/structure/types/add
Vul op deze pagina de velden in:
Ga daarna naar de pagina voor het beheren van de velden van dit nieuwe inhoudstype:
/admin/structure/types
Voeg een nieuw veld toe met de naam Foto’s. Kies als gegevenstype Afbeelding.
In de veldinstellingen kun je onbeperkte uploads toestaan of het aantal foto’s per album beperken, bijvoorbeeld tot 10.
Sla het veld op. Ons inhoudstype “Album” is klaar. Als je de rechten voor het aanmaken van albums wilt beperken, kun je dat doen via de gebruikersrechtenpagina:
/admin/people/permissions
Laten we nu een nieuwe albumnode aanmaken:
/node/add
Vul de titel en beschrijving van het fotoalbum in en voeg je foto’s toe:
Sla de node op.
Momenteel worden de foto’s in hun originele formaat weergegeven, maar we willen natuurlijk een mooie, gestileerde fotogalerij. Daarvoor gebruiken we de module ImageCache.
ImageCache maakt het mogelijk om afbeeldingen die aan nodes zijn gekoppeld bij te snijden, te schalen en van kleur te veranderen — zoals de foto’s die we in ons album hebben geüpload. Na het inschakelen van de module wordt er een pagina beschikbaar met afbeeldingspresets. Een preset is een vooraf ingestelde beeldbewerking — bijvoorbeeld het bijsnijden van een afbeelding tot 100x100 pixels.
Ga naar de configuratiepagina van de site en zoek de instelling ImageCache:
admin/config
Klik op “Nieuwe stijl toevoegen” en vul de naam in. Ik geef presets meestal een naam die overeenkomt met hun formaat — bijvoorbeeld scale150x150 voor schalen. Ik zal nu een preset aanmaken genaamd crop150x150, die afbeeldingen bijsnijdt tot 150x150 pixels. Voeg dit effect toe:
Kies breedte en hoogte van 150x150 pixels en sla het effect op. Onze preset crop150x150 is nu beschikbaar op de pagina voor het weergavebeheer van velden.
Ga naar de pagina met alle inhoudstypen:
/admin/structure/types
En selecteer “Weergave van velden”:
Stel het weergavetype van ons fotoveld in op Colorbox:
Ga verder met de veldweergave-instellingen:
Kies als parameter “Node image style”: crop150x150, dus onze nieuw gemaakte preset.
Sla de instellingen op.
Nu worden de foto’s weergegeven met het Colorbox-effect en het formaat van 150x150 pixels. We voegen nog wat kleine aanpassingen toe via CSS:
.field-name-field-photos .field-item {
float: left;
margin-bottom: 15px;
margin-right: 15px;
}
Je kunt deze CSS naar wens aanpassen — afhankelijk van je themaklasse of marges. En hier is het resultaat: ons fotoalbum als een aparte node met miniaturen en een elegante Colorbox-galerij.
