Mijn-eigen-website.nl

Websitebouw voor doe-het-zelvers (zonder WordPress)

Een stap-voor-stap beschrijving voor wie thumbnails maken wil

Zo maak je thumbnails van foto’s die je wilt laten zien in een fotogalerij of pop-up.

Thumbnails zijn verkleinde versies van foto’s die je wilt laten zien in een fotogalerij of pop-up. Op deze pagina leg ik je stap voor stap uit hoe je zulke thumbnails maakt. (Elders op deze site leg ik uit hoe je thumbnails opneemt in een fotogalerij of hoe je ze laat openen in een pop-up.)

In het blokje hieronder staan zes thumbnails: kleine afbeeldingen die – wanneer je erop klikt – geopend worden in een nieuw tabblad, waar je ze in een wat groter formaat kunt bekijken.

blauwe zeilen katrol touwen zeezeilen zeilboot zeilen
  1. Je uitgangspunt is de serie grote foto’s die je wilt laten zien als er op een van de thumbnails wordt geklikt. Zijn dat foto’s die je zelf hebt gemaakt, dan zijn ze waarschijnlijk te groot om zomaar op je website te plaatsen. Het eerste wat je daarom moet doen, is deze foto’s verkleinen tot een geschikt formaat.

    De foto’s uit het voorbeeld heb ik allemaal verkleind tot ze een afmeting hadden van 600 pixels bij 450 pixels. Ook heb ik de resolutie van elke foto ingesteld op 72 dpi. En verder kun je elke foto nog comprimeren, zodat elk bestand niet groter is dan 100kB. (Alle foto’s in dit voorbeeld zijn trouwens afkomstig van openphoto.net.)

  2. Het volgende wat je doet, is thumbnails maken van de grote foto’s. Een thumbnail is niets anders dan een kleine versie van dezelfde foto. Mijn grote foto’s zijn zoals gezegd 600 pixels breed bij 450 pixels hoog (of andersom als het een portrait foto is).

    Eerst heb ik ze vierkant gemaakt – niet door de image size te veranderen, maar door de canvas size aan te passen. Je kunt dat doen met een fotobewerkingsprogramma. Maak de laagste waarde (voor hoogte of breedte, afhankelijk of het een portrait- of landscape-foto is) gelijk aan de hoogste en zorg dat de extra ruimte die toegevoegd moet worden, gelijkmatig wordt verdeeld. Dus is het een landscape-foto, dan moet er evenveel ruimte boven als onder worden toegevoegd. Je krijgt dan een vierkante afbeelding van (in mijn geval) 600 pixels hoog bij 600 pixels breed.

    Daarna heb ik deze zelfde foto verkleind tot een formaat van 100 x 100 pixels (nu heb ik dus wél de image size veranderd).

    Deze kleine versies sla je op onder een iets andere naam. Bijvoorbeeld: een van mijn grote foto’s heet blauwe-zeilen.jpg en de thumbnail van die foto heet tn-blauwe-zeilen.jpg.

    Al deze foto’s (dus thumbnails en grote versies) upload je naar (een map op) je server.

  3. Nu moeten de kleine foto’s nog netjes worden gerangschikt. Daarvoor heb ik het hele blok thumbnails tussen een set <div>-tags gezet. Dit div-element heb ik de volgende stijlkenmerken gegeven: style="width: 400px; max-width: 100%; margin: 0 auto; text-align: center;"

    Hiermee wordt het blokje met thumbnails dus nooit breder dan 400px en ook nooit breder dan 100% van het onderdeel waarbinnen het staat. Normaal gesproken is er ruimte voor drie thumbnails naast elkaar, maar op een smal scherm zullen er maar twee naast elkaar komen te staan. Het blokje als geheel zal in horizontale richting in het midden van het scherm worden gezet.

  4. Van elke thumbnail-foto maak je vervolgens een link naar de grote versie van dezelfde foto. Dat doe je door de code van je foto tussen de html-codes voor een link (<a href=""> en </a>) te zetten en deze link te laten verwijzen naar de grote versie van je foto. De code van de eerste thumbnail wordt dan:

    <a href="http://www.mijn-eigen-website.nl/images/blauwe-zeilen.jpg" target="_blank">
    <img src="http://www.mijn-eigen-website.nl/images/tn-blauwe-zeilen.jpg" alt="blauwe zeilen" style="width: 100px; height: 100px; border: 1px solid #909090;">
    </a>

    De eigenschap border: 1px solid #90990; zorgt ervoor dat er niet automatisch een blauw randje om de thumbnail komt te staan omdat deze nu veranderd is in een link. In plaats daarvan wordt een lichtgrijs (kleurcode: #909090) weergegeven.

Verder met pop-ups of een fotogalerij:
De basis van je thumbnail-galerij is hiermee klaar. Als je je pagina in een browser opent en je klikt op een van de thumbnails, dan verschijnt de grote versie van je foto in een nieuw tabblad. Een andere mogelijkheid is ze in een fotogalerij op te nemen.