Thumbnail Based Archives
Here at Digging Into WordPress, we’ve attached thumbnail images to every single (non-link-style) post since day one. We started before WordPress 3.0 had the specific feature for thumbnails. We did it just by attaching a file path to the thumbnail image as a custom field. We clearly display each of those thumbnails in the design of the homepage and other various pages where it makes sense.
The biggest reason we decided to attach post thumbnails from the beginning was that it is just an interesting bit of data to have available for every single post. It means that we could do something like display random thumbnails in the sidebar, or display thumbnails next to search results. We don’t do either of those things in this current design, but it’s always a possibility and possibilities are always awesome.
Another thing that is a cool thing to build with thumbnails is unique archive views. I’ve built one for us here on Digging Into WordPress and I have some ideas for several more. Check out the live demo if Thumbnail Based Archives.
Read on for the “how”…
1. Created a special page template
This page will be totally unique, no standard header or footer, so I made a template just for it.
<?php
/*
Template Name: Thumb Archives - Horz
*/
?>2. Creating a horizontal row of thumbs
One of the best ways to create long horizontal row (that breaks the width of the browser window width) is to use a table with a single row of cells. This way we don’t have to manually set the width of anything, and also don’t have to worry about things wrapping as we would if the thumbnails were inline or floated.
So we’ll set up a loop querying for every single post on the site (that isn’t a link-post) and spit out a table cell for each. Within that table cell, there will be an anchor link pointing to the post which contains a title, image, and excerpt.
<table id="archives-table">
<tr>
<?php query_posts('posts_per_page=-1&cat=-52'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<td>
<a href="<?php the_permalink(); ?>" class="article-block">
<span class="title"><?php the_title(); ?></span>
<img src="<?php echo get_post_meta($post->ID, 'PostThumb', true); ?>" alt="" />
<span class="ex"><?php the_excerpt(); ?></span>
</a>
</td>
<?php endwhile; endif; ?>
</tr>
</table>3. Dependencies
We’re going to need a unique CSS file to use for this. Since this template is completely one-off and we aren’t using the standard header, the <head> element will be right in this template. We’ll link out to our own custom CSS file, load in jQuery, and load in some plugins that will facilitate the idea I’m trying to accomplish (hoverflow and mousewheel), as well as finally our own custom JavaScript file.
<head>
<meta charset="UTF-8" />
<title>Thumbnail Archives | Digging Into WordPress</title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo("template_url"); ?>/css/archives-horz.css" />
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script src='<?php bloginfo("template_url"); ?>/js/jquery.hoverflow.min.js'></script>
<script src='<?php bloginfo("template_url"); ?>/js/jquery.mousewheel.min.js'></script>
<script src='<?php bloginfo("template_url"); ?>/js/weirdarchives.js'></script>
</head>If this page was anything more than a one-off page, we should be enqueuing scripts and providing proper hooks in the header and such. I’ve specifically not done that here because this page is it’s own unique thing that I don’t want anything else intruding upon.
4. Style
The styling for page is very simple, just a repeating background image and resets. Notice on the page though that the titles and excerpts are hidden until the mouse hovers over the thumbnails. We’ll do the “hiding” by setting the opacity of the thumbnails down to zero in the CSS. We’ll also position them inset into the thumbnail a bit so they have a bit more dramatic “reveal” upon mouse hover, as they slide out and into place.
.title { bottom: 50%; }
.ex { top: 50%; font: 11px Georgia, Serif; color: #555; }
.title, .ex { background: white; width: 130px; padding: 10px; display: block; overflow: hidden; position: absolute; opacity: 0; }
5. Horizontal scrolling
With the mousewheel plugin in place, we can force the window to scroll horizontally instead of vertically with mouse scrollwheels with this:
$("body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});6. Animation
When a thumbnail is hovered over, the title and except will show themselves and slide down. To do that, I’m using jQuery’s hover function which accepts a function to run on mouseenter and a function to run on mouseleave. For the former, an animation begins which moves the position, height, and opacity. The latter, those values are returned to how they started.
$blocks.hover(function(e) {
var $el = $(this),
$title = $el.find(".title"),
$ex = $el.find(".ex");
$title.hoverFlow(e.type, { bottom: "99%", opacity: 1, height: $title.data("origHeight") })
$ex.hoverFlow(e.type, { top: "95.5%", opacity: 1, height: $ex.data("origHeight") });
}, function(e) {
$(this)
.find(".title").hoverFlow(e.type, { bottom: "50%", opacity: 0, height: 0 })
.end()
.find(".ex").hoverFlow(e.type, { top: "50%", opacity: 0, height: 0 });
});There is a bit more to the JavaScript (but not much), feel free to poke your way around to it from the demo page to see it all.
7. More
The point of all this was to create a unique archive browsing experience based around our thumbnails. This isn’t the only way to do it. In fact I have a few other ideas I’m going to work on as time allows. Are they super practical? Maybe not, but they sure are fun!
About the author
Chris Coyier is a real-world web designer who has been reaching for WordPress to power client sites for many years. He subscribes to the theory that not only is WordPress capable of powering any website it is almost always the right choice. His other projects include CodePen and Quotes on Design.
15 responses
-
RarstDoesn’t work properly in Opera – can’t move past first screen of thumbs, weirdly behaving double scroll bars at the bottom.
-
KonstantinAnd where can one find this awesome piece of programming in action?
-
Chris Coyier Post AuthorThere is a link in the article (as well as the one image in the article is linked), but also here.
-
Konstantin
Ah! :)
-
-
-
Awesome Chris. Just implement the “really long dropdowns solution” you wrote a tutorial on css-tricks a while ago and it’ll be even more awesome.
-
HassanI had the problem of how to arrange elements horizontally without specifying a width. Never thought of using tables for this. Works awesome. Thank you Chris!
-
Seems more appropriate for the related posts section instead…
-
Chris, you keep pumping out these great ideas don’t you!
So far this wouldn’t have really fit with any of the WP sites I have designed, but I am SO going to try and work it into the next one!Awesome tut.
-
NicolasThere’s a Plugin by Vladimir Prelovac which does a similar archives style. And I would think it could be fairly easy to integrate the thumbnail stuff in there.
-
Juliancool man. then, every post should be have at least one image attachment, isn’t it?
-
NitinHi Chris,
This is not related to this post, it rather relates to this DigWP tutorial. Since in my opinion, this was not as big an issues that I reach you via the contact form, I am seeking your guidance here itself
If I want to remove a sidebar I can use
#sidebar { display:none }and#content { width:100% }Essentially I am hiding my sidebar from humans, search engines can see it. We can also see it if we open the source files. Can there be any penalisation by search engines for this?Needless to say, my understanding of css & stuff is fairly limited. I just played a bit in Firebug. I am sorry of putting a totally unrealted question, but I seek your guidance. Thanks.
-
Chris Coyier Post Author
In the book, I suggest using custom fields for removing the sidebar. In all your templates where you output the sidebar, wrap it in a conditional tag that looks for the custom field `noSidebar`. If it’s present, then don’t output it. That’s the clean way that would save bandwidth and also hide it from search engines.
-
Nitin
Thanks Chris,
I have been thinking about purchasing the book for quite sometime now. You gave me a reason enough.
-
-
-
JustinCool post Chris,
I think the only thing to make this better would be to implement the horizontal scrolling plugin. All you would need is to link to
deanoakley.com/js/thw.js(he seems to be the only one with a recent copy i can find.) Also to handle the fact that there is a dynamic number of posts, just callvar TD=$('TD');
$('BODY').width(TD.length * TD.eq(0).width());I tested it out on your site using Chrome’s dev tools. Totally gives it that extra kick
-
Chris Coyier Post Author
I do have JavaScript based horizontal mousewheel scrolling in there. It works great in Firefox, but I just checked WebKit and for whatever reason it doesn’t work. Not sure if that’s a limitation of the plugin or if I screwed something up.
And regarding width, the whole point of using TD’s is because they will not wrap in a table row, so you don’t need to give the body an explicit width, it will just grow horizontally as needed.
-
