D2 les 02

Views verfijning

In deze les maken we gebruik van vier reisfoto's. Telkens 2 van 2 verschillende landen. Als je zelf geen foto's wilt verzamelen, klik dan hier.

Voorbereiding

We installeren en activeren… mocht dit nog nodig zijn. De Views Utility interface moet ook aangevinkt staan, anders kan je geen views aanmaken.

Ik heb een inhoudstype genomen dat een aantal reisfoto’s bevat met als trefwoord het land van herkomst. Kijk naar de velden:

Zo heb ik 2 pagina’s met als trefwoord Frankrijk en 2 met als trefwoord Bali. Ik maak nu een view aan met als titel reizen en ik filter op de 2 taxonomietermen.

Groeperen

Bij de instellingen van het raster kan je groeperen. Dan komt de groepsnaam bovenaan te staan.

Het resultaat:

Ik heb de foto’s gecentreerd door een ingebouwde css class aan te spreken bij de dezelfde rasterinstellingen:

Contextuele Filters

Tijd om eens een voorbeeld te geven van een contextuele filter. We gaan een contextuele filter (klik op uitgebreid) zetten op de titel. Eens dit is ingesteld kan je in de URL een titelnaam typen. De filter wordt dus via de URL aangebracht. Wil je meer dan kan je dit aanduiden. Je kunt dan bvb bali1+frankrijk1 typen. Zo kan je specifiek bepaalde views genereren. Je kunt dan ook een menulink daar naar toe leggen (door een deel van URL te kopiëren) of als argument meegeven bij een inhoudstype. Zo kan je een veld in een inhoudstype maken voor de view (er bestaat daar een module voor) en daar kan je op het argument filteren.

Laat de instellingen zo staan. Als er niets werd ingetypt blijft alles zoals voorheen.

We stellen wel in dat er meerdere items kunnen worden ingebracht.

Het resultaat... Zie je de gegevens in de URL?

Contextuele filters worden meer gebruikt dan je denkt. Er wordt één algemene view gemaakt die dan op het ogenblik van de behoefte via de URL wordt gefilterd.

Tabbladen

Nu gaan we een normale filter (geen contextuele) zetten om tabbladen te kunnen gebruiken. Het filtercriterium:

Nu gaan we in deze view tabbladen creëren zodanig dat onze twee landen kunnen geselecteerd worden. De inhoud wordt dan ook per land gefilterd. Maak een pagina aan.

We geven de pagina een passende titel, let op het pad. Het moet onderdeel zijn van reizen, anders krijg je geen tabblad. De filter wordt nu aangepast en enkel voor Frankrijk ingesteld. Doe nu het zelfde voor het andere land. Je moet 2 subpagina’s hebben om de tab te zien.

 

 

De pagina wordt nu verdeeld door de 2 tabs.

Tokens

Merk deze voettekst op: Weergave 1-2 van 2. Dit hebben we zo ingesteld bij de voetinstellingen:

Bekijk eens de mogelijkheden. Deze variabelen zijn zeer bruikbaar. Voeg intussen ook nog een stukje koptekst toe:

Paginering

Je kunt (bij veel inhoud) beter een paginering opzetten. Je kunt bepalen hoeveel items er getoond worden per pagina. Je krijgt dan ook een soort navigatie structuur.

Hier zie je de instellingen die ik gebuikt heb.

Bovenaan wordt er ingesteld voor welke pagina’s de instellingen gelden. Je zult net zoals ik dit een paar keer vergeten en zien dat je volledige view opnieuw moet ingesteld worden… Op den duur zal je daar beter op letten…

Je kunt zelfs de bezoekers laten zelf instellen hoeveel ze er tegelijkertijd willen op een pagina hebben:

Je krijgt dan dit formuliertje met de keuzes die je zelf bepaalt.

Bijlagen

Nu gaan we een bijlage (attachment) toevoegen. Zoals het woord reeds zegt, hoort dit bij een andere inhoud. We gaan bvb de meest recente foto van onze reizen bovenaan onze inhoud zetten. (als voorbeeld niet echt geslaagd, maar om didactische redenen wel verdedigbaar)

Merk op dat ik bijvoeg bij reisfoto’s. De hoofdpagina dus. Bij paginering zet ik het aantal op 1. Aangezien er gesorteerd wordt op de datum van inzending, moet dus enkel de meest recente overblijven… Bij velden zet ik de weergave op origineel formaat. Vergeet niet dit enkel voor deze weergave in te stellen, anders overschrijf je alles…

Filteren en sorteren door bezoekers

Tenslotte gaan we weer een nieuwe pagina maken. Deze keer gaan we geen gebruik maken van tabs om een keuze van het land te maken. We gaan de gebruiker zelf laten filteren en sorteren.

Er zijn drie zaken met de term ‘zichtbaar gemaakt’. Zie je ze. Daar vindt je al de instellingen om aan de bezoekers de keuze te laten.

Laat ons beginnen met de filter. Ik veronderstel trouwens dat je het verschil weet tussen een filter en sorteren…

Op de pagina verschijnt nu dit formuliertje:

Wordt er niets geselecteerd, dan wordt alles getoond.

