Code voorbeeld

Snippet: Meerdere formaten thumbnails in WordPress

Leestijd: 2 minuten (317) words
profile image

Rick de Jong

Strategie

June 29, 2012 07:05

Meerdere formaten thumbnails in WordPress

Één afbeelding, meerdere formaten

Gevorderde gebruikers van WordPress zal het bekend in hun oren klinken: Je hebt meerdere formaten nodig van een post thumbnail. Een specifieke grootte voor homepage, een voor het nieuwsoverzicht en daarna ook nog een voor in het artikel zelf. 

Maar hoe doe je dit zonder een afbeelding met CSS te vervormen én zonder diverse afbeeldingen te hoeven uploaden?

De oplossing

De oplossing is simpeler dan gedacht. Open functions.php en zoek naar de volgende code. Vind je deze code niet in je "functions.php" bestand, voeg deze dan toe.

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true ); // Normale post thumbnail grootte

Het formaat van deze "normale" post thumbnail is 150x150 pixels, dit is vrij aan te passen.

Nieuwe formaten toevoegen

Nu gaan we nieuwe formaten toevoegen, om het simpel te houden homepage en nieuwsoverzicht. Er van uitgaande dat 150x150 voldoende is voor in het artikel zelf. Dit doen we als volgt:

if ( function_exists( 'add_image_size' ) ) { 
  add_image_size( 'homepage-thumb', 200, 150, true); 
  add_image_size( 'overzicht-thumb', 100, 75, true); 
}

Via bovenstaande code voegen we twee formaten toe aan de post thumbnail, namelijk een met de afmeting van 200x150 pixels en een met de afmeting van 100x75 pixels. Het enige dat we nog hoeven te doen is de thumbnails op de juiste plaats inladen.

Inladen

Het inladen van de thumbnails met een specifieke grootte kan als volgt:

if ( has_post_thumbnail()) { the_post_thumbnail('homepage-thumb'); } // homepage thumb
if ( has_post_thumbnail()) { the_post_thumbnail('overzicht-thumb'); } // overzicht thumb