JCE Editor - een afbeelding invoegen

Gegevens

Categorie: JCE Editor

Een afbeelding invoegen met de JCE Editor verschilt een beetje met de standaard Joomla afbeelding functie. Daarbij biedt JCE Editor ook meer mogelijkheden om de afbeeldingen te beheren en te wijzigen.

Voor je begint met het invoegen van de afbeelding dien je het plaatje 'gebruikersklaar' te hebben. De naam van de afbeelding mag geen spaties of speciale tekens bevatten. Bestaat de bestandsnaam uit meerdere woorden, kun je de woorden het beste koppelen met het koppelteken (-). Browsers kunnen niet zo goed overweg met spaties en speciale tekens (zeker het en-symbooltje &) kunnen door de browser anders geïnterpreteerd worden.

De afbeelding moet ook niet te groot zijn. Zeker als het enkel ter illustratie is. Van herschalen wordt de afbeelding nogal vervormd. Lees meer over de juiste afmetingen van een website afbeelding.

Ga met de cursus in de tekst staat op de plaats waar de afbeelding moet komen en klik op 'Insert/edit image'.

Na het klikken op Invoegen/Bewerken afbeelding (insert/edit image) verschijnt er een dialoog venster. Het venster is grofweg verdeeld in twee helften. De bovenste helft geeft de gegevens en eigenschappen weer van hoe de afbeelding in het artikel moet worden ingevoegd (blauw). Dit deel is weer verdeeld over drie tabbladen: Afbeelding, Rollover en Uitgebreid

De onderste helft is de browser waarmee u de afbeelding kunt zoeken op uw webserver en eventueel kunt uploaden naar een te kiezen folder. (rood)

Eenvoudig gezegd kun je in het onderste deel navigeren door de images-folder van de website en een afbeelding selecteren. Wanneer je een afbeelding wilt gebruiken, klik je daarop in het middelste vak van het onderste deel. De bestandsnaam met het juiste pad wordt in het URL veld weergegeven. De bestandsnaam wordt automatisch gebruikt als Alt-tag. Je bent uiteraard vrij om dit naar eigen inzicht te wijzigen. Hierbij zijn spaties en speciale tekens zeker toegestaan.
Door nu onderaan op de knop 'invoegen' te klikken, wordt de afbeelding in het artikel gevoegd.

Navigeren en selecteren

In het onderste deel van de Image Manager kun je door de Afbeeldingen-map van de Joomla website navigeren (/images). In het linkerdeel zie je de mappenstructuur. Het middelste deel geeft de inhoud van de geselecteerde map weer. In het rechter deel worden de details en een thumbnail van een geselecteerde afbeelding getoond. Wanneer een afbeelding is geselecteerd, verschijnen er rechts naast het voorbeeld enkele knopjes. Met deze knopjes kun je de afbeeldingen in de mappen beheren. Het hangt af van je gebruikersrechten wat je allemaal kan doen. Enkele opties zijn: bestandsnaam wijzigen, verwijderen, afbeelding kopiëren, knippen en een groter formaat als voorbeeld weergeven.

Voordat een afbeelding geüpload wordt, dien je eerst in de map te gaan staan waar je de afbeelding wilt hebben. Dat kun je dus doen met het onderste deel van het Afbeeldingsbeheer venster.

Afbeelding uploaden

In de meeste gevallen zal er eerst een plaatje geupload moeten worden. De JCE Image Manager beschikt ook over upload gereedschap. Rechts boven in het browse gedeelte van het venster staan drie knopjes: Nieuwe folder, Uploaden en Help.

Klik op het middelste knopje 'Upload'. Een nieuw venster verschijnt. Bovenaan klik je op de knop 'Voeg toe'. Via de verkenner kun je nu een afbeelding op je eigen computer selecteren. Dubbelklik op uw gekozen afbeelding of druk op 'openen'. De afbeelding is toegevoegd in het 'Upload'-venstertje. Wil je meer afbeelding uploaden, kun je de laatste handeling herhalen. Als je de juiste afbeeldingen in het lijstje hebt, klik je op de knop 'Upload' onder in het venster. Er verschijnt een groen vinkje als de afbeelding succesvol is geüpload. Wanneer je met uploaden klaar bent, klik je op 'Sluiten'.

Afbeelding invoegen

Nadat je een afbeelding hebt ingevoegd, geeft JCE editor het vet weer in de bestandslijst. Door op de bestandsnaam te klikken, wordt de afbeelding met het juiste pad in het url veld weergegeven.

De afbeelding uitlijnen in de tekst.

Het heeft wat oefening nodig om het plaatje zo in de tekst te zetten zoals u dat graag ziet. In de regel wordt een afbeelding links of rechts in de tekst gezet zodat de tekst er langs kan lopen.

Zet de cursor aan het begin van een alinea en klik op afbeelding invoegen. Na het selecteren van een afbeelding kies in het drop-down menu bij 'Uitlijning' een positie. In de praktijk is dat links of rechts. De tekst zit nu tegen de afbeelding geplakt. Mooier is een beetje marge tussen het plaatje en de tekst. Geef bij 'Marge' aan hoeveel ruimte er moet zijn tussen de afbeelding en de tekst. Door de checkbox 'Gelijke' uit te vinken, is het mogelijk om in ieder positie (top, right, bottom, left) een andere waarde te geven. Als het plaatje bijvoorbeeld recht uitgelijnd wordt aan het begin van de alinea, kun je 'boven' en 'rechts' op 0 zetten en 'onder' en 'links' op 10 of 15. De waarden voor de marges worden in pixels uitgedrukt.

Uitgebreid

In het tabblad 'Uitgebreid' kunt u de afbeelding enkele css-stijlen meegeven en een title-attribute. De title wordt weergegeven in de tooltip, het gele kadertje, wanneer de bezoeker met de muis over de afbeelding gaat. Bij Internet Explorer wordt de alt-text al standaard zo weergegeven. Voor zoekmachine optimalisatie is het aan te raden om ook hier een goede beschrijving van de afbeelding met enkele sleutelwoorden in te voeren.