15
My First Tutorial - Post Thumbnails and Intro Text
I have been trying to think of something good to post for my first tutorial on WPelements.com and finally settled on how to create clean post thumbnails and intro text similar to that seen on this site as well as one of my other sites, MassivePress.com. In fact, the WPelements.com theme you see here was spun from the code I created for MassivePress.com. I like to use post thumbnails and post intro text for several reasons, but over all, it’s to keep the site looking clean and uniform. Also, I believe it makes the site more interactive, easier to follow, and allows you to put more content in front of your users utilizing less space.
The post thumbs and intro text you see here and on MassivePress.com are made possible by a combination of some simple CSS (of course) and a few “loop” customizations utilizing “the_excerpt” and “the_content_rss” template tags. Let’s start below with the CSS I use over at MassivePress.com.
The Post Thumbnail CSS
I find that a 140×140 pixel image works just about perfect for post thumbs wrapped in a 1px border with about 4px of padding around it. The CSS I use over at MassivePress.com looks like this:
#introIMG {
float:left;
margin-right:8px;
}
#introIMG img {
border:none;
padding:4px;
border:1px solid #BDBDBD;
}
The first part defines the “div” properties for which we want to float to the left of our intro text. The second part defines the properties for the actual post thumbnail image including a 1px border to give it that little extra something. Now that we have the thumbnail defined, what about the intro text?
The Post Intro Text CSS
The post intro text CSS ensures that we don’t have any text wrapping around the bottom of the post thumbnail image. Basically all I do is hide the extra text I don’t want my users to see until they click through to the actual post. There are other ways to do this by using the “more” tag, but I like it better this way.
#postMain {
height:212px;
overflow:hidden;
margin-bottom:15px;
}
You might call this a hack, but it works like a charm by cutting off any text past 212 pixels which just happens to line up perfectly with the height of the post thumb including padding and margin. On to the template code…
Customizing Your Loop
Now that the CSS is all finished, all there is left to do is call it out in the loop within your main index template. The example below is specific to the MassivePress.com theme, but I cleaned it up a bit just to make it more legible. Depending on how/where you want your post titles, post date, etc. to show up you might might to move things around a bit.
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div id="postMain">
<div class="post" id="post-<?php the_ID(); ?>">
<div class="postMeta"><span class="date"><?php the_time(’M j, Y’) ?></span></div>
<h2><a href="<?php the_permalink() ?>" ><?php the_title() ?></a></h2>
<div class="entry">
<div id="introIMG">
<a href="<?php the_permalink() ?>" title="Read More"><?php the_excerpt(); ?></a>
</div>
<a href="<?php the_permalink() ?>" title="Read More"><p><?php the_content_rss(”, TRUE, ”, 200); ?></p></a>
</div>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
Writing Your Post
By using “the_excerpt” and “content_rss” template tags, you don’t have to change the way you write your posts in the least. After you are done writing your post you just have to upload a 140×140 pixel image that you want to use for your post thumbnail and place it in the optional excerpt field as shown below. The “the_excerpt” template tag will pull the thumbnail image out of the except and link it directly to the post permalink. The “content_rss” tag strips the rest of your post down to text and displays it next to the post thumbnail.
Hopefully my first shot at a tutorial wasn’t a total waste of time, but your comments are appreciated either way.
January 26th, 2008 at 11:22 pm
I found your first tutorial very helpful, and certainly not a waste of time!
Thank You!
January 28th, 2008 at 9:55 am
Thanks this for tutorial! Totally not a waste!
January 29th, 2008 at 10:23 am
certainly a different way to do it, considering most people either constrain the image size via CSS or use a custom field. This may be a quick and easy solution. Not bad.
January 29th, 2008 at 10:51 am
I prefer not to constrain image size via CSS simply because you end up with a distorted image on your site unless you pre-size the image you intend to use. Just personal preference I guess.
January 29th, 2008 at 6:52 pm
FYI your method completely does not validate with a xhtml 1.0 doctype because you can’t put a tag inside of an , if you care about validation
January 29th, 2008 at 6:54 pm
The other thing that I find a bit annoying is that the entire thing is wrapped in an anchor so that the entire article is clickable, its cool on massivepress.com where the tooltip comes up but what if you want to copy and paste you HAVE to goto the extended article? Doesn’t seem too user friendly IMO.
January 29th, 2008 at 8:42 pm
Great feedback Robert. I realize that my methods are not perfect by any means, but there are reasons behind each decision I make when putting together a design. I understand that none of my designs and concepts will be entirely perfect for every user, but I think I take pretty good care of the majority.
Also, I do care to a certain extent about validation, but really when you get down to it, not very many of the major players validate 100% including sites like yahoo.com, msn.com or even certain google assets. Either way, I am always learning and comments like these help me along the way.
On MassivePress.com, you can still select and copy the text on the front page by placing your cursor a bit outside the text box.
January 29th, 2008 at 8:55 pm
Don’t take the following as an insult but I think validation is more important then you think, its not a status symbol its a way of making sure things work properly. The ‘big players’ still use tables and 10 year old methods of web design and the big players don’t necessarily even hand code stuff, they use programs like dreamweaver which spit out non semantic code half the time which leads to invalidated pages and i’m sure they don’t care. In fact they almost certainly custom CMS’s which i’m sure were made before validation even mattered, my point being they don’t out put validate code. Don’t get me wrong I’m not knocking your methods just giving you feedback. I like this site and massivepress.com good work.
January 30th, 2008 at 1:02 pm
Hey Robert, I didn’t take your comment as an insult in the least. Quite the opposite actually. You are right, validation is important and as I have time I am constantly updating and reworking code on all my sites fix some of these issues.
January 30th, 2008 at 9:27 pm
2 plugins I should suggest for this site - subscribe to comments and subscribe 2 email notifications on new posts.
February 1st, 2008 at 5:43 am
Excellent and very helpful tut. I’ve bookmarked this.
I think we need to put things into prospect here: Knowadays the internet is not designed by designers but by the users. An everyday user is not interested in the words ‘validate’, ‘accessibilty’ or ’semantic’. We design for the users, not for other designers. If a design works but doesn’t validate, I am still running with it, because the user or a client, for that matter, doesn’t care.
February 1st, 2008 at 4:29 pm
Again I have to point out that validation IS NOT A STATUS symbol. I do not put ‘my site validates’ or even any other B.S. like that on my sites that lead to the W3C to show validation. Validation often means that your site will operate CORRECTLY according to the people who make the ‘rules’ for how html/css should operate. I can’t remember how many countless newbies say their site doesn’t work in w/e browser, after correcting hundreds of validation errors, bam the site works, go figure. And its not like the words you point out ‘validate’, ‘accessibility’ or ’semantic’ are words to describe how a site looks or a style lol, you use them as if they mean ‘flare, pretty, cool’ - they are words to describe FUNCTIONALITY and the CORRECT way of doing things. Your right though, the user doesn’t care about the words but i’m sure that they care if their site works in multiple browsers and or if it can be crawled correctly by the search engines and if it is accessible to handicaped people (if that is the demograph of course). But as you said, if it works you run with it, still adding things later down the line could be a problem, one small edition could tumble the website.
Think of it this way, if your mechanic tightens the lug nut on your tire only to hand strength and says to himself well its good enough because its ON and in the end it produces the same result, a tightened lug nut on a tire, but when wheel eventually falls off because said mechanic didn’t torque the bolt to specs …you see what I am getting at.
All in all people need to get over thinking that validation is some sort of status symbol, its very simple, its put into place to ensure quality control and functionality. Do it right the first time…
February 3rd, 2008 at 8:19 pm
the only other thing I don’t like about this method (and its not your fault) is that for w/e reason when you use content_rss the read more link does not work. I have not been able to find a work around for this, other then putting a new permalink link at the end which is dumb, IMO.
April 14th, 2008 at 8:30 pm
My only problem is trying to figure out how to delete the Massive text and miscellaneous ghost images so that I can display my header. Can you help with that. I’m a complete php noob.
April 20th, 2008 at 4:09 pm
I would use a custom field to store the image thumbnail instead. That way you don’t screw yourself in the future in the event you want to use the excerpt field for an actual excerpt.