Webrocker Blog

Today I made a litte rainy sunday afternoon excercise for this site:

A SVG fallback image for the list/archives pages, if no post-thumbnail image is defined.
I had a generic fallback image - a greyscale version of the header graphic with the guitar strings - for a while now, but this was a bit boring.

As of today (and work in progress, as always), I now have the "guitar strings", but with a generated background color, based on the categories of the post.
But since most of my post have several categories, I thought this could make for a fun experiment. Initially I thought adding a visual clue for a category along the structure of the navigation would be nice (most of the main navigation items are links to the respective category archive), but to make the page more colorful, why not creating a "fingerprint" for the post from the combination of the categories added?

In the end, all that's needed is a hex-color-code, which is added as a fill="" attribute to a rect element in my guitar strings svg graphic.

I get a list of the post's categories with WordPress' own get_the_category(), which returns an array of category-objects.
I loop over this array, take the category-name and fill another array concatenate a new string with these names.
Then I implode this array to a string.

This string gets a md5() treatment, and the first 6 characters of the resulting hash is used as the hex-code for the color.

	$color = 'cccccc'; // fallback
	$cats = get_the_category();
	if ( ! empty( $cats ) ) {
		$tmp = '';
		foreach( $cats as $cat ){
			$tmp .= $cat->name;
		}
		$hash = md5($str);
		$color = substr($hash,0,6);
	}

   <svg ...>
   <rect fill="#<?= $color ?>" />
    </rect></svg>

I placed the php code in a php file in my theme's template-parts directory and check in the main index and archive loop if a post-thumbnail is there. If not, use my new fallback.

if( has_post_thumbnail() ){
  // the current post has a thumbnail
  echo '<div class="post_thumbnail"><a href="'. get_the_permalink() . '">';
  the_post_thumbnail('wbr-archive-post-thumbnail');
  echo "</a></div>";
} else {
  // get the fallback
  get_template_part('template-parts/post/thumbnail-fallback');
}

To my surprise these colors work really well. I assumed that the codes returned would somehow look ugly, but as for now most of the generated post images look good, and fit well with the "real" post thumbnails.

This is what I love about the "old" WordPress, with its PHP based template hierarchy. It is so easy to tweak and have fun with it.