Je vindt me ook op

Afbeeldingen in WordPress post

Soms zie je een kleine maar noodzakelijke aanpassing over het hoofd. 'Finetunen' is soms geen overbodige luxe, en zet de noodzakelijke puntjes op de i. Bijvoorbeeld bij het plaatsen van een afbeelding in een WordPress blogpost.

Afbeeldingen in WordPress post

Het probleem van de aanklikbare afbeelding: Link naar…

De aanleiding om hier het vergrootglas te leggen op het plaatsen van een afbeelding in een WordPress-post is dat ik regelmatig een aanklikbare afbeelding in een tekst tegenkom, waarbij het klikken op de afbeelding niets toevoegt of, erger nog, alleen maar een voor de lezer ongewenst en irritant effect heeft. Ik bespreek

  • hoe je dit kan omzeilen en het ongewenste effect heel eenvoudig kan voorkomen;
  • wanneer de aanklikbare afbeelding wél zinvol is, en hoe je het op een aantrekkelijke manier presenteert.

Ik eindig met enkele illustraties van basis-tips wat betreft de uitlijning van afbeeldingen.

In het gemak waarmee je een tekst kan verrijken met afbeeldingen schuilt soms een risico. Soms zie je een kleine maar noodzakelijke aanpassing over het hoofd. ‘Finetunen’ is soms geen overbodige luxe, en zet de noodzakelijke puntjes op de i. Een voorbeeld daarvan is het plaatsen van een afbeelding in een blogpost of in een pagina.

Standaardprocedure

Vaak zul je als volgt te werk gaan, drie eenvoudige stappen, klaar is Kees:

media_toevoegen_1

Klik op ‘Media toevoegen’; dit brengt je in de Mediabibliotheek; we gaan er hier even vanuit dat je de afbeelding nog moet uploaden omdat die nog niet in de bibliotheek staat.

media_toevoegen_2
Klik dus op ‘Bestanden uploaden’ (één is vaak genoeg, maar je kunt hier meerdere bestanden tegelijk selecteren).
afbeelding gemarkeerd
Na het uploaden staat de gekozen afbeelding in de mediabibliotheek en is gemarkeerd.

mediabibliotheek_2_opties

We negeren voor het gemak de verschillende opties en kiezen direct voor ‘Invoegen in bericht’ (knop rechtsonder in het Media-scherm) knop_invoegen_in_bericht

WordPress maakt vaak standaard een afbeelding aanklikbaar

Het gebeurt in veel WordPress-posts: je ziet een afbeelding die aanklikbaar is, je bent geneigd erop te klikken, en zodra je dat gedaan hebt ben je uit het eigenlijke verhaal weggerukt en zie je een nieuw venster voor je (vaak in plaats van het venster waar je vandaan kwam). De klik-actie heeft niets toegevoegd, integendeel…

Hieronder wordt het geïllustreerd:

ibook_store_150

FOUT: afbeelding is aanklikbaar

  • de ingevoegde afbeelding is aanklikbaar;
  • de link is een link naar de afbeelding zelf;
  • je zit in een nieuw browservenster met enkel de afbeelding erin, identiek aan de oorspronkelijke afbeelding; je moet weer terug bij de tekst zien te komen

Verderop bespreek ik wanneer zo’n link wél zinvol is. Eerst wijs ik erop hoe je dit probleem eenvoudig kunt verhelpen.

Je kunt deze ongewenste link op twee plaatsen verbreken:

instellingen

  • in de mediabibliotheek voordat je klikt op ‘Invoegen in bericht’. Verander achter ‘Link naar’ de defaultwaarde ‘Mediabestand’ in ‘Geen’ en klik dan pas op ‘Invoegen in bericht’

Als de afbeelding-mét-link al ingevoegd is kun je deze instelling altijd nog wijzigen in de kenmerken van de afbeelding:

afbeelding_bewerken_0

  • Klik in de editor op de afbeelding; de getoonde icoontjes verschijnen op de afbeelding;
  • Klik op het linkse van de twee icoontjes, dan kun je alle gewenste wijzigingen aanbrengen via het scherm ‘Afbeelding bewerken’ (met het rechtse icoontje verwijder je de afbeelding)
