Views Slideshow

Leseenheid

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.