If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
So, you’re one of the brave ones who managed to digest all that code, and now you’re looking for more, well I’m now going to show how you can use custom fields to make those ‘Featured’ posts all the more appealing!
By the end of this, we will have an image, with a title and an excerpt, all rotating, pulling the reader in to click!
Custom Fields
Firstly, I suggest you do a bit of reading on custom fields if you aren’t sure about them.
So for this to work, you cannot simply place an image in a post as normal, and have it display when you call <?php the_excerpt(); ?> for example. This is where we need our custom fields.
Towards the bottom of the ‘Write Post’ screen, there is a box headed, appropriately, ‘Custom Fields’, and in this box you have the option of adding a ‘Key’ and a ‘Value’. Another way of looking at this is the ‘Key’ is a placeholder for the ‘Value’. That is to say that when you put the ‘Key’ in your WordPress template, the ‘Value’ is what you get as your output.
In our case, we are going to create a ‘Key’ that is ‘Featured Image’, and then for our ‘Value’, we will put in the url of the image we want to use. We now add the following code inside of our <div id="cf<?php the_ID(); ?>">:
<div class="image"> <img src="<?php echo get_post_meta($post->ID, 'Featured Image', true); ?>" /> </div>
This checks which post is being shown by its ID, then finds the correct ‘Featured Image’ for that post. I have wrapped this in a div for CSS styling. Now whenever you write a post to put in the ‘Featured’ category, make sure you add the ‘Key’ of ‘Featured Image’, and the ‘Value’ as the url of that image.
The Final Code
Incorporating the custom field code above, I have added a few other aspects of a post’s meta data, such as the title and date. You will also notice that I have made the image (custom field) a clickable link that takes you to the post itself. Don’t forget, this just goes in the <div id="cf<?php the_ID(); ?>"> part.
<div class="image">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"
rel="bookmark"><img src="<?php echo get_post_meta($post->ID,
'Featured Image', true); ?>" alt="<?php the_title(); ?>" /></a>
</div>
<div class="header">
<div class="title">
<h3><a href="<?php the_permalink(); ?>"
title="<?php the_title(); ?>"
rel="bookmark"><?php the_title(); ?></a></h3>
</div>
<div class="date">
Written on <?php the_time('F j Y'); ?>
</div>
</div>
<div class="featured_text">
<?php the_excerpt(); ?>
</div>
Styling
So, at the moment, this might be looking a bit bland and completely unaligned, but if we add some CSS to this, we can get some overlays going and all sorts! The images I am using are 320px by 150px, and this is reflected in the CSS, so you need to change those values to fit your image size
#cf_wrapper {
margin-top: 20px;
width: 320px;
height: 320px;
}
.cf_element {
width: 320px;
height: 320px;
}
.header {
width: 320px;
background: #111111;
color: #ffffff;
opacity: 0.8;
position: relative;
top: -150px;
}
.header .title {
padding: 2px 0px 0px 5px;
}
.header .title h3 {
margin: 2px 0px 4px;
}
.header .date {
padding: 2px 0px 0px 5px;
}
.featured_text {
background: #111111;
border-top: 1px solid #000000;
color: #FFFFFF;
width: 310px;
padding: 5px;
position: absomµçWFS°Ð§F÷¢Sƒ°Ð§ÐÐ
You’ll notice that the CSS opacity settings are not there for IE, that’s because I wasn’t able to make the floating header div be opaque to the image…it kept showing all the way through to the background. If anyone can help me fix that I’d appreciate it.
You can take a look at the final file here, and you can download it, including the CSS file, below:
Crossfader Demo (88)
I think that that just about wraps that up, if you take a look at my example, you can see what this code looks like. You can view my example here.
There’s lots more I could add to this, including some jQuery hovers etc, but that is for another day!
Enjoy!
One quick question, is it possible to modify this to use in the sidebar? And how would one go about it?
@Sue - because this uses a custom query, it doesn’t interfere with the normal loop, so will work fine in the sidebar. Let me know if you have any issues.
Hi Alex,
Just thought I’d let you know I got it working in the sidebar. I tried running it as a widget in a text one (with exec php), but for some reason the images wouldn’t show up, just the alt text. (!?!).I’m unable to use the excerpt though, maybe because of a plugin I use that excerpts the article automatically (yet has always allowed a full feed).
I’m very pleased with what you’ve done. It’s absolutely great. And a big thank you for coming up with this…it’s a lot better than some of the plugins I’ve seen (lighter for one). It might not be for everyone, since it involves messing with your files, but I do it on a local machine and have no fear.
Thanks again.
Hi Alex, I want to use this trick twice (or more) in one page (so there are 2 crossfading for 2 different categories), how do I achieve this?
Alex, I heartily thank you for this approach - it’s just what I’ve been thinking of for my featured posts, but each of the other content gallery methods I’ve seen left something to be desired - additional posting in a separate plugin admin, for instance. Your CSS was so flexible that I was able to fully maintain the look and feel of my blog’s existing layout.
Really, really tremendous. Thank you!
Alex, I have noticed one drawback with this approach. It came to me that people who block javascript in their browsers (for security reasons, perhaps) might wind up seeing all of the featured posts at once, laid over the layout of the blog. That is, in fact, what happens. Any suggestions for a workaround - if no javascript, then the most recent featured post, perhaps?
Just to close out my earlier comments: I solved the no-javascript problem by changing the height attribute of the cf_wrapper to a min-height attribute. That ensures that for non-javascript visitors, the array of featured posts will simply push down the rest of the content in that column rather than spilling over it. Degrades nicely, as they say.
Firstly, sorry for not replying to comments sooner, I’ve been away for a few days.
@Sue - Thanks for the feedback, I appreciate it, and I hope you get it sorted with your excerpts.
@’ryan - There are a few things you need to change when you create the second instance of this. Change $featured_posts to something else each time it appears, and change the category in category_name. you also need to change $div_ids[] to something else, and then use that same variable in the javascript, which all needs repeating for the second instance. I hope that’s clear and works! Let me know if you need any more help.
@Phil - Thanks for the thanks! And nice spot on the no-javascript point, I’d forgotten about that despite helping someone with it in the WP support forums the other week! I’ll look at your suggestion and incorporate it into the post. Thanks!
Hi Alex, your tips works out great, I missed out to changed the $div_id[] in my previous attempts. Thank you so much!
Alex, I found that even the overlap fix I established for non-JavaScript browsers didn’t solve the problem in (drumroll) IE6. I did find a nice little solution, though: an “auto” min-height hack to add to the cf_element and cf_wrapper selectors in the stylesheet.
Well, that unfirtunately doesn’t work for me, Phil. It still lays the images down over the sidebar content. Mine is probably due to the fact that it lies outside of the widgetized areas, so I still have no solution. Yours is working great, btw.