Foto aanklikbaar maken

Foto’s zijn erg nuttig als het erop aankomt je blog aan te kleden en kleur te geven. Daarmee vertel ik niks nieuws. Wil je zo’n foto aanklikbaar maken, dan kan dat vrij eenvoudig.

Afbeelding, banner of foto aanklikbaar maken?

Omdat foto’s nu eenmaal beter in het oog springen dan simpele tekstlinks, kan het erg nuttig zijn een hyperlink te “verstoppen” achter een afbeelding. Wanneer de bezoeker van je blog dan op de bewuste afbeelding klikt, wordt ‘ie onmiddellijk naar de een bepaalde webpagina gebracht. En die pagina kan zowel binnen als buiten je eigen blog liggen.

In oudere versies van WordPress was het niet zo simpel om een foto of banner aanklikbaar te maken. Maar sinds de nieuwe blokeditor is dit eigenlijk een eenvoudig karwei:

  • Kies het blok Afbeelding
  • Selecteer een plaatje uit je mediabibliotheek of voeg de url van een afbeelding in
  • Klik in je artikel de foto aan waar je een link wil aan koppelen
  • Selecteer Link invoegen en plak de link in het daartoe bestemde venster

Eventueel kan je ervoor kiezen om de betreffende link in een nieuw tabblad te laten openen.

Foto aanklikbaar maken: een stukje HTML-code

<a href=”http://te linken pagina/”><img src =”http://internetadres van de foto”></a>

Voor de duidelijkheid: de te linken pagina is de pagina waar je bezoeker naartoe wordt gestuurd wanneer hij op de foto klikt. Het internetadres van de foto duidt uiteraard op het adres (de url) van de foto die je gebruikt.

Even een praktijkvoorbeeld. Ik geef een stukje  code mee en onmiddellijk daaronder hetgeen je bezoeker aan de voorkant van je blog te zien krijgt.

<a href=”http://justhost.nl/?blogtrommel”><img src =”https://www.blogtrommel.com/wp-content/uploads/2015/12/logo_justhost.png”></a>

Klik de banner aan en je komt op Justhost.nl uit, het bedrijf dat nu al een aantal jaren mijn blog host.

Je kan een principe achter elk plaatje een hyperlink verstoppen. Voorwaarde is natuurlijk wel dat je plaatje ergens op het net te vinden is. In de praktijk zit het vaak in de media-bibliotheek van je blog, maar eigenlijk hoeft dat dus zelfs niet.

Bij dit voorbeeld heb ik een aanklikbare afbeelding op een pagina geïntegreerd, maar het kan ook in een blogbericht natuurlijk. Wil je een foto met hyperlink in de sidebar van je blog, dan kan je exact hetzelfde codefragment in een leeg HTML-tekst widget plakken.