Carettedonny.be

Voor Drupal bestaan er talloze verschillende foto-albums of galleries. Er zal er ongetwijfeld altijd wel eentje dicht bij je doel komen maar indien je volledige controle wilt over je gallery kan je misschien overwegen om er zelf eentje te maken met CCK, Views en enkele extra modules afhankelijk van je doel.

Een volledig overzicht van de modules voor Drupal die je kan gebruiken als foto-album kan je terug vinden op: http://drupal.org/project/modules.

Op deze website heb ik zelf gebruik gemaakt van een gallery met verschillende albums gemaakt met CCK, Views en nog enkele andere modules. In dit artikel zal ik overlopen welke modules ik hiervoor gebruikt heb, met welke instellingen en heb ik ook de export bestanden als bijlage toegevoegd. Indien je dus ook dergelijk foto-album wilt hoef je enkel maar de juiste modules in te schakelen en de export bestanden bij jouw installatie te importeren.

• Download eerst op Drupal.org de volgende modules (Drupal V6) 
  • CCK
  • Nodereference_url
  • Views
  • Views_Attach
  • ImageCache
  • Filefield
  • Imagefield
  • ImageAPI
  • Lightbox
• Schakel nu de volgende modules in op 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 
  • Lightbox
• Nu gaan we met ImageCache de grootte van de afbeeldingen instellen.
  Ga naar ImageCache: admin/build/imagecache
• Maak een nieuwe preset aan en noem deze "cover_foto_album".
  
  cover_foto_album:
  Koppel een eerste actie aan dit preset namelijk Scale en hier geven we een breedte op van 300px.
  Als 2de actie stellen we een Crop in.
  Hier geven we de volgende waardes in: width: 300px, height: 150px, xoffset: center en yoffset: center.
  
• Maak opnieuw een nieuwe preset aan en noem deze "thumbnail".
  
  thumbnail:
  Koppel ook hier als eerste actie een Scale aan, maar geef deze keer geen breedte op maar als hoogte: 130px.
  Als 2de actie geven we opnieuw een Crop, en deze met de volgende waardes:
  Width: 100px, height: 100px, xoffset: left en yoffset: center.
  
• Nu kunnen we starten met het importeren van de inhoudstypes.
  Ga naar Inhoudelijk beheer, Inhoudstypes (admin/content/types). Normaal gezien maak je hier altijd je nieuwe inhoudstypes aan. De inhoudstypes (contenttypes) die ik gebruikt heb voor deze fotogallerij heb ik reeds geëxporteerd zodat je ze hier kan importeren en alle instellingen, velden reeds goed staan.
• Nu gaan we het inhoudstype "Foto_album" aanmaken.
  Kies voor importeren en copy/paste de code uit "export_inhoudstype_foto_album", dit bestand vind je onderaan als bijlage. (Indien je een module nog niet geïnstalleerd had, zal er hier een melding van komen)
• Als volgende gaan we het inhoudstype "Afbeelding" aanmaken.
  Kies opnieuw voor importeren en copy/paste de code uit "export_inhoudstype_afbeelding", dat je ook terug onderaan de bijlages kan terugvinden.
• Nu gaan we de Views nog importeren. Ga naar Views (admin/build/views).
  De eerste View die we gaan toevoegen is "Albums overzicht". Kies voor importeren en copy/paste de tekst die je terug vind in de bijlage "export_view_albums_overzicht". De naam hoef je niet op te geven, deze word automatisch ingevuld tijdens de import.
  ! Na het importeren zeker niet vergeten de View op te slaan !
  
  De volgende View die we toevoegen is "Foto album", Kies opnieuw voor importeren en copy/paste de tekst die je terug vind in de bijlage "export_view_foto_album". Kies na het importeren van de View voor opslaan.
• Indien gewenst kan je ook nog de volgende CSS toevoegen aan de style.css van je template.
  
  

  div.view-foto-album div.item-list ul li {
  float: left;
  list-style-image: none;
  list-style: none;
  list-style-type: none;
  padding: 5px 5px 0;
  background: #eee;
  margin: 0 10px 10px 0;
  }
  div.view-foto-album div.item-list ul li:hover {
  background: #ccc;
  }

• Moest je een WYSIWYG editor gebruiken, schakel deze dan uit op de import pagina's, zodat de code niet word omgezet. 
• Et voila, je kan nu starten met het aanmaken van foto-albums en toevoegen van afbeeldingen. Enjoy!