Creating A Dynamic Crossfading Image Display Of Recent Posts
Update
So, I want to incorporate some of the info in the comments below into the post, such as the no javascript issue.
No Javascript Issue
As Phil discusses in the comments, for those users who have javascript disabled, things look less than pretty. So what should we do? We’ll look at each of the options in turn, and hopefully find a solution that works.
What about if we decide to use absolute positioning on our #cf_wrapper and .cf_element, to keep everything at the top? Well, initially, this seems like a good solution, until we realise that the post that ends on top is not the most recent. Also, because the text in the .featured_text is generated from the_excerpt, we don’t know how long it’s going to be, and therefore we get some strange overlaps with our text at the bottom. I’m not such a fan of this method any more!
So how about just displaying Just displaying one recent post. The advantages of this method are that nothing in our layout is effected, and everything looks just how it should, without the crossfading of course! So I started to look into how I could achieve this, and well, it doesn’t look great. First of all I played with the <noscript> tag, but this doesn’t prevent the rest of the normal version being created through the PHP, and hence we end up with two sets of displays. I came across an idea where a hidden form is used to check if javascript was enabled in the browser, but I didn’t like the idea of that. So I ditched this idea too.
We finally come to the min-height ‘hack’. By giving our #cf_wrapper and .cf_element a min-height, it pushes everything down underneath our featured posts, and prevents our images from overlapping the rest of our content. As Phil explains, adding min-height to the css for the #cf_wrapper works for everything but IE6 and he therefore mentions another hack that solves the issue. However, in Chrome at any rate, things still don’t sit completely right. This is our best bet so far, so I’m hoping the extra CSS work that’ll be needed is going to be worth it!
So, first of all, the min-hack should like this:
1 2 3 4 5 6 7 | #cf_wrapper { margin-top: 20px; width: 320px; min-height: 320px; height: auto !important; height: 320px; } |
We now need to make our .featured_text sit level with the bottom of our image, so we change the positioning to relative. We now need to say where to position it relatively. Since our .header is already being moved up relatively, to .cf_element, we need to take this into account. I added a min-height to the .header of 50px, with a margin of 5px on the top. So this tells us that we need to move our .featured_text up 55px.
But why add a min-height value? Well if we have a title that runs on to 2 lines, the background isn’t going to stretch far enough, so the min-height allows it to get bigger if needed.
So we now have the following.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .header { width: 320px; min-height: 50px; margin-top: 5px; background: #111111; color: #ffffff; opacity: 0.8; position: relative; top: -150px; } .featured_text { background: #111111; border-top: 1px solid #000000; color: #FFFFFF; width: 310px; padding: 5px; position: relative; top: -55px; } |
This should make everything fall inline! Nice. Plus, it works in IE6!
There are still 2 issues with this though. Firstly, when a title takes up two lines, there is a gap between the image and the text. If a lot of your titles are longer, and take up more lines, then you can adjust the CSS to fix difference. Secondly, what if we want 10 posts crossfading in our normal display, then everything else on the site is going to drop too far down the screen, and our otherwise lovely theme could be ruined, a bit of a stumbling block.
I’m actually quite happy with this, and despite the few hours of work (firebug and Chrome developer tools don’t work with javascript turned off), I think we have a reasonable CSS only fix.
The CSS should now look like this:
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 36 37 38 39 40 41 42 | #cf_wrapper { margin-top: 20px; width: 320px; min-height: 320px; height: auto !important; height: 320px; } .cf_element { width: 320px; min-height: 150px; height: auto !important; height: 150px; margin-bottom: 10px; } .header { width: 320px; min-height: 50px; margin-top: 5px; 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: relative; top: -55px; } |
Please leave comments if this doesn’t work for you, or if you can improve on what I’ve done, or if you’ve used the idea somewhere.
19 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!