WordPress Woordenboek

WordPress en Afbeeldingen

Een afbeelding, beeld, foto, zegt meer dan 1000 woorden (Arthur Brisbane – 1911)… dat spreekwoord kennen we allemaal en dat is ook zo…. maar aan het gebruik van afbeeldingen op een website zijn een aantal ‘regels’ verbonden die u in het achterhoofd dient te houden bij het maken van een pagina.

‘Regels’ is in deze content een zwaar woord, zie het eerder als aanbeveling; u bent tenslotte baas over uw website en bepaald hoe u die inricht.

Die aanbevelingen zijn:

  • probeer de grootte (in Mb’s) zo klein mogelijk te houden;
  • probeer het aantal afbeeldingen op een pagina te beperken;
  • geef de bestandsnaam een naam die kort (met 1-3 woorden) weergeeft waar de afbeelding over gaat;
  • geef de titel bij het opslaan van het bestand een naam die weergeeft waar de afbeelding over gaat;
  • geef altijd een Alt-tekst op die ook weergeeft waar de afbeelding over gaat.

Hieronder gaan we daar verder op in.

Afbeelding toevoegen

Het gebruik van afbeeldingen binnen pagina’s of berichten werkt identiek en we beperken ons tot pagina’s en om in WordPress terminologie verder te gaan spreken we verder over “Media”. Onze ervaring is dat bij het maken van een pagina de volgende manier het prettigst werkt:

  • eerst de kale, onopgemaakte, tekst;
  • dan de tekst-opmaak (al hoewel die redelijk gelijk kan lopen met het invoeren van de tekst);
  • en als laatste de media invoegen.

Heeft u eenmaal de tekst geplaatst, gaat u met de muiscursor op de plaats staan waar u de afbeelding wilt tonen en klikt dan vervolgens op Media Toevoegen, links boven de editor:

WordPress Media Toevoegen

Media toevoegen

U komt dan op een scherm waar u verschillende mogelijkheden geboden wordt:

WordPress Media toevoegen opties

Media toevoegen – Mogelijkheden

Tabblad “Bestanden uploaden” (1) is actief. Is er al eerder media gebruikt of geupload naar de mediabibliotheek, zal die media zichtbaar zijn in de mediabibliotheek (2) en kunt u die daar direct selecteren. Bij (3), Bestanden selecteren kunt u op uw pc bladeren naar media en die dan uploaden naar de mediabibliotheen en die dan gebruiken in uw content.

Bij (4) hebben we nog een aantal extra opties als een Gallerij (soort van fotoalbum) maken, Audio, Video, Uitgelichte afbeelding en media toevoegen via een URL. We beperken ons hier tot het toevoegen en gebruiken van afbeeldingen (foto’s).

Als u via (3) een bestand op uw pc gevonden heeft en die geupload is, komt u automatisch in het scherm van de mediabibliotheek terecht:

WordPress bijlagedetails

Bijlagedetails

Klikt u simpelweg op In pagina invoegen wordt de afbeelding in uw content geplaatst, maar dan slaat u een cruciale stap over; het invullen van de “bijlagedetails”.

Binnen WordPress wordt media ook wel bijlage genoemd. Dat is niet zo raar, daar de media als link in de content geplaatst wordt. In de editor lijkt het, wanneer we in de “Visueel” mode werken, alsof de media in de content staat. De media wordt opgeslagen in een map op uw webruimte bij de hostingprovider. In de content wordt dan met een link naar die map en de media verwezen.

Dat kunnen we zien (nadat de afbeelding is toegevoegd aan de pagina) door om te schakelen in de editor naar de tekst-mode:

WordPress Media Link tonen

Media Link

Terug naar de “Bijlagedetails”. Het is raadzaam deze altijd in te vullen. Van boven naar beneden:

  • Titel: de titel wordt gebruikt in de mediabibliotheek om snel afbeeldingen terug te zoeken via de zoekfunctie in de mediabibliotheek. Geef met de titel dan een benaming die in 1-2 woorden omschrijft waar de afbeelding over gaat;
  • Onderschrift: dat is de tekst die onder de afbeelding komt te staan zoals bij de afbeelding welke wij hier gebruikt hebben. Het thema moet dat wel ondersteunen;
  • Alt-tekst: “Alt” staat voor “Alternatieve” en is de tekst die verschijnt wanneer de afbeelding verdwenen uit de map waar die oorspronkelijk geplaatst is. Bij de juiste benaming weet u dan welke afbeelding daar had moeten staan. Dat is natuurlijk handig, maar meer belangrijk is dat deze tekst door zoekmachines gebruikt wordt voor de ranking in de zoekresultaten en bij het zoeken naar afbeeldingen op internet. Geef dus de Alt-tekst een duidelijke omschrijving waar de afbeelding over gaat, maar weer zo beknopt mogelijk;
  • Omschrijving: deze wordt verder nergens gebruikt en is puur voor eigen informatie.

Direct onder de bijlagedetails in hetzelfde scherm ziet u “Weergave-Instellingen Bijlagen”. Daar kunt u:

  • Uitlijning kiezen: Links, Gecentreerd of Rechts;
  • Link naar: het mediabestand, een bijlagepagina of naar een URL (een web-link naar keuze); Afhankelijk van het thema zal de link naar het mediabestand in een zgn. lightbox openen of gewoon in de internetbrowser;
  • Afmeting: Thumnail, Gemiddeld, Groot en Volledige grootte.

Alles wat we hebben ingevuld als bijlagedetails en de weergave-instellingen zijn na het invoegen op de pagina achteraf nog aan te passen.

Kiezen we nu, na het invullen van de bijlagedetails, voor In pagina invoegen; zal de afbeelding op de plaats van de cursor worden geplaatst:

WordPress Media ingevoegd op de pagina

Media Ingevoegd

Klikt u nu op de afbeelding heeft u een aantal mogelijkheden:

WordPress Media Aanpassen

Media Aanpassen

Door de witte blokjes te verslepen kunt u de afbeelding (proportioneel) vergroten/verkleinen op de pagina (dit is niet mogelijk in alle thema’s; zo is het bijvoorbeeld niet mogelijk in het WordPress thema Twenty Seventeen wat standaard geïnstalleerd wordt);

De opties boven de afbeelding zijn, van links naar rechts:

  • links uitlijnen;
  • centreren;
  • rechts uitlijnen;
  • geen uitlijning;
  • bijlage details, afmetingen en overige instellingen bewerken (voor een uitgebreide omschrijving aangaande het bewerken verwijzen we naar: de mediabibliotheek);
  • afbeelding verwijderen van de pagina (hiermee wordt de afbeelding niet verwijderd uit de mediabibliotheek).

De wit-marges welke tussen de afbeelding en de tekst gecreëerd worden zijn bepaald (ingesteld) door het thema. Om die wit-marges aan te aan te passen dient u enige  kennis van de opmaaktaal CSS te hebben.

Vragen & Info

Heeft u vragen naar aanleiding van deze uitleg, stuur ons dan een mail op: info@qwain.nl of geef een reactie via onderstaand reactie-formulier.

Ondersteuning staat bij ons op nummer 1, wij zijn u graag van dienst !

Op de hoogte blijven van alle WordPress Nieuwtjes, Tips & Tricks… volg ons dan op Facebook .

 

Interessante Artikelen