Hoe om te gaan met WordPress posts zonder / met post thumbnail

Er gaan een aantal oplossingen de rondte maar geen is er zo uitputtend als deze.
Andere oplossingen veroorzaken nogal eens extra database queries.

Stel, je hebt een class die een post print. Die class heeft een methode genaamd bouw_img() en doet de backend van de afbeelding. Er zijn een aantal stappen waar je doorheen kan voordat je je zoektocht naar een afbeelding hoeft te staken.

  1. controleer has_post_thumbnail()
  2. controleer of get_the_post_thumbnail niet leeg is*
  3. controleer of een afbeelding in de post_content voorkomt
  4. controleer of je een terugval afbeelding hebt ingesteld in het thema en of dit is ingevuld

Zo zullen lijsten haast nooit meer zonder afbeelding zijn.

De kern van de functie ziet er zo uit.
Let op:

  • Je hebt een image_size die ‘card’ heet. Vervang dit door je eigen image_size.
  • Het post-object zit hier als eigenschap op de class. Werk je niet OOP of via mijn class uit de gist, vervang dan $this->post door $post in je WP loop.
  • De afbeelding wordt opgeslagen in $this-img. Als bovenstaand, vervangen door $img;

 

if (has_post_thumbnail($this->post)) { //stap 1

	//nu kan de thumb leeg zijn... 
	$tpt = get_the_post_thumbnail($this->post, 'card');
	if ($tpt and $tpt !== '') { // stap 2
		$this->img = $tpt;
	} else {

		if (!!strpos($this->post->post_content, '<img')) { // stap 3

			// begin stringstring<img alt="" width="" height="" />stringstring

			$expl1 = explode('<img', $this->post->post_content);

			// nu kan de afbeelding als eerste zijn gekomen, of als tweede.
			if (!!strpos($expl1[0], '<img')) { $e1p = $expl1[0]; } else { $e1p = $expl1[1]; } // src='' alt='' width='' height='' />stringstringstring

			$expl2 = explode('/>', $e1p);

			// src='' alt='' width='' height='' 
			$e2p = $expl2[0];

			$this->img = "<img " . $e2p . " />";

		} else {

			$this->terugval_afbeelding(); // stap 4

		}

	}

	echo $this->img;

} else {

	$this->terugval_afbeelding(); // stap 4

}


Verder gebruik ik dus de methode terugval_afbeelding ( als je niet OOP werkt, $this->terugval_afbeelding() vervangen door terugval_afbeelding() ), de kern daarvan is:

	$terugval = (get_field('terugval_afbeelding', 'option'))['sizes']['card'];
	if ($terugval and $terugval !== '') {
		$this->img = "<img src="".$terugval."" />";
	} else {
		$this->card_class = $this->card_class .= ' geen-afbeelding';
	}

Deze functie controleert of er een ACF veld is aangemaakt op een optie pagina. Volg de links voor een uitleg daarover.

Dàn zit je met afbeeldingen die waarschijnlijk allemaal een verschillende verhouding hebben. Stel, je eindigd met deze HTML:


Dan kan je met deze sass ze tot de gewenste verhoudingen dwingen:


.card-img {
	&::before {
		padding-top: HOOGTEpx / BREEDTEpx * 100%;
		content: '';
		display: block;
	}
	position: relative;
	img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

* has_post_thumbnail kan true geven ook als get_the_post_thumbnail leeg is.