Je kan ter ondersteuning op diverse manieren beelden en illustraties in artikelen (of modules) opnemen.
Rechtstreeks in de artikeltekst.
Het betreffende beeld heb je vooraf bewerkt (bijgeknipt, geresized) en geüpload naar de betreffende map. Zie “Bestanden uploaden”.
In de bewerkingsmodus ga je in de tekst op de lijn staan waar het beeld moet komen en klik je op het icoontje van de Image Manager, met de tekst pop-up: "Insert image"
In het verkenner-gedeelte van de Image-Manager ga je naar de map waar je het betreffende beeld vooraf geüpload hebt. Nu het betreffende bestand selecteren (erop klikken) en rechts daarvan verschijnen de technische details van het digitale beeld, o.a. “Dimensions” dit is het oorspronkelijke formaat van het geüploade beeld en een miniatuurweergave van het beeld ter controle.
In het bovenste deel kunnen volgende gegevens aangepast worden:
URL: dit is het interne pad naar de afbeelding binnen de webserver. Dit hoeft niet meer aangepast te worden maar controleer of hier het juiste bestand staat.
Alternate tekst: hier komt automatisch de naam van het digitale bestand te staan. Omwille van de ranking in de zoekresultaten van zoekmotoren zoals Google, moet je dit vervangen door een betekenisvolle naam. De zoekmachines beschikken nl. niet over mensenogen en kunnen geen beelden interpreteren zoals een mens, maar weten alleen maar dat er een beeld staat. Aan de hand van een betekenisvolle tekst weet de zoekmotor dan wat er met het beeld bedoeld wordt. Slechtzienden horen dan wat het beeld toont. De zoekmotoren hechten hier terecht belang aan en dit is dus belangrijk voor de ranking bij de zoekmotoren.
Dimensions: hier moet het formaat komen van het beeld zoals het op de site zal weergegeven worden. Je laat “Proportional” aangevinkt staan, dan is de hoogte/breedte verhouding steeds gelijk. In één van de rechthoekjes een waarde invullen, bv. 200 à 400. Dit zijn pixels en omwille van het vinkje “Proportional” past het tweede rechthoekje zichzelf aan. Voor beelden in de artikel-tekst is doorgaans een breedte van 200 à 400 pixels voldoende, tenzij het beeld om een bepaalde reden groter of kleiner moet zijn.
Alignment: dient om het beeld links, rechts of in het midden van de tekst te zetten.
Margin: is de afstand tot de tekst, ca. 10 of 20 px is goed. Equalize aangevinkt laten staan, dan zijn de margins rondom het beeld hetzelfde.
Border: eventueel aanpassen. Andere parameters in dit scherm hoeven niet noodzakelijk aangepast te worden.
Tot slot klikken op “Insert” en dan zie je het resultaat alvast in de bewerkingsmodus. Zo nodig het beeld selecteren en terug op het icoontje klikken van de Image Manager om eventueel verder aan te passen. Dan klikken op “Update” en opnieuw controleren of het goed is.
Ofwel opnieuw beginnen als het resultaat niet voldoende goed is of anders op “Opslaan” klikken en pas dan komt het resultaat tevoorschijn op de live versie van de site. Eventueel de pagina verversen om het resultaat te bekijken.
Dit lijkt misschien een beetje op “Trial and Error”(1) maar na enige oefening gaat dit vlot.
Om een bestaand beeld in je tekst te wijzigen: in de tekst het beeld selecteren (de kleur verandert) en naar de Image-Manager gaan. De werkwijze is identiek behoudens dat je het nieuwe beeld selecteert. De bestandsnaam van het nieuwe beeld moet wel verschillend zijn van het te vervangen beeld!
De editor in Joomla laat dus toe om beelden in de tekst op te nemen, maar steeds gepositioneerd ofwel aan de linkse zijde, de rechtse zijde of centraal. Om meerdere beelden op te nemen, zoals beelden die naast mekaar moeten geplaatst worden, biedt de standaard editor de mogelijkheid om met tabellen te werken, maar dit is niet erg handig.
Hierna 2 alternatieve methodes om beelden horizontaal naast elkaar te schikken.
Met een fotogalerij
De webmaster dient deze mogelijkheid vooraf te voorzien, vraag dus vooraf na.
De foto’s heb je vooraf bewerkt en klaargezet in een map/submap – zie de handleiding “Bestanden uploaden”. Tip: maak per onderwerp/evenement een aparte map/submap want de plugin van de fotogalerij werkt map-georiënteerd, d.w.z. de beelden moeten in een map en/of submappen geplaatst worden.
In het voorbeeld van de mapstructuur is "images" de root is en "test" een submap met beelden en andere subsubmappen "diversen" - fruit" - "natuur" met andere specifieke beelden. Let bij map- en bestandsnamen op de exacte schrijfwijze. Gebruik bij voorkeur kleine letters, geen speciale tekens en geen blanco's.
Afhankelijk van de gebruikte extensie is er een werkwijze om de fotogalerij te publiceren. Meestal volstaat het om in de tekst op de gewenste plaats een code van de plugin te zetten, vb:
{"gallery"}naam_van_de_map{/gallery}
Deze code gebruikt dan de basisinstellingen in de plugin en toont alle beelden uit deze map/submap. Verwijder wel de beide aanhalingstekens rond het woord gallery in de live-omgeving. De root wordt ingesteld door de webmaster in de plugin en moet dus niet ingegeven worden, enkel dus het pad naar de submap.
Dit stukje code roept de plugin aan die de foto’s uit de map/submap op de website toont met de instellingen die de webmaster heeft ingesteld. Meestal is dit een geordende groep thumbnails (2), en/of met een lightbox (3). De bezoeker kan met het pijltje links en rechts de hele reeks vooruit of achteruit doorlopen.
Hier het voorbeeld met de submap "test", met volgende standaardinstellingen: lightbox=ON, crop=ON (allemaal zelfde formaat dus), formaat thumbs=200x200px, geschikt in raster op de pagina:
{"gallery"}test{/gallery}
En een ander voorbeeld met een subsubfolder "test/diversen", dus met de dezelfde standaardinstellingen
{"gallery"}test/diversen{/gallery}
Horizontaal schikken
De standaardinstellingen van de plugin worden door de webmaster ingesteld in de back-end van de plugin en deze gelden dan elke keer als de plugin wordt aangeroepen. O.a. grootte en schikking van de thumbnails, lightbox, enz.
Het wordt erg gebruiksvriendelijk door de instellingen te overrulen door de betreffende parameters rechtstreeks in de tekst op te nemen. Hier een voorbeeld met de subsubmap "test/natuur": {"gallery" lightbox=none layout=flow maxcount=7}test/natuur{/gallery}
Met HTML/CSS
Hiervoor switchen naar het tabblad Code om de HTML in te geven, de CSS wordt door de webmaster ingesteld.
Voordeel: dit is niet map-georiënteerd, dus de beelden kunnen van diverse mappen komen. Er kan een alt-beschrijving ingegeven worden en een subtitel.
Nadeel: de CSS kan niet in de front-end beheerd worden. Het volledige pad moet ingegeven worden. Onderaan verschijnen in de editor ook de betreffende beelden, maar in de front-end worden ze netjes geschikt over de breedte van de pagina.
In onderstaande HTML moet de begin- en eindtag (groen gekleurd) steeds aanwezig zijn en per beeld kan de code in de blauwe kleur gekopieerd worden, enkel de vetgedrukte tekst is aan te passen.
Voorbeeld:
<div class="row">
<div class="column">
<figure><img src="/images/test/fruit/fruit_101.jpg" alt="Sinaasappel" style="width: 100%;" />
<figcaption>Lekker !</figcaption>
</figure>
</div>
<div class="column">
<figure><img src="/images/test/fruit/fruit_104.jpg" alt="Kersen" style="width: 100%;" />
<figcaption>Lekkere kersen</figcaption>
</figure>
</div>
<div class="column">
<figure><img src="/images/test/diversen/diversen_105.jpg" alt="Landkaart" style="width: 100%;" />
<figcaption>De weg kwijt ?</figcaption>
</figure>
</div>
<div class="column">
<figure><img src="/images/test/diversen/diversen_111.jpg" alt="Schrijfmachine" style="width: 100%;" />
<figcaption>Lang vervlogen tijden</figcaption>
</figure>
</div>
<div class="column">
<figure><img src="/images/test/natuur/natuur_123.jpg" alt="Zebra" style="width: 100%;" />
<figcaption>Een zebra</figcaption>
</figure>
</div>
En een tweede reeks:
