4.3 Afbeelding toevoegen
Vaak wil je een tekst aan kleden met één of meer afbeeldingen. Daarvoor zijn verschillende opties.
Vaak wil je een tekst aan kleden met één of meer afbeeldingen. Daarvoor zijn verschillende opties.
Optie 1 - voor als je 1 afbeelding bij je artikel wil
Op het tabblad Afbeeldingen en links kunnen afbeeldingen voor bij de introtekst en het hele artikel worden gekozen (deze kunnen eventueel ook in de tekst zelf worden geplaatst, maar door ze hier te plaatsen kunnen ze ook op andere plekken weer gebruikt worden (bijvoorbeeld in een module die de titel, intro-afbeelding en introductietekst van de 3 laatste artikelen laat zien op de homepage). Daarnaast kunnen hier de standaard linkposities A, B en C ingevuld worden. Het is afhankelijk van de template of en hoe deze worden gebruikt.

Afbeelding: tabblad Afbeeldingen en links
Optie 2 - voor als je meer afbeeldingen bij je artikel wil
Om een of meer extra afbeelding in de tekst te plaatsen zet je de cursor voor aan de regel waar je de afbeelding wilt hebben en je klikt op het knopje Insert image
om de image manager te openen. Je kan ook rechts klikken in het tekstveld op de plek waar je het plaatjes wilt hebben en dan kiezen voor Insert image.

Afbeelding 12: Image manager
Ook dit scherm is weer opgedeeld in een aantal onderdelen. Bovenin zie je een aantal tabbladen met daaronder een valk met eigenschappen en een voorbeeld.
Daaronder is de bestands browser hiermee kun je door de afbeeldingbestanden bladeren die op de server staan en die je dus kan gebruiken in je artikel.
Dit onderdeel bestaat uit 3 kolommen: de linker kolom laat je de mappenstructuur zien. In de middelste kolom zie je de inhoud van de map die op dit moment geopend is en in de rechter kolom zie je de details inclusief een afbeelding van het geselecteerde plaatje.
Om een plaatje in de tekst te plaatsen klik je de afbeelding aan in de middelste kolom (klik op de naam van het bestand). Je ziet nu een aantal dingen gebeuren:

Afbeelding 13: Afbeelding is geselecteerd en de properties zijn ingevuld
Je ziet dat boven aan het scherm de eigenschappen zijn ingevuld.
Bij URL staat de technische locatie van de afbeelding (laten staan dus).
Bij Alternate Text staat de bestandsnaam ingevuld. Deze kun je aanpassen. Dit is een veel gevallen verstandig omdat deze tekst niet alleen door zoekmachines, maar ook door computers voor slechtziende worden gebruikt om te bepalen wat er op het plaatje te zien is. Een omschrijving is hier dus op zijn plaats.
Geef een afbeelding altijd een relevante alternate text. Dit is goed voor je vindbaarheid en voor mensen met een visuele beperking.
Dimensions geeft de afmeting aan van de afbeelding. Je kunt deze handmatig aanpassen, maar zorg er liever voor dat de afbeelding de juiste afmeting heeft. Hierdoor blijft ook alles goed werken op mobiel en tablet. Door het vinkje bij Proportional aan te laten zal het programma automatisch de verhoudingen bewaren als de hoogte of breedte wordt gewijzigd.
Zorg ervoor dat een afbeelding al de juiste afmeting heeft voor je hem uploadt. Te grote afbeeldingen die je kleiner weergeeft slurpen schijfruimte en vertragen de website omdat het hele bestand wel ingeladen moet worden, te kleine afbeeldingen die vergroot worden verliezen aan kwaliteit.
De Alignment bepaalt hoe de afbeelding wordt uitgelijnd in de tekst. In de Preview zie je een globaal voorbeeld van wat de instelling met je plaatje zal doen. Over het algemeen zal je gebruik maken van Default (het plaatje ligt op de lijn van de tekst), Left (plaatjes zweeft links in de tekst) of Right (plaatje zweeft rechts in de tekst).
Bij de Margin kun je aangeven hoeveel ruimte er om de afbeelding vrij gehouden moet worden. Als het vinkje bij Equal Values aan staat kun je alleen de ‘top’ waarde opgeven, de rest wordt dan overgenomen. Wil je dit niet, dan vink je de Equal Values uit. Nu kun je alle zijden apart instellen.
Als je ook een randje om je afbeelding wilt kun je die instellen bij Border. Je vinkt het vakje aan om aan te geven dat je een border in wilt stellen. Vervolgens worden de achterliggende velden actief en kun je aangeven hoe breed de border moet zijn, welke stijl hij moet hebben en welke kleur.
Gebruik een licht, subtiel randje als een foto overbelicht is waardoor de foto onzichtbaar over gaat in de achtergrond van de site. Persoonlijk vind ik #CCC een mooie kleur hiervoor.
Ben je klaar met alle instellingen dan klik je onderaan het venster op de knop Insert om de afbeelding in de tekst te zetten.