Joomla Template (19) – Artikelen toevoegen aan Joomla (2)

In het vorige artikel heb ik toegelicht hoe je een artikel toevoegt aan een Joomla website. Daarbij heb ik 1 onderdeel overgeslagen, namelijk het plaatsen van afbeeldingen / plaatjes. Het plaatsen van een afbeelding in Joomla kan op twee manieren: 1) via de menubalk boven een tekstveld of 2) via de Mediamanager en het tabblad Image.

Een afbeelding plaatsen via de menubalk boven een tekstveld

Deze manier is het eenvoudigst, maar kent nadelen.
1) Bedenk de locatie van een afbeelding (ergens op een andere website, of op je eigen website)
2) Klik op het boompje boven een tekstveld.
3) Er verschijnt nu een klein schermpje dat je moet voorzien van de informatie over de afbeelding:

a) vul bij Image URL het volledige adres op van het plaatje (dus met http://);
b) daaronder de description (omschrijving) – dit ziet een bezoeker als hij/zij met de muis over de afbeelding gaat;
c) bij alignment stel je in hoe het plaatje staat ten opzichte van de tekst;
d) dimensions kan je weglaten, maar als je ze wel instelt zal het plaatje precies die grootte aannemen;
e) met border (rand) kan je aangeven hoe dik de rand moet zijn – als je geen rand wilt stel je dit in op 1 (want dat kan je net gemakkelijk met een stylesheet regelen);
f) vertical space en horizontal space kan je gebruiken om wat ruimte rond het plaatje te maken ten opzicht van de tekst;
Klik op Insert en klaar. Als je een plaatje wilt aanpassen, klik dan 2x op de afbeelding. Het schermpje verschijnt dan weer en je kan je instellingen aanpassen.

Een afbeelding plaatsen via het tabblad Images

De manier waarop Joomla het eigenlijk bedoeld heeft is via het tabblad Images (Afbeeldingen). Als je dit voor de eerste keer moet gebruiken is het even wennen aan de logica. Maar… deze is er wel. Het tabblad gaat ervan uit dat je al afbeeldingen klaar hebt staan op je website. Die zie in het lijstje aan de linkerkant. Om een van deze plaatjes te plaatsen doe je het volgende:
1) Klik op het plaatje dat je wilt laten zien in je tekst; het verschijnt nu aan de linkerkant. Je kunt eventueel van folder wisselen via de selectielijst Folder.
2) Als het je bevalt klik op je op de >>. Het plaatje verschijnt nu ook rechts.
3) Heb je meer dan 1 plaatje in het document? Herhaal dit dan.
4) De volgorde bij meer dan 1 plaatje maakt uit. Die kun je aanpassen met de knoppen Up en Down (klik op een plaatje en kies Up om het omhoog te laten gaan). Waarom dit uitmaakt licht ik zo toe.

5) De volgende stap is de positie van de afbeelding te bepalen, de alt-tekst en eventueel een onderschrift.
a) Image Align – hoe moet de afbeelding staan ten opzicht van de tekst?
b) Alt text – welke tekst moet er verschijnen als je met je muis over de afbeelding gaat?
c) Caption – welk bijschrijft wil je tonen?
d) Caption Position – en waar moet deze tekst komen ten opzicht van het plaatje?
e) Caption Align – en hoe moet de tekst uitlijnen?
f) Caption Width – en hoe breed moet de tekst zijn?
Ik heb in het voorbeeld wat waarden bij Caption ingevuld, maar in de praktijk gebruik ik dit nooit.
6) Als je hiermee klaar bewaar je alles door op Apply (Toepassen) te klikken.

7) Je bent nu bijna klaar: klik met je muis op de plek waar je je afbeelding wilt gaan zien.
8 ) Klik daarna op het knopje Insert Image dat onder het tekstveld staat.
9) Er verschijnt nu de code {mosimage} in je tekstveld. Deze code wordt bij de weergave van de pagina vervangen door het plaatje dat je zojuist hebt ingesteld.
NB. De volgorde van je afbeeldingen bepaalt hoe ze getoond worden: heb je in je tekst vaker de code {mosimage} gebruikt, dan zal Joomla in de lijst met afbeeldingen de 1e code koppelen aan het 1e plaatje, de 2de code met het 2de plaatje, etc.
10) Bewaar nu je artikel en je hebt je artikel gepubliceerd met afbeeldingen.

Tot slot: voordelen, nadelen
Zoals je ziet kan je met Joomla artikelen met afbeeldingen publiceren, maar het is nogal een rompslomp. Voordeel is wel dat je afbeeldingen gemakkelijk kunt hergebruiken. Een nadeel is dat je een afbeelding geen eigen CSS class mee kunt geven. Dat maakt de opmaak met CSS minder gemakkelijk.
(Afbeeldingen plaats je overigens op je server met de Mediamanager.)