This is one of those things you see done on a lot of blogs, but just can't seem to find a simple answer on how they did it. What we're going to do is create a page that lists our post excerpts which will contain a title, date, category, comment count, and of course the content. Simple right? Chances are we've all done this already. I mean, it's pretty much a standard wordpress blog setup. What we're going to do differently is take the post image out of the the_excerpt(); completely and create a custom field instead.
In my attempts to figure out how wordpress bloggers were linking their post image directly to the post, and not to the image itself, I googled this simple question:
- How can I link my Wordpress post image to the permalink of the post?
When I finally figured out what the custom fields were used for, it was an "Ah Hah!" moment. I can use a custom field for my post image! Doing this will not only allow me to link the post image to the full article but it will also give me full control over the image placement.
HTML:
<div id="container"> <h1>Recent Articles</h1> <div class="post-wrapper"> <a href="#" rel="bookmark" title="Blog Post"><img class="post-image" src="http://www.jarodtaylor.com/blog/wp-content/uploads/posts/images/psresources.jpg" alt="Photoshop Resources" /></a> <div class="post"> <h2><a href="#" title="Blog Post">10 Grunge Brushes For Photoshop</a></h2> <div class="post-meta"> January 6th, 2009 | Photoshop, Resources | 12 Comments </div> <div class="post-content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas posuere. Sed tellus mi, imperdiet ac, molestie vel, gravida quis, mauris. Praesent consequat enim ac nisi. Sed non libero sit amet orci tincidunt tempus. Mauris bibendum, felis non tristique egestas, elit dui ultrices mi, sed facilisis libero pede vitae risus. Sed nec dui. Fusce mollis. Nunc id libero. Mauris massa. Duis vitae lorem. Nulla elementum tellus ac ipsum. </p> </div> </div> </div> </div>
I created a container for aesthetic reasons, you may or may not include it. The important markup here is the html between the post-wrapper div.
We gave our image a class of post-image so we can float it to the left. We also wrapped the rest of the post content in a class of post, and added classes accordingly to the post meta and post content. Now that we have the divs and classes in place, let's add some CSS.
CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: #cae0dd;
font: 62.5% Georgia, "Times New Roman", Times, serif;
}
.clear {
clear: both;
}
p {
line-height: 1.4em;
}
h1 {
font: bold 3.5em Georgia, "Times New Roman", Times, serif;
color: #879896;
margin-bottom: 10px;
}
h2 {
font: bold 2em Arial, Helvetica, sans-serif;
}
h2 a {
color: #524537;
text-decoration: none;
}
#container {
width: 800px;
margin: 2% auto;
}
.post-wrapper {
width: 600px;
font-size: 1.2em;
border-bottom: 1px dotted #75b6bb;
padding-bottom: 20px;
margin: 15px 0 7px;
}
a .post-image {
float: left;
margin-right: 7px;
border: 3px solid #75b6bb;
}
.post-meta {
color: #8f7962;
margin: 2px 0;
}First thing we are doing is adding some generic styles for margins, fonts, etc. to help make the example look prettier. Then we added some styles to the post-wrapper to give it a width, a border, some padding and margins, and a starting font size. We then added a border to the post-image, gave it a right margin to give it some breathing room, and floated it left. Finally we added some style to the post meta just to add a little more color.
Now you should have something that looks similar to this. I duplicated our post-wrapper and its content a few times to give us an idea what it would look like with multiple posts.
Adding The PHP & Wordpress Functions
I'm sure a lot of you are sitting there right now thinking, "Seriously, Jarod get on with it. I don't care about how to style a post!" and I'm sorry, we're getting to it now! Let's get this ready for some dynamic content.
What we have to do now is replace some html with the wordpress functions calling for your post content. Again, chances are, you've already done this.
<div id="container">
<h1>Recent Articles</h1>
<div class="post-wrapper">
<a href="#" rel="bookmark" title="Blog Post"><img class="post-image" src="http://www.jarodtaylor.com/blog/wp-content/uploads/posts/images/psresources.jpg" alt="Photoshop Resources" /></a>
<div class="post">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="post-meta">
<?php the_time(' F j, Y') ?> |
<?php _e(''); ?> <?php the_category(', ') ?>
| <?php comments_popup_link('0 Comments', '1 Comment', '% Comments'); ?>
</div>
<div class="post-content">
<?php the_excerpt(); ?>
</div>
</div>
</div>
</div>If you are having trouble understanding anything we just did, I recommend visiting this tutorial for a better understanding of the "loop".
For those of you who understand exactly what we just did, you'll be wondering, "What the heck do we do with the image, though?".
Adding A Post Image To The Loop
The way we have our post-image currently set up certainly wouldn't work. We'd end up having the same image on every article we posted. Now, normally we could just add the image directly to our post, which would put our post-image after the post's title and post-meta, and somewhere, most likely, before the post content. This works perfectly fine in most cases, but in our case, we're floating our image to the left of all our content including the post's title and post-meta. We could achieve this with CSS, but it would most likely be fragile with some browsers. Instead we're going to create a custom field in our wordpress.
When you're logged in to your wordpress and writing your post, you'll notice an option towards the bottom that says Custom Fields.
This is where we'll be adding our post-image's URL and Alt attribute. In the Name field we need to enter the custom field's name. I'm using image-url. In the Value field we'll put the URL of the image we're using as our post image. In this case I'm using http://www.jarodtaylor.com/blog/wp-content/uploads/posts/images/psresources.jpg.
Now we have our Name(key) and Value of our custom field. What we need to do now is replace some html in our post-image with some wordpress functions, and our new key value pair.
Replace: <a href="#" rel="bookmark" title="Blog Post"><img class="post-image" src="http://www.jarodtaylor.com/blog/wp-content/uploads/images/psresources.jpg" alt="Photoshop Resources" /></a> With: <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img class="post-image" src="<?php $key="image-url"; echo get_post_meta($post->ID, $key, true); ?>" /></a>
First of all, what we did is take our post image out of our post content by creating a custom field, which allowed for us to not only position it where we wanted it, but also gave us an opportunity to add wordpress's the_permalink() function to the anchor of our image. Secondly, we added our custom field to our image src="" by calling for the get_post_meta() function which held our custom field's key value pair.
The only thing our image is missing is our alt="" attribute. As we all know, without this we'll fail W3C Validation. We can't have that! So we're going to add another custom field for our alt attribute. You can obviously use whatever you'd like, but I used image-alt in the Name field and Photoshop Resources in the Value field.
Now we just need to add our new custom field to our post-image.
Our final code should look like this:
<div id="container">
<h1>Recent Articles</h1>
<div class="post-wrapper">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img class="post-image" src="<?php $key="image-url"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php $key="image-alt"; echo get_post_meta($post->ID, $key, true); ?>" /></a>
<div class="post">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="post-meta">
<?php the_time(' F j, Y') ?> |
<?php _e(''); ?> <?php the_category(', ') ?>
| <?php comments_popup_link('0 Comments', '1 Comment', '% Comments'); ?>
</div>
<div class="post-content">
<?php the_excerpt(); ?>
</div>
</div>
</div>
</div>That's it! So simple, yet so useful. If you really want to maximize usage of Wordpress, custom fields are something to consider. If you'd like to read up more on Custom Fields and the get_post_meta($post_id, $key, $single) function, you can do so here. Please let me know if you have any problems. Thanks for reading!
January 28, 2009
Your information is good…..
April 24, 2009
hi there, this is very cool… how do i write the code to check if there is any data in the image-url field first, then if not to automatically insert a transparent shim? i kinda know how it should be, but not able to get it right…. any advice would be great!
April 24, 2009
I *think* I know what you’re asking, but correct me if I’m wrong. You’re wondering about times that you won’t be using a post image, right?
In that case you could do two things. You could either create the “shim” image you’re referring to, name it something you can easily remember, and just insert that URL into your custom field.
Or, you could save yourself the time, and create and if else statement within your image tag in the src call ie:
if($key="image-url") { echo get_post_meta($post->ID, $key, true); } else { echo "your shim image tag"; }
I’m at the office right now and don’t have time to check if this works. Let me know if it does, and if not, I’ll get a working solution this evening.
April 24, 2009
Alright, I tested what I suggested and it doesn’t work. My if statement wasn’t really testing anything, haha.
Here we go. I tested this and it works. Put this in the post-image’s src=”":
if (post_custom('image-url')) {
$key="image-url"; echo get_post_meta($post->ID, $key, true);
} else {
echo "/path/to/yourshimimage.gif";
}
I hope this helps!
April 26, 2009
that’s the ticket!
thanks!
s