Foto¶
Het Foto-blok plaatst één afbeelding gecentreerd op de pagina. De foto wordt automatisch bijgesneden naar een vaste hoogte (465px) en gecentreerd uitgesneden — het CMS zorgt voor de juiste verhoudingen.
Hoe het op de site verschijnt¶
Velden¶
| Veld | Type | Verplicht | Wat erin? |
|---|---|---|---|
| Foto | Bestand (afbeelding) | Nee* | Eén afbeelding uit de map Bestanden. |
| Link | Link-veld | Nee | Maakt de foto klikbaar (intern, extern, e-mail, telefoon, bestand). |
*Het CMS staat technisch toe om dit blok zonder foto op te slaan, maar dan rendert er niets — vul altijd een foto in.
Hoe het rendert¶
- De afbeelding wordt automatisch bijgesneden naar 465 pixels hoog. Brede foto's worden links/rechts ingekort, smalle worden boven/onder ingekort. Het CMS centreert het uitgesneden gebied.
- De afbeelding wordt gecentreerd op een breedte van max 8 van de 12 kolommen (≈ tweederde paginabreedte).
- Als er een Link is ingevuld, wordt de hele afbeelding klikbaar. Het ALT-attribuut wordt dan gevuld met de aangepaste tekst van de link.
ALT-tekst alleen via het Link-veld
Vul je géén link in, dan heeft de afbeelding standaard geen ALT-tekst. Voor toegankelijkheid (screenreaders, SEO) kan je beter een korte beschrijving in het ALT-veld in Bestanden zetten — die wordt dan opgehaald door alle blokken die de foto gebruiken.
Een foto kiezen¶
- Klik in het Foto-veld op Toevoegen.
- Het CMS opent de map Bestanden (volume Algemeen).
- Kies een bestaande afbeelding, of klik op Uploaden rechtsboven om een nieuwe toe te voegen.
- Bevestig met Selecteren.
Goede foto's kiezen¶
- Beeldverhouding ongeveer 16:9 of breder. Verticale (portret-)foto's worden hard bijgesneden tot 465px hoog.
- Resolutie minstens 1600 pixels breed zodat de foto scherp blijft op grote schermen.
- JPG voor foto's, PNG voor schermafdrukken of grafieken met scherpe randen.
- Bestandsgrootte onder 500 KB. Optimaliseer eventueel met TinyPNG of via Squoosh voor het uploaden.
- Geen tekst in de afbeelding als je een meertalige site hebt — die tekst is niet vertaalbaar. Zet tekst liever in een Tekst-blok ernaast of een Hoofding erboven.
Veelgemaakte fouten¶
- Foto's met tekst erin — onleesbaar bij vertaling, slecht voor SEO en toegankelijkheid.
- Te lichte of te donkere foto — controleer in Voorbeeld hoe het er op de echte pagina uitziet.
- Foto wordt afgesneden waar het belangrijkste in beeld staat — kies een afbeelding waar het onderwerp gecentreerd zit, of bewerk de foto vooraf zodat de bijsnede klopt.
- Verschillende foto's per taal — zelden nodig. De foto wordt standaard gedeeld over alle talen. Kies enkel een aparte taal-versie als de afbeelding tekst bevat (zie hierboven: probeer dat te vermijden).