How to Get Post Content Without the First Image in WordPress

A very good friend recently asked me to build a funky new layout for his blog… with some bizarre requirements. So I’ve been dusting off my (barely used) WordPress theme creating skills and trying to figure out how to do some of the weirdest things!

The first roadblock was that he wants to separate the post content from the thumbnail image on the single post display page. You’d think this would be easy, since WP has functions to handle attachments… but it isn’t. The image src (and associated caption) is included in the standard post content.

This means that the the picture appears regardless of whether you use the_content or the_excerpt. It also means that the only way to strip images from the post is to cut out the HTML tags manually. Unfortunately, all the solutions I could find to do this removed all images from the post. Elegant use of preg_replace and all that, but it’s not what I wanted.

So I had to write my own function. Thankfully, the requirement was only to remove the first image, not specifically the featured one (which would be more complex).

function remove_first_image($the_string) {
	$count = substr_count($the_string, ' 0) {
		$length = strlen($the_string);
		$imgBeg = strpos($the_string, '', $imgBeg);
		$chop = $length-$imgEnd;
		$new_content = substr($the_string, 0, $imgBeg) . substr($the_string, $imgEnd+1, $chop);
		return $new_content;
	}
	else {
		return $the_string;
	}
}

That’ll do the first part. The code takes any string and counts the number of times the image tag “<img” appears. If there’s at least one, it searches for the first occurrence and notes where the tag begins. Then it looks for the first “>” after that point and notes the end of the image tag. 

The new string is built from the bit before the image tag and the bit after, and is returned. Note that the “<" and ">” symbols are used as-is if you’re working on a string generated by get_the_content. If you change them to HTML equivalents, it won’t work.

But that’s not the end of it… because this would leave the caption (if any) in place. So we need to duplicate the code to search for a caption and take that out as well. We can do that with a nested IF which works on the already-edited string and, if a caption is present, returns a different value.

Unfortunately (of course), in the string generated by get_the_content, WordPress replaces the caption placeholder that you see on the post editing screen with an actual caption. In other words, the thing that says “[caption … ]” on your screen becomes a set of “[caption] … [/caption]” tags with text in between. So we have to look for both tags and replace everything between the first bracket and the last.

Here’s the final version:

function remove_first_image($the_string) {
	$count = substr_count($the_string, ' 0) {
		$length = strlen($the_string);
		$imgBeg = strpos($the_string, '', $imgBeg);
		$chop = $length-$imgEnd;
		$new_content = substr($the_string, 0, $imgBeg) . substr($the_string, $imgEnd+1, $chop);
		$capcount = substr_count($new_content, '[caption');
		if ($capcount > 0) {
			$length = strlen($new_content);
			$capBeg = strpos($new_content, '[caption');
			$capClose = strpos($new_content, '/caption]');
			$capEnd = strpos($new_content, ']', $capClose);
			$chop = $length-$capEnd;
			$final_content = substr($new_content, 0, $capBeg) . substr($new_content, $capEnd+1, $chop);
			return $final_content;
		}
		else {
			return $new_content;
		}
	}
	else {
		return $the_string;
	}
}

Important note: You will have to replace the HTML codes for open and close brackets – “[” and “]” – for the code to work. WordPress won’t display those on this page, as it thinks they’re shortcodes.

Calling the function is simple enough from The Loop:


	
	
	
	
...

The addition of the third variable, $display_content, is necessary because WordPress stores post content in its “visual” format in the database. The apply_filters function puts all the paragraph marks and other formatting stuff back in so that the content displays properly in an HTML page.

Of course, from this point you could adapt the code to find the featured image entry for the post, get the src, find that in the post content and work out precisely which image to remove. But he didn’t ask me to do that!

Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *