DiggingIntoWordPress

by Chris Coyier & Jeff Starr

Thumbnail Based Archives

Posted by on

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 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 it out:

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 elements 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, the image, and an 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 (404 link removed 2013/01/31) and mousewheel (404 link removed 2013/03/03)), 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='http://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 in time. Are they super practical? Maybe not, but they are fun!

15 Responses

  1. And where can one find this awesome piece of programming in action?

  2. Doesn’t work properly in Opera – can’t move past first screen of thumbs, weirdly behaving double scroll bars at the bottom.

  3. 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.

  4. I 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!

  5. Seems more appropriate for the related posts section instead…

  6. 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.

  7. There’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. Check it out at http://www.prelovac.com/vladimir/wordpress-plugins/snazzy-archives

  8. Julian July 27, 2010

    cool man
    then, every post should be have at least one image attachment, isn’t it?

  9. Hi Chris,

    This is not related to this post, it rather relates to http://digwp.com/2010/02/custom-css-per-post/. 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.

    • 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.

      • Thanks Chris,

        I have been thinking about purchasing the book for quite sometime now. You gave me a reason enough.

  10. Cool 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 http://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 call

    var 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.

    • 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.

Comments are closed. Contact us with any critical information. Thank you!

Code is poetry