Afbeelding bewerken

afbeelding_bewerken_1

  • Klik achter ‘Link URL’ op de knop ‘Geen’; dan wordt ‘Huidige link’ (naar afbeelding in nieuw venster) verbroken.

Wanneer is ‘Link naar afbeelding’ wél zinvol?

Deze default-instelling ‘Link naar afbeelding’ is er natuurlijk niet voor niks; een link naar een afbeelding kan meerwaarde hebben, bijvoorbeeld:

  • je wil een afbeelding verkleind / niet te groot in je blogpost plaatsen;
  • maar je wil de afbeelding ook in z’n volle glorie kunnen tonen;
  • je wil een grafiek tonen, die verkleind weliswaar een tendens duidelijk laat zien, maar waarvan de details pas duidelijk worden in een vergrote weergave;
  • je wil een foto van een persoon die je in pasfoto-formaat in je post toont, ook in een vergrote weergave tonen;
  • een ‘infographic’ wordt vaak nauwelijks lees- en interpreteerbaar weergegeven; pas bij een vergrote weergave komt die tot zijn recht.

Stel: ik wil een grafiek laten zien, maar vanwege de ruimte of layout plaats ik die links, met een korte tekst erbij, rechts van de afbeelding:

merkvertrouwen_1De invloed van negatieve productgerelateerde tweets op merkvertrouwen: als een deskundige de tweet plaatst is het negatieve effect op merkvertrouwen significant sterker dan wanneer een niet-deskundige dezelfde tweet plaatst. (Klik op het grafiekje voor een vergroting).

In dit soort situaties is het dus wél zinvol en zelfs gewenst dat er een ‘Link naar afbeelding’ is. De afbeelding wordt getoond in een nieuw venster (dat de lezer weer moet sluiten na hetbekijken van de grafiek), of in hetzelfde browser-venster (dan moet de lezer de [terug]-knop van z’n browser gebruiken). Je ziet dat het dan altijd gaat om een vergrote weergave; want waarom zou je de afbeelding via een link naar een nieuw browservenster/-tab in identieke afmetingen willen tonen? Ga dus als volgt te werk:

  • upload (zoals in het begin werd beschreven) de afbeelding met de afmetingen die je in de grote weergave wil kunnen tonen (groter hoeft niet en vergt onnodig extra laadtijd);
  • zorg ervoor dat de afbeelding in beperkte omvang wordt weergegeven in je blogpost, maar dat bij het erop klikken de grote versie verschijnt;
  • dat kan alleen als ‘Link naar afbeelding’ in tact blijft (default-instelling van WordPress, zoals we inmiddels weten);
  • de afbeelding moet substantieel kleiner worden weergegeven in je blogpost, anders heeft vergroting weinig zin.

Bovenstaande stappen zijn eenvoudig. Nu willen we de afbeelding verkleind in de blogpost krijgen:

  • als de afbeelding in de editor staat is kun je erop klikken en via het linker icoontje het scherm ‘Afbeelding bewerken’ zichtbaar maken:
    afbeelding_bewerken_0
  • Aan de linkerkant zie je een percentage-schaal:

afbeelding_bewerken_1

  • klik in de afmetingen-schaal 1 x op bijvoorbeeld 60%, en klik op ‘Bijwerken’;
    Als de afbeelding nog niet klein genoeg is, open je opnieuw het scherm ‘Afbeelding bewerken’; je zult zien dat de schaal dan op 100% staat: dat is ‘de nieuwe 100%’, ná de eerste verkleining tot 60%.
  • klik nu op bijvoorbeeld 70%. Dan is de 60%-afbeelding verder verkleind tot 70% dáárvan;
  • controleer of de afbeelding nog steeds ‘Link naar afbeelding’ heeft;
  • klik weer op ‘Bijwerken’, en de afbeelding staat weer wat kleiner in je blogpost;
  • controleer in ‘Voorbeeld’ (of in de gepubliceerde blogpost) of de werking is zoals bedoeld: bij klikken verschijnt de afbeelding vergroot in een nieuw (of in hetzelfde) venster of tab.

Het probleem van het nieuwe browservenster / -tab met enkel de afbeelding erin bestaat nog steeds: de lezer moet weer terug bij de tekst zien te komen.

