Theming van Views: aanpassen van view.tpl.php (velden, rijen, blokken, pagina’s) en integratie van de jQuery-plugin EasySlider
In dit artikel bekijken we de query builder van Drupal — de module Views (http://drupal.org/project/views). Met Views kun je velden van verschillende inhoudstypen, reacties, termen, gebruikersinformatie en andere gegevens uit de database weergeven. Bovendien beschikt de module over een grafische interface waarmee je eenvoudig query’s naar de database kunt samenstellen met de muis.
Let op! Als je EasySlider direct wilt gebruiken binnen een uur, raden we sterk aan de kant-en-klare module te installeren. Dit artikel is in de eerste plaats bedoeld om te begrijpen hoe je de Views-templates kunt aanpassen en themen. De uiteindelijke weergave van EasySlider zul je met CSS moeten afstellen.
Nadat we de gewenste velden hebben toegevoegd, moeten we ze rangschikken zoals wij dat willen. Hiervoor zijn er templates die de uitvoer regelen. Standaard worden de bestanden uit de map theme gebruikt.
Laten we de jQuery-plugin EasySlider configureren voor de gegevens die door de Views-module worden weergegeven. Natuurlijk is er al een module die EasySlider integreert met Views. Je vindt die hier: http://drupal.org/project/easySlider.
Als je alleen afbeeldingen in de vorm van een slider wilt tonen, kun je simpelweg die module installeren. Dit artikel leert je echter werken met de Views-templates.
Om te beginnen moeten we de modules Views, CCK en Imagecache installeren, en daarnaast de EasySlider-plugin downloaden — bijvoorbeeld hier of via een andere bron. Later leggen we uit hoe je de plugin in een Drupal-thema integreert, nadat we eerst de CCK-velden hebben ingesteld.
De modules zijn geïnstalleerd, dus we kunnen beginnen:
1. Maak een nieuw inhoudstype aan.
Voeg aan dit inhoudstype een veld toe voor het uploaden van afbeeldingen en klik op “Opslaan”. Je kunt ook de positie van het veld aanpassen.
In de veldinstellingen stellen we een onbeperkt aantal afbeeldingen in en voegen we beschrijvingen toe.
2. Maak een node aan van het type “Banner” en upload enkele foto’s zodat er iets te tonen is.
3. Maak een afbeeldingspreset aan voor de foto’s die we gaan weergeven. In dit voorbeeld gebruiken we een preset van 200x200 pixels, maar je kunt elke gewenste maat kiezen.
Voeg de afbeeldingbewerking Scale and Crop toe met de gekozen afmetingen.
4. Maak een View om dit veld met afbeeldingen als een lijst in een blok weer te geven.
Voeg het veld “Afbeeldingen” toe en kies in de instellingen om geen groepering en geen veldtitel te tonen. Selecteer bij “Afbeeldingsstijl” de preset die je eerder hebt gemaakt.
Filterinstellingen:
Inhoud: Gepubliceerd — Ja
Inhoud: Type — Banner
Basisinstellingen:
Stijl: HTML List
Voeg een weergave in een blok toe.
In de preview zie je nu de afbeeldingen.
5. Voeg het blok toe aan een regio en bekijk het resultaat op de pagina.
Hmm… nog geen slider. Tijd om EasySlider te installeren.
6. Pak het EasySlider-archief uit dat je eerder hebt gedownload. In de pluginmap staan voorbeelden (zoals 2.html). Kopieer de CSS uit dat voorbeeld naar style.css van je thema, en de afbeeldingen uit de pluginmap images naar de map images van je thema.
7. Kopieer het bestand easySlider1.5.js uit de pluginmap js naar de map van je huidige Drupal-thema — bij voorkeur in een submap js. Voeg het script toe aan je themabestand themenaam.info door daar de volgende regel aan toe te voegen. Vernieuw daarna de cache — het script moet nu geladen worden.
Open het JS-bestand om te zien welke HTML-structuur de slider verwacht.
Controleer nu je blok met Firebug (Firefox), Dragonfly (Opera) of DOM Inspector (Chrome). We zien dat Views veel div-elementen heeft toegevoegd die in dit geval overbodig zijn — die moeten we verwijderen via template-overrides.
8. Open je View en klik op “Theme: Information”. Er verschijnt een lijst met templates die kunnen worden overschreven.
De vetgedrukte bestandsnamen zijn de standaardtemplates van Views (in de map views/theme). De bestandsnamen ernaast zijn de aangepaste versies die je in je thema kunt aanmaken. Om een template te overschrijven, maak je bijvoorbeeld het bestand views-view-fields--view-banner.tpl.php aan in je themamap.
Bekijk de inhoud van views-view-fields.tpl.php. De uitvoer is verpakt in een foreach-lus die elke rij weergeeft. We verwijderen onnodige onderdelen zoals $field->separator, $field->label en de div rond elke record. Plaats de aangepaste versie in je themamap.
Na opslaan en cache vernieuwen zie je dat de structuur eenvoudiger is geworden — li-elementen met afbeeldingen. Verwijder nu ook de span-tags om de HTML verder op te schonen.
Maak nu views-view--view-banner.tpl.php aan (gebaseerd op views-view.tpl.php) om ook de buitenste div class="view-content" en div class="item-list" te verwijderen. Bewaar alleen de noodzakelijke onderdelen (header, content, footer, enz.).
Daarna pas je views-view-list.tpl.php aan door het te kopiëren als views-view-list--view-banner.tpl.php in je thema en overbodige div-elementen te verwijderen.
Om resterende divs te verwijderen, bewerk block.tpl.php. Als dit bestand niet in je thema staat, kopieer het dan uit de module Block naar je thema. Voeg daarin een if-voorwaarde toe om het blok te omhullen met id="slider" wanneer het om het bannerblok gaat.
De variabele $block->delta identificeert het blok afhankelijk van de module. In dit geval gebruikten we deze voor het bannerblok.
Na het legen van de cache ziet de HTML-structuur er correct uit: eerst div id="slider", dan ul en daarbinnen li.
Voeg nu een klein stukje JavaScript toe om de slider te initialiseren:
Je kunt het script direct toevoegen in page.tpl.php of in een apart bestand, bijvoorbeeld js/custom.js.
Het resultaat: EasySlider werkt nu! Vergeet niet de CSS verder af te stemmen voor een correcte weergave.
Het is natuurlijk eenvoudiger om een bestaande module te gebruiken om een carousel of slideshow weer te geven. Maar als zo’n module niet bestaat en er wel een jQuery-plugin is, waarom zou je wachten tot iemand anders de module schrijft?