A fellow webling asked me how I got the default excerpts to display images on my site. So after explaining it, I thought maybe someone else out there might be looking to do the same thing. Here’s how to do it:

Most CMS systems or blogs have an automatic setting to shorten your posts down to a character/word limit in order to show them as an excerpt. These systems usually strip out any html tags within the post. There is actually a good reason for this.

BE CAREFUL
You don’t want any tag(s) to be orphaned as the excerpt is trimmed down. You will end up with formatting errors in your page(s) if you have an unclosed <div> or <a> tag, or an <img> tag that gets chopped in half. This is because it actually counts the bits of code in the tag as words - taking away from the character/word limit.

But, keeping the above in mind, what if you want an image to show up for each excerpt, as I have on this site? Well, here’s one way to accomplish this. You will have to do some CSS styling to get the image to look/work the way you want it. We can go over that after we get the image to show up.

There are most likely plug-ins that will get you the same effect, but I found this approach to be the simplest solution.

Wordpress:

Find the file on your server here: wp-includes>formatting.php

Then locate this bit of code:

function wp_trim_excerpt($text) {
	if ( '' == $text ) {
		$text = get_the_content('');

		$text = strip_shortcodes( $text );

		$text = apply_filters('the_content', $text);
		$text = str_replace(']]>', ']]>', $text);
		$text = strip_tags($text);
		$excerpt_length = apply_filters('excerpt_length', 55);
		$words = explode(' ', $text, $excerpt_length + 1);
		if (count($words) > $excerpt_length) {
			array_pop($words);
			array_push($words, '[...]');
			$text = implode(' ', $words);
		}
	}
	return $text;
}

The next step tells the function which html tags ARE allowed within the excerpt. We ONLY want to allow the <img> tag.

You allow it to show images by changing it to this:

function wp_trim_excerpt($text) {
	if ( '' == $text ) {
		$text = get_the_content('');

		$text = strip_shortcodes( $text );

		$text = apply_filters('the_content', $text);
		$text = str_replace(']]>', ']]>', $text);
		$text = strip_tags($text,'<img>');
		$excerpt_length = apply_filters('excerpt_length', 55);
		$words = explode(' ', $text, $excerpt_length + 1);
		if (count($words) > $excerpt_length) {
			array_pop($words);
			array_push($words, '[...]');
			$text = implode(' ', $words);
		}
	}
	return $text;
}

That’s it. If you have an image tag that begins and ends within the first 55 words, it will show up in your excerpt. You can change the number of words by changing the number “55″ above.

This only works if the image is at the beginning of your post.

CMSMS - CMS Made Simple

There is a plug in for CMSMS called “Blogs Made Simple.” It’s pretty flexible in its layout and styling. It also has an auto excerpts setting. (My only hang up with this system is its lack of search support.)

Find this file on your server: modules>Blogs>action.showblog.php

 $onerow->morelink=$this->CreateLink($id, 'showentry', $returnid, $moretext,
				   array('entryid'=>$dbentry["id"]), '', false, false, '', false, $prettyurl);

    $onerow->shorttext=strip_tags($this->TruncateText($entry["text"],$shortlength))." ".$onerow->morelink;
    $onerow->truncatedtext=strip_tags($this->TruncateText($entry["text"],$shortlength));
    $onerow->text =$entry["text"];
    $time=$entry["createtime"];

Change it to this:

 $onerow->morelink=$this->CreateLink($id, 'showentry', $returnid, $moretext,
				   array('entryid'=>$dbentry["id"]), '', false, false, '', false, $prettyurl);

    $onerow->shorttext=strip_tags($this->TruncateText($entry["text"],$shortlength),'<img>')." ".$onerow->morelink;
    $onerow->truncatedtext=strip_tags($this->TruncateText($entry["text"],$shortlength),'<img>');
    $onerow->text =$entry["text"];
    $time=$entry["createtime"];

That’s it. You can change the number of words in the module admin area.

This only works if the image is at the beginning of your post.

Now What?

There are 2 different scenarios I use for this site.

1. I want to use the same image for the post and excerpt. It is most likely larger than the ideal size of the excerpt.

If you have a large image that will need to be scaled down to fit within your display of excerpts, you’ll need some CSS to scale it accordingly.

2. I want to have a unique image show up for the excerpt and NOT for the post.

Most systems have a separate template for the main page and single post pages. If you wrap the display of your posts in a <div> with a different id for each, you can style the image differently for each page type. My home page has a <div> with the id of “mainCol”. The actual story page has the same <div> with the id of “mainColLvl2.” This is enough for me to be able to either scale the image for one or the other, or make it visible or hidden.

I wrap the image in a <p> tag while writing the post. Remember, the <p> tag will be stripped away for the excerpt. If I only want the image to show on the excerpt, I add the class “blogExcerptImg.” My CSS says that anything with that class is not displayed on secondary pages.

HTML

<p class="blogExcerptImg">
     <img src="pathtoyourimage" />
</p>

CSS

mainColLvl2 .blogExcerptImg{
     display:none;
}

I have CSS for the main page that tells the image to be a width of 200px, and a height of “auto.” This keeps the image to the width I want, and also scales it proportionally for its height. The html is simplified below to show the ids that wrap it.

HTML

<div id="mainCol">
     <div class="entry">
          <img src="yourimagepath" />

CSS
This gives the image its border, scales it to 200px, aligns it to the left of my text, etc.

#mainCol .entry img {
	border:1px solid #333333;
	display:inline !important;
	float:left;
	height:auto;
	margin-right:10px;
	padding:1px;
	width:200px;
}

This entry was posted on Wednesday, April 8th, 2009 and is filed under CSS, Tips and Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.