Creating A Dynamic Crossfading Image Display Of Recent Posts
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(); ?>">:
1 2 3 | <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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | #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: absolute; top: 150px; } |
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 (284)
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!
There are updates to this post that resolve the no javascript issue, please click to the next page to see them.
20 Comments - Add Yours!
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.
@all – I have added info on making the display work with javascript turned off, please let me know if you encounter any problems
I’m having trouble getting this to work with WordPress Mu. Do I need to modify the code in any way? I feel like I shouldn’t…
Thanks.
@Josh – Thanks for the feedback. I’ve actually never looked into WPMU, so unfortunately I can’t say if the code should work on that platform, other than the code is normal JavaScript and PHP. Does the WP_query object exist in MU? And my server is on PHP5 and it works for me, so not sure if that is the issue.
Actually, it may be that the PHP code doesn’t work with PHP5. Perhaps I’ve just made some stupid mistake.
crossfading wordpress plugin for head images would not be bad…
@Alex – There are so many out there already that I didn’t think it worth it, but if I have some free time I might do it!
Hey Alex, Thanks for replying back in July. I’m still having the same problem, getting this error message:
Warning: Invalid argument supplied for foreach() in /nfs/c05/h02/mnt/72270/domains/theabilityproject.com/html/wp-content/themes/tap/home.php on line 141.
Warning: implode() [function.implode]: Bad arguments. in /nfs/c05/h02/mnt/72270/domains/theabilityproject.com/html/wp-content/themes/tap/home.php on line 144.
Any idea what this means? It’s coming up within the script that you put directly into the wordpress page.
Thanks – Josh
Hi Josh, Sorry you’re still getting errors on this. A couple of things to look at: make sure that the
$div_idsused at the start of your WordPress loop is the same variable as you used in the foreach loop; Also, make sure that"'cf".$id."'"is a double quote, then a single quote, cf, double quote, period, $id, period, double quote followed by a single quote and another double quote..!If that still doesn’t work then comment back again, and maybe we can sort something out!
Hi, the example doesn’t load up? does it have a new webpage.
As pretty sure your idea is exactly what i’m looking for.
Thansk