De laatste stap: vergrote afbeelding niet in nieuw venster of tab, maar in Lightbox

Om te voorkomen dat de lezer bij de grote versie van de afbeelding in een nieuw venster terechtkomt moet je de vergrote afbeelding in een zogenaamde Lightbox laten verschijnen; dat wordt hier geïllustreerd:

merkvertrouwen_1De invloed van negatieve productgerelateerde tweets op merkvertrouwen: als een deskundige de tweet plaatst is het negatieve effect op merkvertrouwen significant sterker dan wanneer een niet-deskundige dezelfde tweet plaatst. (Klik op het grafiekje voor een vergroting).

  • Eenvoudige WordPress-thema’s (zoals de standaard meegeleverde thema’s ‘2011’ en ‘2012’) hebben geen Lightbox-functionaliteit. Je krijgt die functionaliteit door bijvoorbeeld de plugin Lightbox Plus te installeren [1];
  • ‘Premium’-thema’s hebben vaak zo’n Lightbox-functionaliteit al ingebouwd en als die naar wens functioneert hoef je geen plugin te installeren.
Afbeelding in een Lightbox laten verschijnen
  • Roep weer het scherm ‘Afbeelding bewerken’ op, maar klik nu op de rechtse tab: ‘Geavanceerde instellingen’:

advanced_setttings_3

  • Vul bijna onderaan, achter ‘Link relatie’ in: lightbox (als je de plugin Lightbox Plus hebt geïnstalleerd);
    of de code die het thema met ingebouwde Lightbox functionaliteit voorschrijft; soms is dat ‘prettyphoto’.
  • Let op: wat hierboven achter ‘Titel’ is ingevuld, is het onderschrift in de vergrote Lightbox-versie van de afbeelding (wat in het linkse tabblad is ingevuld achter ‘Onderschrift’ is het onderschrift in de verkleinde versie);
  • Klik op de afbeelding hieronder om het resultaat te zien:
ibook_store_500

Bij klikken: afbeelding opent in Lightbox

  • in de blogpost verschijnt de afbeelding verkleind (hier ca. 34% van het geüploade origineel);
  • in Lightbox verschijnt de afbeelding in originele grootte (500 px breed).
Conclusie wat betreft het probleem van de aanklikbare afbeelding
  • als het voor de geplaatste afbeelding niet nodig is, verbreek dan de ‘Link naar afbeelding’ die WordPress standaard aanbrengt;
  • als je wilt linken naar een groter formaat, handhaaf dan ‘Link naar afbeelding’, maar zorg ervoor dat de vergrote versie van de afbeelding niet in een nieuw venster of tab geopend wordt;
  • gebruik daarvoor Lightbox-functionaliteit;
  • bedenk dat dit alleen zinvol is bij een substantieel verschil tussen de afmetingen van de afbeelding in de blogpost en de gewenste afmetingen na klikken op de afbeelding.

Overige afbeeldings-instellingen

Voor de volledigheid staan hieronder voorbeelden van andere afbeeldingsinstellingen

    • Afmeting
      de afbeelding wordt standaard geplaatst in originele grootte; gebruik voor verkleinen een percentage op de verkleiningsschaal (zie hierboven).
    • Uitlijning = ‘geen’ de afbeelding wordt links in je tekst geplaatst:

ibook_store_150Bij uitlijning = ‘geen’ wordt afbeelding tegen de linker kantlijn geplaatst, maar er wordt nog één tekstregel naast de afbeelding gebruikt; zodra die ene regel de ruimte heeft opgevuld, krult de tekst naar links en onder de afbeelding. Meestal is dit lelijk, en je lost dit gemakkelijk op door direct na de afbeelding met <enter> een harde return toe te voegen; het resultaat is:

ibook_store_150 
Bij uitlijning = ‘geen’ wordt de afbeelding tegen de linker kantlijn geplaatst; na een <enter> heb je een harde return toegevoegd; feitelijk ben je een nieuwe alinea gestart en is de alinea erboven gevuld met alleen maar de afbeelding.

    • Uitlijning = ‘Links’
      ibook_store_150Uiteraard wordt ook hier de afbeelding tegen de linker kantlijn geplaatst. Ook hier wordt de ruimte rechts van de afbeelding benut, maar niet met slechts één regel zoals bij ‘uitlijning = geen’, maar de hele ruimte rechts van de afbeelding wordt benut.

