Afbeeldingen in WordPress: zo voeg je nieuwe afmetingen toe!

Veel WordPress templates voor blogs leggen de nadruk op de foto’s en afbeeldingen. Als blogger ben je dus genoodzaakt om mooi beeldmateriaal te gebruiken. Een afbeelding aan je blog toevoegen lijkt heel simpel, maar vaak gebruiken bloggers een verkeerde afmeting. Zelf maakte ik een afbeelding altijd precies op maat, maar wat als je over twee jaar een nieuw WordPress template wil gebruiken? Waarschijnlijk moeten dan alle afbeeldingen in je blogposts worden aangepast. In deze blogpost leg ik je uit hoe je extra afmetingen kunt toevoegen en ook waarom dit nodig is!

Let op! Het artikel “Afbeeldingen in WordPress” is voor gevorderde WordPress gebruikers.

Afbeeldingen in WordPress: nieuwe afmetingen toevoegen

Standaard afmetingen in WordPress

Standaard kent WordPress de volgende afmetingen: het origineel, groot, middel en de thumbnail afbeelding. Deze afmetingen kan je wijzigen via Instellingen > Media. Vaak zijn dit niet genoeg afmetingen en moet je alsnog de afbeeldingen op maat maken. Afbeeldingen op maat maken heeft 2 nadelen:

  • Een kleine afbeelding is vaak niet goed zichtbaar op mobiel. Een afbeelding die je naast de tekst plaatst, zal op mobiel te klein worden weergegeven.
  • Wanneer je van template gaat wisselen, wijzigen waarschijnlijk de afmetingen van je afbeeldingen. Vaak kloppen de afmetingen niet en moet je alle afbeeldingen aanpassen.

Daarom is het dus altijd beter om een extra afmeting toe te voegen, zodat je achteraf de originele/grotere foto kan gebruiken.

Voor de volgende twee stappen is het nodig om het functions.php bestand van je template te bewerken. Dit kan in principe via het WordPress dashboard, maar ik raad je aan om dit bestand via FTP te downloaden/bewerken/uploaden. Wanneer je de bestanden via het dashboard bewerkt, kan één simpele fout in je code ervoor zorgen dat je hele website stuk gaat!

Stap 1: een nieuwe afmeting toevoegen

Een nieuwe afmeting voeg je dus toe in het functions.php bestand via FTP. Volg daarvoor de onderstaande stappen!

Plaats de volgende code in het functions.php bestand: add_image_size ( 'unieke_naam', 320, 150, true );

Dit kan je doen in de eerste regel na de “<?php” tag.

Voor elke afmeting moet je een unieke naam invoeren. Het tekstje ‘unieke_naam’ moet je dus nog vervangen. De waarden 320 en 150 staan voor de breedte en hoogte in pixels en “true” geeft aan of je de afbeelding op deze afmeting wil bijsnijden. Je code ziet er dan bijvoorbeeld zo uit: add_image_size ( 'afbeelding750', 750, 350, true );

Let op! Je kan ook de geavanceerde “crop” instelling gebruiken. Daarvoor verwijs ik je naar de developer handleiding.

Heb je deze functie aan je functions.php bestand toegevoegd, dan zal er elke keer wanneer er een nieuwe foto wordt geüpload, ook een versie met de nieuwe afmeting worden aangemaakt. Let op! Oude afbeeldingen hebben deze afmeting nog niet, (daarvoor kan je de regenerate thumbnails plugin voor gebruiken).

De volgende stap zal ervoor zorgen dat je de afbeelding makkelijk kunt toevoegen aan je blogpost.

Stap 2: De afmeting toevoegen aan de Mediabibliotheek

Om de afmeting binnen de WordPress mediabibliotheek te kunnen gebruiken is het belangrijk om de volgende code in het functions.php bestand te plakken onder het vorige stukje code:

Deze filter functie zorgt ervoor dat de afmeting in het keuze menu verschijnt. Wanneer je in de vorige stap meerdere afmetingen hebt gedefinieerd, is het nodig om extra array elementen toe te voegen. Voor meerdere afmetingen moet je de volgende regel dus kopiëren: ‘unieke_naam’ => ‘Afm. voor blogpost’,

Op de plek “unieke_naam” vul je de naam in die je bij stap 1 hebt ingevuld en het item ”afm. voor blogpost” is de naam voor de afmeting die in je mediabibliotheek moet verschijnen.

Bijvoorbeeld:  'afbeelding750' => 'Afb. 750 pixels',

Beide functies lijken misschien iets ingewikkeld, zeker als je nog niet zo vaak je template bestanden hebt aangepast. Daarom raad ik je aan om de functie eerst uit te proberen in een test locatie. Succes!

Als je nog vragen hebt, stel ze dan in de comments!

Geef een reactie