Dag 16: Slideshow

In de tutorial van vandaag gaan we een slideshow extensie installeren en op deze website plaatsen. Veel websites gebruiken een slideshow om de aandacht van de bezoeker naar belangrijke content te trekken. 

De slideshow extensie downloaden

Zoals je mag verwachten heb je ook weer vol op keuze als het om slideshows gaat. Zelf heb ik goede ervaringen met de Widgetkit slideshow.

Widgetkit lite is een gratis component met een aantal features, waaronder een slideshow.

Ga naar de download pagina van de Widgetkit uitbreiding en download hier de Lite versie.

extensiebeheer

Installeer de gedownloade extensie volgens de gebruikelijke methode.

Er is nu een nieuw Widgetkit menu-item bijgekomen in het Componenten menu, klik hierop.ik,

Ga vervolgens naar het tabblad Slideshow. Daar heb je twee keuzes: "Add new" of "Use Joomla".

Wanneer je voor "Add new" kiest, maak je de slideshow items direct in het Widgetkit component aan. 

Kies je voor "Use Joomla", dan maak je de items aan via Joomla's artikel beheer component. Deze laatste optie heeft mijn voorkeur omdat ik dan alle content onder één plek hou.

Op de volgende pagina kun je allereerst een naam opgeven voor deze slideshow, ook wanneer je straks de slideshow module aanmaakt zul je de slideshow aan deze naam kunnen herkennen.

Vervolgens geef je aan uit welke categorie de slideshow artikelen moet weergeven. Je zou speciaal voor Slideshow artiklen een nieuwe categorie kunnen toevoegen zoals je hebt geleerd op Dag 5: Content aanmaken of bijvoorbeeld de Nieuws categorie kunnen selecteren.

Het aantal items dat weergegeven moet worden laat ik op 4 staan.

Tot slot kun je aan de rechterzijde nog een aantal waarden veranderen die met de weergave en de effecten van de slideshow te maken hebben, zoals de Autoplay optie, waarmee je kunt aangeven of de slideshow uit zichzelf na een bepaalde periode (de Autoplay Interval) naar het volgende item moet gaan, of dat dit alleen via de bezoekers-navigatie dient te gebeuren.

Klik, wanneer je klaar bent op Opslaan.

De slideshow module instellen

Nu er een slideshow is aangemaakt kunnen we deze met behulp van een module ergens op de website plaatsen. Ga hiervoor naar Extensies > Modulebeheer.

widgetkit-bewerk

Klik dan op de Widgetkit module, die tijdens de installatie al is aangemaakt.

module-instel

Verander de titel eventueel in een iets makkelijker te herkennen naam, bijvoorbeeld "Slideshow - Nieuws".

De titel wil je op de website waarschijnlijk Verbergen.

Kies als module positie Slideshow [Slideshow], dit is de positie direct boven de hoofdcontent.

Vergeet niet om de Slideshow te publiceren.

slideshow-module-kies

Onder het tabblad Opties selecteer je achter het "Widget"  veld vervolgens Nieuws, aangezien dit de enige Slideshow die we tot noch toe hebben aangemaakt.

menu-toewijzing

Onder het tabblad menutoewijzing kies je tot slot de pagina's waarop de slideshow moet worden weergegeven. Ik zelf vind weergave op de voorpagina voldoende.

Bekijk nu het resultaat op de voorpagina. Er is maar 1 nieuwsbericht, dus de slideshow roteert nog niet echt, maar je snapt het idee.

In plaats van het weergeven van nieuwsberichten zou je ook een nieuwe categorie kunnen aanmaken speciaal voor Slideshow items. Hier zou je bijvoorbeeld promotie-achtige artikelen kunnen aanmaken zoals een adverterende tekst over de kracht van het bedrijf met een mooie brede teamfoto.

Optioneel: nieuwsberichten niet dubbel tonen

Indien je juist wel nieuwsberichten wilt tonen, wil je waarschijnlijk niet meer dat de nieuwsberichten ook nog eens onder de slideshow getoont worden.

Bewerk hiervoor het Home menu-item zoals je dit eerder hebt gedaan in Dag Dag 7: Menu's beheren.

home-menu-aanpassen

Zet dan onder het Geavanceerde opties tabblad de categorie op Paginas en het aantal hoofdartikelen op 0.

Een slideshow binnen een artikel tonen

Een slideshow kun je eventueel ook binnenin een pagina tonen met behulp van een shortcode.

shortcode

Elke slideshow die je aanmaakt heeft zijn eigen shortcode, deze vind je in het Widget kit component, achter de naam van de slideshow.

Deze code kun je simpelweg kopiëren en plakken in het artikel waar je de slideshow wilt plaatsen. 

Je kunt natuurlijk ook de Modules Anywhere uitbreiding hiervoor gebruiken, zoals je hebt geleerd in Dag 13: Contact formulier. In dat geval voeg je de Slideshow module toe binnen het artikel.

Slot

Hopelijk is alles weer duidelijk en heb je nu een mooie slideshow op jouw pagina.

eind

Laatst gewijzigd op: