Stap 09 - Werken met afbeeldingen

Gepubliceerd: 6 november 2026.

Juist bij een kooksite moeten foto's ervoor zorgen dat het water je in de mond loopt. Onze site bevat tot nu toe alleen tekst, dus tijd om daar verandering in te brengen. In deze stap leer je hoe je afbeeldingen uploadt en organiseert in Media, hoe je een afbeelding aan een artikel koppelt en hoe je een foto midden in je tekst plaatst.

Rechten op foto's: gebruik alleen foto's die je zelf hebt gemaakt of waarvoor je toestemming hebt. Gratis fotobanken zoals Pexels en Unsplash bieden foto's aan die je op je website mag gebruiken. Lees wel altijd even de licentievoorwaarden. De foto's in deze stap komen van Pexels.

Media organiseren

Alle afbeeldingen en bestanden van je site beheer je via Inhoud > Media. Na de installatie staan hier al een paar mappen en voorbeeldafbeeldingen.

Map aanmaken

Naarmate je site groeit, komen er steeds meer afbeeldingen bij. Het loont dus om vanaf het begin een beetje orde aan te brengen. Klik op Nieuwe map aanmaken, vul als naam recepten in en klik op Maken. Gebruik voor mapnamen en bestandsnamen alleen kleine letters, cijfers en koppeltekens. Dat voorkomt problemen en de bestandsnaam komt ook in het webadres van de afbeelding terecht.

Afbeeldingen uploaden

Open de map recepten en klik op Uploaden. Kies de foto's op je computer. Je kunt ook meerdere bestanden tegelijk vanuit je verkenner of Finder naar het venster slepen.

Let op de grootte van je foto's. Een foto van een moderne camera of telefoon is vaak meerdere megabytes groot en duizenden pixels breed. Dat maakt je site onnodig traag. Voor onze kooksite zijn foto's van maximaal 1600 pixels breed ruim voldoende. Verklein je foto's dus voor het uploaden, of laat Joomla dat doen. Hoe dat werkt, lees je verderop.

Media in één oogopslag

De map recepten in Media met genummerde onderdelen

1 Uploaden

Upload een of meer bestanden naar de map die je op dat moment hebt geopend.

2 Nieuwe map aanmaken

Maak een nieuwe map aan in de huidige map.

3 Verwijderen

Selecteer een of meer bestanden en verwijder ze. Let op: een afbeelding die je verwijdert, verdwijnt ook uit de artikelen waarin je hem gebruikt.

4 Mappenstructuur

De mappen van je site. Klik op een map om de inhoud te bekijken.

5 Weergave

Maak de miniaturen groter of kleiner, of wissel naar een lijstweergave met de bestandsgrootte en afmetingen.

6 Informatie

Toont extra informatie over het geselecteerde bestand, zoals de afmetingen en de grootte.

Afbeelding bewerken

Ga met je muis op een afbeelding staan en klik op de drie puntjes. Je kunt de afbeelding dan bekijken, downloaden, hernoemen, bewerken, de link kopiëren of verwijderen.

De acties die je op een afbeelding kunt uitvoeren

Kies je voor Bewerken, dan opent Joomla een eenvoudige editor. Hiermee kun je een foto bijsnijden, de grootte aanpassen en draaien. Handig om bijvoorbeeld van een staande foto snel een liggende uitsnede te maken.

De afbeeldingseditor van Joomla met de tabbladen Bijsnijden, Grootte aanpassen en Draaien

Tip: wil je dat Joomla grote foto's automatisch verkleint tijdens het uploaden? Ga naar Systeem > Plugins en open Media actie - Grootte aanpassen. Zet Automatische verwerking aan en vul een maximale breedte en hoogte in. Vanaf dan worden te grote foto's direct verkleind.

Afbeeldingen bij een artikel

Iedere Joomla-artikel kan twee afbeeldingen hebben: een afbeelding introtekst en een afbeelding volledig artikel. De eerste zie je in overzichten, zoals de categorieblog. De tweede verschijnt bovenaan het artikel als je het opent.

Afbeeldingen en links

Open het recept Tomatensoep met basilicum en ga naar het tabblad Afbeeldingen en links. Klik bij Afbeelding introtekst op Selecteren.

Afbeelding kiezen

Je ziet nu Media in een venster. Open de map recepten en klik op de foto die je wilt gebruiken. Je kunt hier ook direct nog een foto uploaden. Klik daarna rechtsboven op Selecteren.

Beschrijving van afbeelding (alt-tekst)

Vul bij Beschrijving van afbeelding (Alt-tekst) een korte omschrijving in van wat er op de foto te zien is, bijvoorbeeld Twee kommen tomatensoep met kiemgroente op een houten tafel. Deze tekst wordt voorgelezen door schermlezers voor mensen die slecht of niet zien, en zoekmachines gebruiken hem om je afbeelding te begrijpen. Is een afbeelding puur decoratief? Vink dan Geen beschrijving aan.

De afbeelding introtekst met een ingevulde alt-tekst

Doe hetzelfde bij Afbeelding volledig artikel. Je mag dezelfde foto gebruiken. Sla het artikel op en bekijk het resultaat op de site. In de categorieblog Voorgerechten staat de foto nu boven het recept.

De categorieblog met de introafbeelding boven het recept

Een afbeelding in de tekst

Soms wil je een foto midden in je tekst plaatsen, bijvoorbeeld een foto van een tussenstap. Ga in het artikel naar het tabblad Inhoud en zet je cursor op de plek waar de foto moet komen. Klik op CMS inhoud en kies Media.

Kies een foto. Onder Aanvullende gegevens vul je ook hier de alt-tekst in. De optie Afbeelding wordt pas opgehaald als deze getoond wordt staat standaard aan. Daardoor laadt de pagina sneller: de foto wordt pas geladen als een bezoeker ernaartoe scrolt. Klik op Media invoegen.

Een afbeelding invoegen in de tekst met de aanvullende gegevens

In de editor kun je de afbeelding daarna nog verkleinen door de hoekjes te verslepen, of met de knoppen voor uitlijnen in de werkbalk links of rechts naast de tekst zetten. Wij hebben de foto rechts naast de ingrediënten gezet.

Het recept met een afbeelding naast de ingrediënten

Controleer je werk: in de werkbalk van een artikel staat de knop Toegankelijkheid controle. Daarmee controleert Joomla je artikel op veelvoorkomende fouten, zoals afbeeldingen zonder alt-tekst of kopjes in de verkeerde volgorde.

Voeg op dezelfde manier foto's toe aan je andere recepten. Je site begint er nu echt als een kooksite uit te zien!