Voor het sorteren (we nemen 2 sorteercriteria), kiezen we eerst het land. Dit kan je dus maar enkel testen als je beide landen weergeeft…

Daarna gaan we om didactische redenen nog eentje toevoegen.

Dit geeft volgende mogelijkheden:

Zichtbaar formulier

Het toffe van de zaak is dat je nu alle filter en sorteermogelijkheden van de bezoekers ook als blok kunt weergeven:

Bij de blokken kan je nu instellen waar je dit formuliertje wil weergeven. Maak ook dat het blok enkel zichtbaar wordt als het nodig is.

Hier zie je het blok links. De gebruikers kunnen nu van daaruit instellen.

Extra

Oefening: Maak een view aan met winkels in je gemeente. Filter op straat of naam of trefwoord uit de body.

Oefening: in Drupal project gaan we dieper in op de filter criteria. Kan je voorspellen waarover deze filter gaat?

Views Slideshow

Dit gedeelte gaat over de combinatie van views en de diavoorstelling ervan. Ik heb wat onderzoek gedaan naar alle interessante zaken die op dit gebied voorradig zijn. DDblock en Galleria vielen bijvoorbeeld niet in mijn smaak en worden niet behandeld. We installeren eerst de views slideshow.

We zien dat Cycle ook mee wordt geïnstalleerd:

We moeten ook JQuery in libraries aanbrengen. Haal het bestandje van het net.

Zet het op de juiste plaats:

We maken nu een nieuwe inhoudstype aan met volgende velden:

Maak nu een aantal pagina’s aan met dit nieuwe type. Ik maak enkele zichten van onze centrumsteden aan.  Als je zou op één pagina meerdere afbeeldingen plaatsten, dan toont hij deze onder elkaar in de diavoorstelling. Dit is niet onze bedoeling. Dus… meerdere keren een gelijkaardige pagina maken. Ik heb Brugge, Gent en Antwerpen..

Nu maken we een nieuwe view aan. Je kunt zelf kiezen of je een pagina en/of een blok wil aanmaken.

Pagina weergave

Je krijgt dit in de interface:

We gaan onderaan ook een pager aanmaken, met de naam van de steden. klik op instellingen van de diavoorstelling.

Vergeet niet de optie onderaan aan te vinken, anders werkt de pager niet

Dit zou je nu in de voorbeeldweergave moeten zien. Niet erg, ze staan nog onder elkaar.

Via de CSS injector gaan we ne deze items naast elkaar zetten ipv onder elkaar. We installeren en voegen code toe die we dan toekennen aan bepaalde pagina's. Doe dit nauwgezet. Niet elke pagina moet deze extra CSS krijgen.

Maak een nieuwe rule aan:

Dit staat er: float:left zorgt voor de horizontale uitlijning. Margin en padding zorgen voor de afstand tussen de items. Ik zet ook een blauw randje rond de actieve slide. Via de inspector van Firefox kom je te eten welke class je moet aanspreken. Later daarover meer.

Voeg deze code toe: (deze code kan je kopiëren en plakken, die van de print niet natuurlijk..)

.views-slideshow-controls-bottom .views-slideshow-pager-field-item
    { float: left;
    margin: 5px 19px 0 0;
    padding: 3px;
    }
.views-slideshow-pager-field-item.active{
    border: 1px solid blue;
    }

En kijk eens...

Tenslotte kunnen we nog eens een contextuele filter toepassen als we dit willen... Filter op de titel (= naam van de stad). Je ziet dat dit dus ook bij de views slideshow gaat.

Blok weergave

We kunnen ook de view slideshow als blok weergeven. We maken een nieuwe weergave aan als blok en stellen dit in naar keuze.

Nu kan je het blok toekennen aan een plaats in je thema.

Het resultaat:

Zoals je ziet is er een schuifbalkje onder de diavoorstelling aanwezig. Deze toont de slide die op dit ogenblik wordt getoond en schuift zo mee. Je kunt het ook als besturingselement gebuiken. Klikken en schuiven toont andere dia's. Dit is de Views slideshow slider. Installeer en activeer de module.

Er zijn geen instellingen. Na installatie en activatie komt er echter een mogelijkheid bij in de instellingen van de diavoorstelling:

Overlay weergave

Een overlay is een teksvak dat over een afbeelding komt. Met de nodige CSS kan je dit transparantie en kleur geven.

We installeren Views slideshow Xtra. De overlay zit er bij. Activeer enkel de overlay. De hoofdmodule (Xtra zonder overlay) wordt niet meer aangeraden en hebben we niet nodig. Het voorbeeld laten we ook voor wat het is...

De werkwijze die ik zal volgen is de meest aangeprezen in de drupal fora. Ze wijkt enigszins af van de gemakkelijkste werkwijze maar zal in de toekomst de enige manier worden. We maken een bijlage met de tekst die we willen tonen over de afbeelding. We voegen trouwens ook een tellertje toe bij de velden. (resultatenteller)

Bij de instellingen van de diavoorstelling moet je ook maken dat de overlay actief staat:

