Als je op het Web zoekt naar hoe je een fotoalbum maakt in Drupal dan kom je al snel voor een probleem te staan. Er bestaan namelijk talloze manieren om fotoalbums of galleries aan te maken. Elke manier zal wel dicht bij je doel komen maar indien je volledige controle wilt over je galerij, is het misschien interessanter om er zelf eentje te maken met CCK, Views en enkele extra modules afhankelijk van je doel.

Op de website van Drupal zelf kan je een overzicht terugvinden van de modules die je kan gebruiken bij je fotoalbum: http://drupal.org/project/modules

In deze tutorial gaan we er van uit dat je Drupal 6 reeds geïnstalleerd hebt. Voor het maken van onze fotoalbum gaan we gebruikmaken van CCK, Views en nog enkele andere modules.

Modules downloaden

Allereerst gaan we volgende modules downloaden, uitpakken en in onze modules-map plaatsen (sites/all/modules)

• CCK
• Filefield
• ImageAPI
• ImageCache
• Imagefield
• Lightbox2
• Nodereference_url
• Views
• Views_Attach

Modules inschakelen

Vervolgens gaan we de nodige modules inschakelen (admin/build/modules)

• CCK
  • Content
  • Content copy
  • Filefield
  • Imagefield
  • Node Reference
  • Node Reference URL Widget
  • Option Widgets
  • Text
• ImageCache
  • ImageAPI
  • ImageAPI GD2
  • ImageCache
  • ImageCache UI
• Views
  • Views
  • Views_Attach
  • Views UI
• Lightbox2

OK, nu de modules ingeschakeld zijn, kunnen we van start gaan met de configuratie van ons fotoalbum.

ImageCache presets aanmaken

We gaan twee nieuwe presets aanmaken, eentje voor de cover van een album en eentje voor thumbnails van onze foto’s. Ga naar de instellingen van ImageCache (admin/build/imagecache).

Maak een nieuwe preset aan en noem deze “cover”.
Koppel een nieuwe actie aan deze preset nl. “Scale and Crop”. Geef vervolgens volgende waardes in: width: 300, height: 150. Hiermee kunnen we een oorspronkelijke grotere foto kleiner schalen en afknippen op de ingegeven grootte.

Maak nadien opnieuw een nieuwe preset aan en noem deze “thumbnail”.
Koppel hier opnieuw dezelfde actie aan nl. “Scale and Crop” en geef deze volgende waardes: width: 100, height: 100.Nu dat dit achter de rug is, kunnen we onze inhoudstypes aanmaken.

Inhoudstypes aanmaken

We gaan respectievelijk twee inhoudstypes aanmaken nl. “foto_album” en “afbeelding”. Zoals de benamingen al aanduiden gaat het hier over een inhoudstype die enerzijds voor het fotoalbum zelf zorgt en anderzijds over een inhoudstype die voor de afbeeldingen zorgt die binnen een fotoalbum worden geplaatst.

Ga naar Inhoudelijk beheer, Inhoudstypes (admin/content/types).

Maak een nieuw inhoudstype aan genaamd “Foto_album”.
Bij “Type” geven we “foto_album” in. Een beschrijving is niet vereist maar kan interessant zijn in het geval je later niet meer weet waarvoor dit inhoudstype dient.
Bij “Instellingen inzendingsformulier” < “Naam van berichttekstveld” geven we “Beschrijving” in, in plaats van “Berichttekst”.
Bij “Werkschema-instellingen” vinken we “Aangeraden op de voorpagina” uit.
Bij “Reactie-instellingen” < “Standaard reactie-instellingen” selecteren we “Uitgeschakeld”.
Sla nu je inhoudstype op.
Klik vervolgens op “manage fields” en maak een nieuw veld aan genaamd “Album cover”, bij “Field name” geven we “field_album_cover” in, als type data kiezen we voor “Bestand” en als form element voor “Plaatje”.
Sla op.
Op het volgende scherm hoef je niets aan te passen, tenzij je dat zelf wilt. Je kan bijvoorbeeld een maximum- of minimumresolutie ingeven voor foto’s, padinstellingen aanpassen, enz.
Na het indienen van de veldinstellingen gaan we ons nieuw aangemaakt veld verslepen tot onder “Titel” en verschuiven we “Beschrijving” onder “Album cover”.
Sla op.
Klik vervolgens op bewerken en kies voor “Display fields”. Zet “Label” op <Hidden> en vink twee maal “Exclude” aan.
Sla op.

Als volgende gaan we het inhoudstype “Afbeelding” aanmaken.
Bij “Type” geven we “afbeelding” in, opnieuw is een beschrijving niet vereist maar kan dit steeds van pas komen in de toekomst.
Bij “Instellingen inzendingsformulier” ledigen we het veldje “Naam van berichttekstveld”.
Bij “Werkschema-instellingen” vinken we “Aangeraden op de voorpagina” uit.
Bij “Reactie-instellingen”< “Standaard reactie-instellingen” selecteren we “Uitgeschakeld”.
Sla nu je inhoudstype op.
Klik vervolgens op “manage fields”. Hier gaan we twee nieuwe velden aanmaken, eentje om de link te leggen met een bepaald fotoalbum en eentje om een afbeelding toe te voegen.
We starten met het eerste. Geef als label “Fotoalbum” in, als field name “field_fotoalbum”, als type data “Nodereferentie” en als form element “Selectielijst”.
Sla op.
Op het volgende scherm vinken we “Vereist” aan en kiezen we voor “Foto_album” als inhoudstype waarnaar een referentie geplaatst kan worden.
Dien de veldinstellingen in.
We maken opnieuw een nieuw veld aan genaamd “Afbeelding”. Bij field name geven we “field_afbeelding” in, bij type data “Bestand” en bij form element “Plaatje”.
Sla op.
Op het volgende scherm vinken we “Vereist” aan en kiezen we voor “Onbeperkt” bij “Number of values”. Verdere instellingen kunnen ingesteld worden naar wens.
Dien de veldinstellingen in.
Opnieuw gaan we de nieuwe velden verschuiven. “Fotoalbum” slepen we onder “Titel” en “Afbeelding” onder “Fotoalbum”.
Sla op.

