Vraag:

Hoe maak ik een image slider op een pagina zodat ik aan mijn klanten de foto’s van mijn product of event kan laten zien?

Antwoord:

Om dit te kunnen doen moeten er een aantal onderdelen in de website geïnstalleerd zijn. Wilt u weten of dit in uw site ook is geïnstalleerd kijk dan even onder het menu Componenten of daar het component Easy Image Gallery bij staat. Is dit het geval dan is u systeem hier al op voorbereid. Is dit niet het geval neem dan eerst contact op met ons om dit te laten installeren.

De Easy Image Gallery wordt door ons meestal gebruikt om producten, diensten, trainingen, cursussen en/of evenementen in beeld te brengen. Dit wordt bijna altijd gedaan via een overzichtspagina waarop meerdere artikelen getoond worden. Zie screenshot:

Na een klik op Lees meer... knop wordt dan het artikel met de slideshow geopend. Zie screenshot:

Om een goede image gallery op te zetten moeten er een aantal stappen ondernomen worden.

1. Als eerste zorg ervoor dat de foto’s die u in de slider wilt gebruiken, niet breder zijn dan 1024 pixels. Dit is om de laadtijd van de site zo laag mogelijk te houden. De mooiste sliders zijn die waar alleen liggende of alleen staande foto’s worden gebruikt. Wordt dit door elkaar gebruikt dan is de slider minder mooi. Houdt hier rekening mee met het maken van foto’s;
2. Haal de foto’s even door tinypng.com. Ook dit zorgt ervoor dat de foto’s veel sneller zullen laden;
3. Vervolgens zult u een foto moeten verkleinen voor de overzichtspagina. In ons voorbeeld zijn dit dus de volgende type foto’s:
   
   
   
   Wat exact de maten moeten zijn staat ook in de artikel template. Dit wordt in punt ... uitgelegd;
4. Wilt u weten hoe u punt 1 t/m 3 kunt uitvoeren kijk dan even onder de categorie Google: “Hoe optimaliseer ik mijn afbeelingen” hier staat stap voor stap uitgelegd hoe u dit kunt doen.
5. Als alle afbeeldingen klaar zijn kunt u de foto’s gaan uploaden. Open onder het menu Componenten het item Easy Image Gallery door op Easy Image Gallery te klikken u kunt hierbij het submenu negeren;
6. Het volgende scherm wordt geopend;
   
   
   
   Dit scherm staat in de standaard images/ direcory zoals u kunt zien in het grijze blok aan de linker kant van het voorbeeld scherm;
7. Elke slider heeft zijn eigen directory nodig. Dit betekend dat u de hoofdmap moet selecteren waarin u de slider wil plaatsen. In dit geval is dat de brommers/ directory. Door op het zwarte rondje met het + teken te klikken voegt u een directory toe.
   
   
   
   
8. Geef aan de directory een unieke naam die u ook gebruikt voor het artikel. Dit maakt het terugzoeken later eenvoudiger. LET OP: gebruik geen spaties of vreemde tekens in de directory naam en schrijf de naam van de directory op. U heeft hem later nodig
   
   
   
   Druk op Add om de folder naam toe te voegen;
9. Selecteer nu de folder die u zojuist heeft aangemaakt. Zoals u ziet is dit nog een hele witte pagina. Er staan immers nog geen foto’s in deze directory. Onder de directory structuur ziet u een knop Bestanden kiezen. Klik op deze knop en het volgende scherm wordt geopend:
   
   
   
   
10. Er kan maar 1 bestand tegelijk geupload worden. Dit zou betekenen dat u foto voor foto moet selecteren. Door de foto’s nu in een zip bestand in te pakken kunt u het gehele zip bestand in 1x uploaden. Dit betekend dat u maar 1x hoeft te uploaden. Dit werkt per operating systeem anders en wordt uitgelegd in de volgende punten;
11. Onder Windows installeer eerst het programma 7zip. Als u dit al heeft geinstalleerd kunt u dit overslaan. Ga naar de directory waar de bestanden staan en selecteer de eerste afbeelding houdt de shift toets in gedrukt en selecteer de laatste afbeelding. U kunt eventueel foto's deselecteren door de control toets in gedrukt te houden en de foto aan te klikken. Klik vervolgens met de rechter muis knop op een geselecteerde foto en kies voor het menu item:
    
    
    7-Zip > Toevoegen aan "... in dit voorbeeld Toevoegen aan "Super 50 motorcompany.zip". Uw zip bestand is nu klaar en u kunt verder bij punt 14;
