Recently I’ve received an email regarding those little thumbnails next to Post title. My mate asked me to explain how to set it up so here’s the ‘trick’. As you may note, teaser thumb in this Post will only be displayed once. There’s no duplicate within the content in spite of the fact that you upload teaser image along with the rest of the content and all other images related to it. Yes, no Custom Fields involved here at all!
Otherwise spoken, how to extract certain image out of the post and display it out of context.
So how the hell WordPress can know which image is supposed to represent teaser image if there’s at least one image extra attached to the very same Post? Well, that’s the trick. We must use different “insert” method. Let’s assume all other images are clickable and users are able to see full size for each of them. In order to properly extract teaser image from Post later in frontend we’ll use the following method to insert it first:
If you take a look at the HTML code after, you’ll note that this image is not enclosed with <a></a> tags, right? Let’s now take a look how to extract such image from the content…
The basic idea is to grab teaser thumbnail from the_content() and replace it with – nothing, empty string. Remember, we don’t want to have the same image displayed twice within Post.
<?php
// get the first image out of content, prevent double image display
$path = ""; // teaser image path
$content = get_the_content(); // get Post content entirely
// grab fist image (teaser thumb) by pattern
$frst_image = preg_match_all( '|<img.*?src=[\'"](.*?)[\'"].*?>|i', $content, $matches );
// any image there?
if( $frst_image > 0 ) {
$path = $matches[ 1 ][ 0 ]; // we need the first one only!
// replace with empty string in order to avoid duplicates
$content = preg_replace( '|<img.*?src=[\'"](' . $path . ')[\'"].*?>|i', '', $content );
}
if( $path ) {
// teaser image found! display it now or leave in variable for later
?>
<img src="<?php echo $path; ?>" alt="<?php echo get_the_title(); ?>" class="thumbnail" />
<?php
$path = "";
} else {
// teaser image not found. replace with dummy graphic
?>
<img src="<?php echo bloginfo( 'template_directory' ) . ( '/images/no_image.jpg' ); ?>" alt="<?php echo get_the_title(); ?>" class="thumbnail" />
<?php
$path = "";
}
?>
There’s one little tip at the end: Insert teaser images before any other Post content (text or other images). It’s good idea to keep things organized.