Views aanmaken

In de volgende stap gaan we twee Views aanmaken, eentje om de fotoalbums weer te geven, en eentje om de inhoud van een fotoalbum weer te geven.

Ga naar Views (admin/build/views).

De eerste View die we gaan aanmaken is “Albums overzicht”.
Klik op “Inhoudstype toevoegen” en geef volgende instellingen in:
View name: Albums overzicht
Naam: Albums overzicht
Titel: Albums overzicht
Bij “Fields” kiezen we voor “Node: Berichttekst”, “Node: Titel” en “Inhoud: Album cover (field_album_cover).
Voor de instellingen van “Inhoud: Album cover” kiezen we bij “Label” voor “Geen” en bij “Format” voor “cover image linked to node”. Klik op bijwerken. Op het volgende scherm, “Configure field Node: Berichttekst”, verwijderen we de “Label” en klikken we op “Bijwerken”. Nadien verwijderen we “Label” op de “Configure field Node: Titel” en vinken we “Link this field to its node” aan. Klik op “Bijwerken”.
We gaan de velden rangschikken zodat we eerst de titel te zien krijgen van het fotoalbum, dan de cover afbeelding en uiteindelijk de beschrijving. Klik op de pijltjes naast “Fields” en verleep de elementen zodat “Node: Titel” bovenaan komt te staan, gevolgd door “Inhoud: Album cover” en “Node: Berichttekst”. Klik op “Bijwerken”.
Bij “Sort criteria” kiezen we voor “Node: Post date” en vervolgens voor “Descending”.
Bij “Filters” voegen we “Node: Gepubliceerd” en “Node: Type” toe. Voor “Gepubliceerd” selecteren we “Ja”, voor “Node type” kiezen we voor “Foto_album”.
Voor deze View maken we een nieuwe display aan, nl. Pagina. Klik op “Add display” en geef een “Pad” en eventueel “Menu” in bij “Page settings”.

!!! Vergeet de View niet op te slaan !!!

Vervolgens maken we onze tweede View aan genaamd “Fotoalbum” met volgende instellingen:
View name: Fotoalbum
Naam: Fotoalbum
Titel: Fotoalbum
Items to display: 100
Bij “Arguments” kiezen we voor “Inhoud: Fotoalbum (field_fotoalbum)”. Kies voor volgende instellingen:
Selecteer “Hide view / Page not found 404” bij “Action to take if argument is not present”
Selecteer “Node” bij “Validator” en vink “Foto_album” aan.
Klik op “Bijwerken”.
Voeg het veld “Inhoud: Afbeelding (field_afbeelding)” toe en kies “Geen” bij “Label” en “Lightbox2: thumbnail -> original” bij “Format”.
Klik op “Bijwerken”.
Bij “Sort criteria” kiezen we voor “Node: Post date” < “Descending” en bij “Filters” kiezen we voor “Node: Type” < “Afbeelding”.
Nu gaan we hier een nieuwe display van maken. We kiezen voor “Node content” en klikken op “Add display”. Bij “Node content settings” kiezen we voor “Node types: foto_album”.

!!! Vergeet de View niet op te slaan !!!

Content toevoegen

Ziezo, nu kan je van start gaan met het aanmaken van fotoalbums en afbeeldingen toevoegen aan deze albums.

Verdere instellingen

Je zal merken dat wanneer je op een fotoalbum-pagina zit, je boven de inhoud de dag van publicatie, het uur van publicatie en de gebruikersnaam van de auteur kan zien. Dit kan je gemakkelijk uitschakelen door bij “Site-constructie” naar “Templates” te gaan en op “Configureren” klikken. Daar zie je in de rechtse kolom “Berichtinformatie weergeven over” staan. Vink “Afbeelding” uit en “Foto_album” ook, hoewel het op deze pagina niet wordt weergegeven.

Als je een foto uit een fotoalbum aanklikt, zal je merken dat deze opent in Lightbox. Onderaan zie je “View Image Details”. Als je hierop klikt, krijg je je volledige node te zien. Dit is echter niet noodzakelijk. Verder kan je ook de originele foto downloaden of de huidige foto vergroten naar de originele foto. Al de instellingen van Lightbox kan je terugvinden bij “Site-instellingen” < “Lightbox2”.

Uiteraard kan je de looks van je fotoalbum aanpassen door deze te themen zoals je zelf wilt. In ons voorbeeld hebben we volgende css-code toegevoegd:

/* Fotoalbum*/
div.view-Albums-overzicht div.views-row{ float:left; width:450px; }
div.view-Albums-overzicht div.views-row-odd{ margin-right:50px; }
div.view-Fotoalbum div.field-item{ float:left; margin:5px 10px; }
div.view-Albums-overzicht div.views-row img, div.view-Fotoalbum div.field-item img{ border:1px solid #ccc; }