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:
add_filter( 'image_size_names_choose', 'fws_custom_sizes' );
function fws_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'unieke_naam' => 'Label voor deze afmeting',
// plaats hier extra waarden voor meer afmetingen
) );
}
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!