Daarna gaan we een bijlage aanmaken van het type views slideshow Xtra overlay. We voegen de bijlage toe aan de weergave die we zonet gemaakt hebben.(pagina voor overlay)

 

Je ziet nu een tekstje verschijnen bovenaan de figuur. Trekt qua opmaak op niets, maar het staat er. Dit is belangrijk. Tevens staat er onderaan een nummering. We hebben de resultatenteller als veld toegevoegd.

We hebben dit op deze manier gedaan... Sluit het veld uit van de weergave.

en stel ze in al paginering.

De nummers staan nog onder elkaar. Geen paniek dit komt goed. Voeg met de CSS injector volgende code toe:

.views-slideshow-xtra-overlay {
  z-index: 50;
  position: absolute;
  top:5px;
  left:5px;
    background:#CD853F;
    height:20px;
    width:460px;
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
    color:white;
    font-size:15px;
    font-weight:bold;
    padding:10px;
    }

Kijk eens naar de andere CSS code... opacity... Waarom is de letterkleur niet volledig wit? Je zult al naar gelang je afbeeldingen en hun afmetingen aanpassingen moeten doen. Vandaar dat de echte Drupallers hier geen kant en klare recepten aanbieden. Ze verwachten dat je zelf de opmaak in handen neemt. Een mogelijk resultaat met overlay en paginering:

Miniatuur weergave

We gaan een paginering maken met miniaturen. Maak een blok aan met 2X het veld met de afbeeldingen:

 

De ene keer neem je het formaat voor de slideshow zelf:

De andere zet je naar miniaturen en je sluit dit ook uit van weergave. Paginering zal dit overnemen.

Nu kan je de paginering instellen.

In de voorbeeldweergave zie je zo iets..

We weten al dat de CSS de rest doet.

Slideshows met tekst

We maken een blokweergave aan met onderstaande velden. Merk op dat ik een link gebruik. Inderdaad ik heb de tekst van de gescheidenis beperkt tot een 600 tekens en zo zorg ik dat er een link is naar de full inhoud. Maak dat de volgorde van de velden exact overeenkomt met de mijne. Je zult later zien waarom...

De voorbeeldweergave:(hier staat de link nog onderaan).

Wat als we nu zouden willen dat de figuur naast de tekst komt... Nu gaan we iets peciaal doen. (nóg specialer..) We sluiten de figuur én de link uit van weergave...Bij de link kan je hier trouwens een eigen tekst voorzien.

Ook de link sluiten we dus uit van weergave.

Het veld 'geschiedenis' beperk ik tot een teaser.

Nu gaan we het veld 'geschiedenis'  herschrijven. Het komt er op neer dat we dit veld gebruiken om de andere velden die uitgesloten werden van weergave, terug zichtbaar maken.

Hoe kom ik aan deze syntax (=schrijfwijze)? Wel bij vervangingspatronen kan je zien hoe je dit moet doen. Alle voorgaande velden (vandaar het belang van de volgorde) worden hier getoond.

Waarom zoveel moeite doen om eerst de velden uit te schakelen en ze daarna te heractiveren op deze manier? Wel zoals je daarnet kon zien heb ik niet alleen de velden terug gezet. Ik heb ze ook een <div> en CSS  ID meegegeven. Het veld met de figuur (stadsgezicht) heb ik ID=vloeiend gezet. Door in de CSS een ID aan te maken (te herkennen door een #) kan ik dus bepalen waar dit komt. Daarvoor moet je een division (div) aanmaken. Dan kan je daarna alles van opmaak op toepassen. De knop 'Vervolg' heb ik ook gemaakt met CSS. Ik heb er een achtergrondkleur, afronding,... aan toegevoegd. Let ook op clear:both; Dit zorgt er voor dat de float die nog open stond, ongedaan wordt gemaakt. Anders gaat de knop mee floaten. Speel maar met de kleuren en de radius...

Voeg deze code toe aan de injector:

#vloeiend{
    float:left; margin: 5px 19 px 0 0 ;
    }
#normaal{
    clear:both;
    border: 1px solid #a1a1a1;
    padding: 5px 5px;
    background: #999966;
    width: 50px;
    border-radius: 10px;
     }

Het resultaat:

Views Nivo slider

Tenslotte gaan we ook nog een slideshow maken waar er overgangen tussen de dia's aanwezig zijn. Je weet wel... faden, schuiven,... We gebruiken daarvoor Views Nivo slider. Het is het broertje van Nivo slider. Nivo Slider is een module om diavoorstellingen met figuren te voorzien bij thema's die dit niet in hun opmaak hebben. We installeren de slider.

Er moet ook een third party toegevoegd worden.

Nu kan je de slider selecteren in je view. Hier maak ik een blok.

Bij de instellingen zie je dit. Je ziet dat je de dia overgang kunt kiezen.

Voor de rest moet je niet veel verwachten. De control navigator werkt op dit ogenblik niet met thumbnails (bij mij). Daarom laat ik het op basis staan.

Het resultaat: (ik heb geprobeerd om een overgang in beeld te brengen...Dit moet tussen Gent en Antwerpen zijn, zo te zien)

Zo. Nu heb je een idee van de Views Slide show en de mogelijkheden er van.