12. Onder linux open de directory met de afbeeldingen. Selecteer alle afbeeldingen die u wilt gebruiken door de eerste afbeelding aan te klikken de shift toets ingedrukt te houden en de laatste foto aan te klikken. U kunt eventueel foto's deselecteren door de control toets in gedrukt te houden en de betreffende foto's aan te klikken. Klik vervolgens met de rechtermuisknop op één van de foto’s om het onderstaande menu te openen:
    
    
    
    Selecteer het menu item comprimeren. Dit opent het volgende scherm:
    
    
    
    Klik op de knop Maken en het zip bestand wordt in de directory met de foto’s toegevoegd:
13. Onder Apple werkt u als volgt:
    Selecteer de bestanden die ingepakt moeten worden.
    Klik met de rechtermuisknop op één van de bestanden en selecteer Comprimeer x onderdelen waar x staat voor het aantal in te pakken bestanden.
    
    
    
    Het zip bestand is nu gemaakt;
14. Nu er een zip bestand is kunt u in Easy Image Gallery het zip bestand in de juiste directory uploaden. Tijdens het uploaden worden de bestanden direct uitgepakt.
15. Vergeet niet om het thumbnail bestand (het kleine bestand voor de overzichtspagina) één directory hoger te zetten dan de foto’s die in de slider moeten. Deze thumbnail mag dus niet in dezelfde directory komen te staan.
    
    
    
    In dit voorbeeld waarin de foto’s voor de slider in de HondaMT directory staan moet ik de thumbnail foto dus in de brommers directory plaatsen. Zoals u ziet staan hier dus alle thumbnails van de onderliggende mappen
    
    
    
    
16. Nu de foto’s in het goede formaat op de server staan kan het artikel aangemaakt worden waarin de slideshow geplaatst wordt. Klik hiervoor op menu Inhoud > Artikelen
17. Klik op Nieuw
18. Onderaan de tekst pagina staat een knop Insert Template. Klik hierop u ziet nu alle voor u aangemaakte templates. In deze voorbeeld site heet de template die we moeten gebruiken Voertuigverkoop. Selecteer deze door hierop te klikken.
    
    
    
    
19. Er wordt nu een volledige pagina geladen. Dubbel klik in deze pagina op de woorden die ingevuld dienen te worden. Bijvoorbeeld het woord PlaatsHierDeAfbeeldingVan200x200Pixels. Op deze plek zult u de foto thumbnail moeten plaatsen. Klik hiervoor op het foto icoontje en selecteer de juiste foto in de directory waarin u de thumbnail heeft geplaatst. In ons voorbeeld de brommer directory.
    
    
    
    
20. Selecteer nu de overige woorden zoals DatumInvullen of Kilometerstandinvullen door er op te dubbel klikken en in te vullen wat er nodig is. Uw template kan uiteraard afwijken van dit voorbeeld maar er zijn altijd wel velden in te vullen. Als u alles heeft ingevuld controleer dan of de categorie goed staat. In dit voorbeeld moet de categorie op scooters staan.
    
    
    
    
21. Nu komt de meest lastige. In de tekst staat een code die vergelijkbaar is met deze code: {easygallery /verkoop/autos/peugeot-partner-2011, 1024,784}. Deze code moet aangepast worden naar de juiste afbeeldingslocatie. In dit voorbeeld staan mijn foto’s in de directory brommers/HondaMT LET OP directory namen zijn hoofdletter gevoelig u moet dus de naam exact opschrijven. In dit voorbeeld betekend dit dus dat ik de code er zo uit moet gaan zien: {easygallery /verkoop/brommers/HondaMT, 1024,784}
    
    
    
    
22. Als alles is ingevuld vergeet dan niet om ook een titel in te vullen voor dit artikel deze moet uniek zijn in het systeem anders kunt u het artikel niet opslaan. In mijn voorbeeld heb ik het artikel Testartikel genoemd.
23. Als u nu op de homepage de browser refreshed zult u zien dat het artikel op de site is toegevoegd. In dit voorbeeld is de scooter Honda MT toegevoegd.
    
    
    
    wordt er op de knop Lees meer... geklikt dan komt u in de detail pagina van het artikel terecht waar de image slider zichtbaar is.
    
    

U heeft nu een volledig werkend product toegevoegd met een image slider. Mocht er nog iets onduidelijk zijn in deze omschrijving neemt u dan gerust contact met ons op. Wij helpen u graag verder.