Sharon on the Net

It took me a few days, but  I finally got this working! I have a photo gallery theme I’m working on, and I’d like it to always display a featured image in the loop. Here were my requirements:

1. If the featured image isn’t set, look for images within the post and display the first one.
2. If an image isn’t in the post but there’s a gallery, display the first image from the gallery.
3. If there is no image and is no gallery, display a default image.

Setting a default image when the featured image is blank (3) was pretty easy.  Looking for an image within the post (1) was fairly doable. But, finding an image within a gallery (2) was giving me problems.

What happens when WordPress has you drop a gallery in a post is shortcode processing. That means the code looks something like this (with brackets instead of curly braces)…

{gallery link="file" ids="1,2,3,4,5,6"}

…until you visit the page it sits on. Then, WordPress processes that line to show your gallery based on the IDs of the images added.

So, with the ability to call an image from its ID, I was able to implement wp_get_attachment_image_src to return the image I needed from the gallery!

Here’s what you do:

Add a Function to your functions.php File

Open up your functions.php file and drop this bit of code into it (change
sharons_new_image to whatever you prefer):

function sharons_new_image() {
	global $post;
	ob_start();
	ob_end_clean();
	$galID = str_replace('ids="', '', strstr(strstr($post->post_content, 'ids="'), ',', true));

	$first_img = strstr($post->post_content, '<img');
	$first_gal = wp_get_attachment_image_src( $galID, 'full' );
	$header_image = get_header_image();
	$loop_default_image = home_url() . '/wp-admin/images/w-logo-blue.png';

	if(!empty($first_img)) {
		$returnimage = $first_img;
	} else if(!empty($first_gal)) {
		$returnimage = $first_gal[0];
	} else if(!empty($header_image)) {
		$returnimage = $header_image;
	} else {
		$returnimage = $wp_logo_image;
	}
	return $returnimage;
}

looks in your post ($post->post_content) for the first instance of img=".

$galID is looking for the first number after ids=" (the rest of that code is cutting out any other text still remaining).

$first_gal is looking for the image based on the ID found in $galID.

get_header_image() is the WordPress default code for calling the header image (set within the Theme Customize window).

If you don’t have a header image set, I’ve set the WordPress logo as the default at $loop_default_image. This image will be called if no other image is found. If you want to set it to a specific image, you can replace $loop_default_image = home_url() . '/wp-admin/images/w-logo-blue.png'; with something like this:

$loop_default_image = get_template_directory_uri() . '/images/loopimage.jpg';

This code above looks in your theme’s “images” folder for an image called “loopimage.jpg”. Customize this link as needed.

Call the Function in your index.php File

Next, we need to tell our theme’s index.php page to use this function. Most themes may have the_post_thumbnail() somewhere; if yours doesn’t, you can add it manually (usually above the the_excerpt() or the_content() line).

Change your the_post_thumbnail() to look like this instead:

<?php if (has_post_thumbnail()) {
	the_post_thumbnail();
} else {
	echo '<img src="' . sharons_new_image() . '" />';
} ?>

That’s it! If you have questions or problems, leave them in the comments. Thanks!