‘Uitgelichte afbeeldingen’, ook wel ‘Post thumbnails’ genoemd is een veelgebruikte feature in WordPress thema’s. Dit zijn de hoofdafbeeldingen die getoond worden bij bijvoorbeeld blogposts. Ieder thema dat afbeeldingen gebruikt, heeft die functionaliteit standaard in zich. In dit artikel leg ik je uit hoe je extra afbeeldingsformaten toevoegt aan WordsPress.

Uitgelichte afbeelding ondersteuning van je thema checken

Om extra afbeeldingsformaten toe te kunnen voegen moet je eerst te weten komen of je thema uitgelichte afbeeldingen ondersteunt. Dit kan je eenvoudig checken door bijvoorbeeld een nieuwe blogpost aan te maken (Ga naar Berichten > Nieuw bericht, en als je rechts onderin de meta box ‘Uitgelichte afbeelding’ ziet staan, dan ondersteunt jouw thema uitgelichte afbeeldingen.

De 'Uitgelichte afbeelding' metabox in Gutenberg
De ‘Uitgelichte afbeelding’ metabox in Gutenberg
De 'Uitgelichte afbeelding' metabox in de klassieke editor
De ‘Uitgelichte afbeelding’ metabox in de klassieke editor

Uitgelichte afbeelding ondersteuning aan je thema toevoegen

Als je één van deze metaboxes niet ziet, dan kan je deze functionaliteit zelf toevoegen voor posts en pagina’s door onderstaande regel code te kopiëren en plakken in het functions.php bestand van je (child)thema, of in een site-specifieke plugin.

Lees hier hoe je code snippets op de juiste manier toevoegt aan je website.
Lees hier hoe je een site specifieke plugin maakt.

add_theme_support( 'post-thumbnails' );

Uitgelichte afbeeldingen toevoegen aan je pagina templates

De uitgelichte afbeeldingen worden nu nog niet vanzelf getoond in je thema. Dit kan je doen door onderstaande regel code te kopiëren en te plakken in de pagina-template bestanden waar je deze afbeelding wilt tonen. De plek kan per WordPress thema verschillen. Bij veel WordPress thema’s is dit bijvoorbeeld het content.php bestand wanneer je de uitgelichte afbeeldingen op de home- en/of archiefpagina’s wilt tonen, en content-single.php wanneer je deze op de single post pagina’s wilt tonen.

<?php the_post_thumbnail(); ?>

Om de afmetingen van de uitgelichte afbeeldingen te bepalen dien je onderstaande regel code toe te voegen onder de regel add_theme_support( 'post-thumbnails' );

set_post_thumbnail_size( 70, 50 );

De parameters 70, 50 voor set_post_thumbnail_size geven de breedte en de hoogte (in die volgorde) aan voor de afbeelding. In dit voorbeeld zijn de uitgelichte afbeeldingen dus 70 pixels breed, en 50 pixels hoog.

Extra afbeeldingsformaten toevoegen

Je kan ook extra afbeeldingsformaten voor de uitgelichte afbeelding toevoegen aan je thema. Dit is bijvoorbeeld handig wanneer je op de single post pagina een grotere afbeelding wil tonen dan de afbeelding die op de home- en/of archiefpagina’s wordt getoond.

Je kan een extra afbeeldingsformaat aan je thema toevoegen met onderstaande regel code.

// Image size for single posts
add_image_size( 'single-post-thumbnail', 600, 400, true );

De parameter 'single-post-thumbnail' kan je elke waarde geven die je wil, zolang je zelf maar makkelijk kan onthouden waarvoor dit afbeeldingsformaat wordt aangemaakt. In dit geval maken we dus een extra afbeeldingsformaat aan welke getoond wordt op de single post pagina’s. Deze afbeelding is 600 pixels breed en 400 pixels hoog.

Hard crop mode

De derde parameter true geeft aan dat de afbeelding hard moet worden bijgesneden (‘hard crop mode’). Je hebt dan dus kans dat er delen van de afbeelding wegvallen.

Soft crop mode

Laat je de parameter true weg (denk dan ook aan de , er voor) dan wordt de afbeelding proportioneel geschaald weergegeven (‘soft crop mode’). Je krijgt dan misschien niet het gewenste resultaat, en afhankelijk van de formaten van de afbeeldingen die je upload kunnen de afmetingen per afbeelding uiteindelijk verschillen.

Unlimited height mode

Wanneer je bijvoorbeeld hele lange afbeeldingen wil tonen zoals infographics, en de breedte, maar niet de hoogte van de afbeelding wilt beperken, dan kan je voor de hoogte parameter het getal 9999 gebruiken.

// Unlimited height for for single posts image
add_image_size( 'single-post-thumbnail', 600, 9999 );

Extra formaat uitgelichte afbeeldingen toevoegen aan je pagina templates

Voeg onderstaande code toe aan de pagina template waar jij wilt dat deze afbeelding verschijnt. Dat kan in dit geval dus zijn in de template content-single.php. Dit is ook weer afhankelijk van je thema.

<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

Beoordeel deze post:

Gemiddeld: 0 / 5. Aantal beoordelingen: 0

Nog geen beoordelingen

Whoops! 😔

Zou je ons willen laten weten hoe we (deze post) kunnen verbeteren?

Reacties

2 reacties op "Extra afbeeldingsformaten toevoegen in WordPress"

  1. Hi there would you mind letting me know which webhost you’re utilizing? I’ve loaded your blog in 3 different web browsers and I must say this blog loads a lot quicker then most. Can you suggest a good web hosting provider at a honest price? Thanks a lot, I appreciate it! kcddggdaedef

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.