has_post_thumbnail() hoeft niet op elk WordPress Template te worden gedefinieerd.

Steeds weer wanneer ik een nieuw template moet opzetten op basis van op maat gemaakte frontend werkzaamheden van mijn collega’s bij Dutchwebdesign zijn er een aantal standaard zaken die je keer op keer opnieuw in moet richten. Één van die zaken is de Uitgelichte afbeelding (Featured image, red.)!

Het probleem

Grafische elementen worden steeds belangrijker in websites en mede daardoor is het enkel uitsluiten van de eventueel te tonen post thumbnail op basis van de has_post_thumbnail() functionaliteit in mijn beleving niet langer toereikend. Met deze core WordPress functie kun je er inderdaad voor zorgen dat de afbeelding en eventuele omringende elementen niet worden getoond op een overzicht of pagina, maar bij de wat grafischer onderlegde designs zorgt dit ervoor dat de items zonder afbeelding in het overzicht, of als detailpagina net een stukje beleving missen of uit de toon springen.

Natuurlijk heb je de mogelijkheid om als developer een standaard afbeelding naar je thema of media library in te bouwen, welke als placeholder fungeert, maar dit is veelal een eenmalige optie waarbij jij, of je klant tot in het einde der tijden zit opgescheept met dezelfde, statische afbeelding. Én daarbij moet je voor elk overzicht, of detail template dezelfde functionaliteit toevoegen en moet degene die de doorontwikkeling op de site voor zijn of haar rekening neemt ook weten welke elementen uit bestaande templates, moeten worden hergebruikt in eventueel nieuw aan te maken templates.

De oplossing

Wanneer je besluit dat ieder bericht (van een specifiek post type) sowieso moet beschikken over een afbeelding, danwel een placeholder dan is het wellicht een beter idee om dit middels een aanpassing op de filter voor the_post_thumbnail() te doen. Op deze manier stel je de logica voor het terugvallen  op een placeholder eenmalig in en maken alle toekomstige templates en gedefinieerde afbeeldingsformaten hier gebruik van.

Bij Dutchwebdesign maken wij gebruik van een maatwerk plugin, de zogeheten Snippet Plugin. Met deze plugin zorgen wij ervoor dat klanten “Content Snippets” kunnen hergebruiken op meerdere delen van de site. Denk hierbij aan adresgegevens of het beheren van bepaalde content blokken op de homepage of in sidebars van templates etc. In onderstaand voorbeeld ga ik er gemakshalve dan ook even vanuit dat je een post, hergebruikt voor het beheerbaar maken van de  placeholder afbeelding.

Op verzoek kan ik ook de code aanleveren voor het gebruik van een statische afbeelding die is geupload naar de theme folder, via bijv. de in WordPress 4.7.0 geïntroduceerde get_theme_file_uri() functionaliteit.

Het code voorbeeld

/**
 * Post Thumbnail Placeholder filter
 *
 * @author: Simon van der Steen
 * @date: 23-3-2017
 * @url: http://Simon.vdSteen.me/WordPress/standaard-placeholder-voor-de-uitgelichte-afbeelding
 */
function svds_post_thumbnail_placeholder( $html, $post_id, $post_thumbnail_id, $size, $attr = array() ) {
	if( '' === $html ){
		//Set Snippet ID used to fetch Placeholder Image
		$intPlaceholderId = 999;

		$html = get_the_post_thumbnail( $intPlaceholderId, $size, $attr );
	}

	return $html;
}
add_filter( 'post_thumbnail_html', 'svds_post_thumbnail_placeholder', 10, 5 );

In bovenstaand voorbeeld pas je ‘999’ aan naar het WordPress post_id van de post die je gebruikt voor het beheren van de placeholder.

Wanneer je de code snippet hierboven in je functions.php plaatst, wordt met de post_thumbnail_html filter gecontroleerd of the_post_thumbnail() of get_the_post_thumbnail() inderdaad beschikt over een gerelateerde afbeelding. Indien de filter concludeert dat er inderdaad géén afbeelding is ingesteld voor de desbetreffende WordPress post, page of andersoortige post_type, dan zal het mechanisme in werking treden en de placeholder afbeelding tonen welke hoort bij het ingestelde ID.

Additionele voorbeelden

Indien gewenst zou je deze functionaliteit verder uit kunnen breiden met post type specifieke placeholders.

/**
 * Post type based Post Thumbnail Placeholder filter
 *
 * @author: Simon van der Steen
 * @date: 23-3-2017
 * @url: http://Simon.vdSteen.me/WordPress/standaard-placeholder-voor-de-uitgelichte-afbeelding
 */
function svds_post_thumbnail_placeholder( $html, $post_id, $post_thumbnail_id, $size, $attr = array() ) {
   if( '' === $html ){
      //Set Snippet ID used to fetch Placeholder Image
      $intDefaultPlaceholderId = 999;

      //Placeholders defined by ID per Post Type
      $arrPostTypePlaceholderIds = array( 'post' => 9991, 'page' => 9992 );
      
      //Check Post Type for current $post_id
      $strPostType = get_post_type( $post_id );
      
      //Check if Post Type exists within $arrPostTypePlaceholderIds
      if( array_key_exists( $strPostType, $arrPostTypePlaceholderIds ) ){
         $intPlaceholderId = $arrPostTypePlaceholderIds[$strPostType];
      }else{
         $intPlaceholderId = $intDefaultPlaceholderId;
      }

      $html = get_the_post_thumbnail( $intPlaceholderId, $size, $attr );
   }

   return $html;
}
add_filter( 'post_thumbnail_html', 'svds_post_thumbnail_placeholder', 10, 5 );

In het bovenstaande voorbeeld gebruiken we het standaard ‘berichten’ en ‘pagina’ post_type dat beschikbaar is binnen WordPress, dit is oneindig uit te breiden met custom post types.