Je kunt eventueel een nieuwe regel beginnen, en pas nadat de tekst de ruimte rechts heeft opgevuld zal de tekst links en onder de afbeelding doorlopen. Dat is hier geïllustreerd. Als het goed is zorgen de stijl-instellingen van het WordPress-thema dat je gebruikt voor voldoende wit-marge, zowel rechts van de afbeelding als eronder. Het spreekt voor zich dat deze uitlijning niet geschikt is voor brede afbeeldingen waarbij er rechts weinig ruimte overblijft waarin nog wat tekst gefrommeld wordt.

  • Uitlijning = ‘Rechts’
    Zoals bij ‘uitlijning = links’, maar afbeelding en tekst zijn links / rechts gespiegeld.
  • Uitlijning = ‘Gecentreerd’
    ibook_store_150Bij ‘uitlijning = Gecentreerd’ wordt de witruimte links en rechts van de afbeelding niet gebruikt. De tekst begint automatisch onder de afbeelding. Als het goed is zorgen de stijl-instellingen van het WordPress-thema dat je gebruikt voor voldoende wit-marge tussen de afbeelding en de tekst.
    Het spreekt voor zich dat deze uitlijning bij een brede afbeelding het mooiste is, maar ook bij een kleine afbeelding zoals hierboven kan dit een mooi resultaat zijn.
Samengevat
  • Bij een relatief brede afbeelding:
  • ‘uitlijning = geen’ om de afbeelding tegen de linker kantlijn uit te lijnen, maar begin de tekst dan pas onder de afbeelding; of
  • ‘uitlijning = gecentreerd’
  • Bij een smalle afbeelding:
  • willekeurig welke uitlijning; maar voorkom bij ‘uitlijning = geen’ dat er eerst één regel naast de afbeelding terechtkomt.

Verwijzing

Je kan naar dit artikel verwijzen op sociale netwerken:
About Author

Rob le PairDocent - onderzoeker Radboud Universiteit Nijmegen; favoriete thema's op deze site: Persuasive communication, Eindhoven-Philipsdorp, WordPress-design, gebruik van sociale media, running experiences, gardening.View all posts by Rob le Pair →

  1. Charles
    Charles22 maart 2013

    Hoi,

    De artikelen die u schrijft zijn erg interessant. Daarbij zie ik dat u les geeft op RU in Nijmegen.
    Is het mogelijk om een keer een hoorcollege van u te volgen?

    Uw blog blijf ik inieder geval wel volgen.

    Groet,
    Charles

    • Rob le Pair
      Rob le Pair22 maart 2013

      Dag Charles,
      Dank voor je enthousiaste reactie…
      Ik geef de komende maanden geen hoorcollege, dus dat zou dan nog even duren.

  2. Wim ter Haar
    Wim ter Haar19 oktober 2015

    Hallo Rob,

    Ik heb alles van je tips uitgevoerd, maar ik zie maar 1 regel naast het plaatje.
    Wat ik ook wijzigt zie ik geen goed resultaat.
    Ligt dit aan de versie van wordpress 4.3?

    groet

    Wim

    • Rob le Pair
      Rob le Pair19 oktober 2015

      Dag Wim,
      Je bedoelt denk ik dat je gekozen hebt voor uitlijning: ‘geen’ waardoor afbeelding tegen linkerkantlijn staat, met nog één regel rechts naast de afbeelding, aan de onderkant daarvan. Ik ken daar maar één oplossing voor die ik noemde: enter / harde return direct na het plaatje, dus vóór de tekst die direct na het plaatje komt (anders heeft die harde return geen effect op de tekst die direct na het plaatje begint).
      Succes, groeten,

      Rob

  3. Pattel
    Pattel21 april 2016

    Het komt gek genoeg vaak voor dat men linkt naar de locatie van de afbeelding. Zonde, want dan is de kans groot de bezoeker de website verlaat.

Leave a Reply