Een afbeelding invoegen

Een tekst met één of enkele plaatjes, afbeeldingen of foto's nodigt de bezoeker meer uit om de tekst te gaan lezen dan alleen maar een lange lap saaie tekst. Met een logo, een leuke afbeelding die je hebt gevonden op het internet of een kleine foto maakt een tekst meteen aantrekkelijker.

Voor je de afbeelding upload en invoegt is het zinnig om eerst na te denken over de afmetingen en grootte van de afbeelding.

We gaan het volgende plaatje in de tekst voegen:

Joomla Cursus Logo

Deze afbeelding heeft geen tekst links of rechts lopen. De afbeelding heeft zijn eigen 'paragraaf'. In HTML zou het er ongeveer zo uitzien:

<p>We gaan het volgende plaatje op verschillende manieren in de tekst voegen:</p>

<p><img width="200" height="200" src="/images/logo-joomla-cursus-200.jpg" alt="Joomla Cursus Logo" /></p>

Afbeelding invoegen

Ga met de cursor in de tekst staan waar de afbeelding ingevoegd moet worden.

Afbeelding invoegen

Afbeelding uploaden

Klik onderaan de editor op de knop 'Afbeelding'. Er opent een popup venster. Eerst moet de afbeelding geupload worden naar een map op de server. De standaard afbeeldingenmap voor Joomla is 'images/stories/'. In de Algemene Instellingen onder tab 'Systeem' kun je het pad van de afbeeldingen wijzigen. In dit voorbeeld is 'images' de standaard map voor afbeeldingen. In deze map zal ik deze uploaden.

Afbeelding invoegen

We klikken op de knop 'Bestand kiezen' onder 'Upload'. Op de computer kies je het bestand dat je wilt uploaden. Dubbel klik op het bestand, of kies openen' Klik nu op 'Start upload'. Het bestand wordt nu in de map gezet.

Afbeelding kiezen

In het overzicht van de plaatjes staat nu het nieuwe plaatje er bij. Selecteer het plaatje door er één keer op te klikken. Onder het overzicht en boven de upload knop staan nog twee velden 'Beschrijving afbeeldingen' en 'Titel van de afbeeldingen'. Het lijkt optioneel om deze velden in te vullen, want zonder dat deze opties zijn ingevuld wordt de afbeelding prima weergegeven.

De beschrijving is voor de 'alt'-tag (alternate) van de afbeeldingen. Deze tekst wordt getoond indien het plaatje niet wordt weergegeven. In plaats van een klein rood kruisje wordt de alt-tag getoond. Ook mensen met een visuele beperking hebben baat bij deze alt-tag. Zonder de alt-tag kunnen blinden de afbeelding niet waarnemen. Verder komt het de zoekmachine optimalisatie ten goede wanneer zowel de alt-tag als de titel worden ingevuld. Ook deze teksten worden door zoekmachines geïndexeerd. Vul dus zowel de beschrijving als de titel in!

Klik nu op 'Invoegen' rechtsboven van het venster en de afbeelding staat in het artikel.

De afbeelding links of rechts van tekst.

Wanneer je een afbeelding invoegt, heb je de mogelijkheid om het links of rechts van de tekst te laten uitlijnen. Gebruik de uitlijning met afbeeldingen van maximaal 300 pixels breed. Bij uilijnen links, zie je dat de tekst zo dicht langs het plaatje gaat, dat het er tegenaan zit. Een beetje ruimte tussen tekst en plaatje is vaak prettiger lezen.

Selecteer het plaatje in klik op 'Afbeelding bewerken' in de knoppenbalk'.

Joomla editor Knoppenbalk insert edit image

Door een waarde in de velden 'Vertical space' en/of 'Horizontal space' in te vullen, wordt de tekst verder van de afbeelding uitgelijnd. Ook kunt u hier eventueel de afbeelding iets kleiner of groter maken, maar dat is niet aan te bevelen.