So I was playing around with how to display archives of all the posts from the past 5 years or so here on Dabbled, and came up with this idea:  It’s a photo based archive that pulls a random selection of posts from a bunch of project related categories.  Just reload to see a different selection!   It was really fun to be reminded of old projects, interviews, and guest posts.

Go check it out: 48 Random Dabbled Posts from the Past

I have so much fun just reloading it and seeing what I get!

For how to make something like this for your own blog, read on..

How to create a random photo archive page (WordPress)

So, to build a page like this for your own site:

First, you’ll need to create a page template for it.  Easiest way to do that is to take your ‘page.php’ template, save it as photoarchive.php, then add to the very top:

<?php 
/* 
Template Name: photoarchive
*/ 
?>

Next your going to be replacing the content section of the page with a new query.  Go down to where you’re pulling the title of the page (look for <?php the_title(); ?>).  You’ll want to put your new query loop under that.  Get rid of the section that has the_content(); .

The query:

<?php global $wp_query;
 $args=array(
 'orderby' => 'rand',
 'cat' => '186,134,148,163,179,173,174,183,199,174,665,4',
 'posts_per_page' => 48 
 );

$new_query = null;
$new_query = new WP_Query($args);

while ($new_query->have_posts()) : $new_query->the_post(); ?>

[html to display the photos goes here]

<?php
endwhile;
wp_reset_postdata(); ?>

This is basically pulling 48 posts, chosen at random, from the categories listed (by category number).

Next you’ll need to add the html to display the thumbnail photos from each post, along with the title and a link back.

<!-- begin post -->
 <div class="relposts">
 <?php /* Image processing. checks if post thumbnail, then if Image attribute is set,
else it takes the first attached image*/ ?>

<?php $values = get_post_custom_values("Image"); ?> 

 <?php if(has_post_thumbnail()) { ?>
 <div>
 <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
 </div>

 <?php } elseif (isset($values[0])) { ?> 

 <a href="<?php the_permalink() ?>" rel="bookmark" title="Link to <?php the_title(); ?>"><div>
 <img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/ <?php $values = get_post_custom_values("Image"); echo $values[0]; ?> &w=150&h=150&zc=1&q=100" alt="<?php the_title(); ?>" class="center" width="150px" height="150px" /></a>
 </div>

 <?php } else { ?>
 <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
 <div><a href="<?php the_permalink(); ?>"><?php attachment_image ($post->ID, 'thumbnail', 'alt="' . $post->post_title . '"'); ?></a></div>
 <?php } ?>

 <?php /* End Image processing. */ ?>
 <div class="bottom reltext"><a href="<?php the_permalink(); ?>">
<?php the_title(); ?></a> </div>
 </div>
 <!-- end post -->

The whole thing is wrapped in a class called relposts (because i developed the style for related posts thumbnailing) .

Most of the above html (the teal stuff) handles getting the images (I really should pull that out into a function sometime).  Basically it says if the post has a ‘featured image’ then get it.  If it doesn’t, then look at see if the Image custom field is set, and grabs that url (because yes my blog has been around for a while and that was how timthumb handled thumbnailing- you can delete this!).  Then if not, then get the first attached image (which is calling a function called attachment_image to get that info).   Here is a function you can use to get the first attached image.

One note, every post should have a photo, so I didn’t add a default image option if no image was found, but I’d recommend adding that to your IF statement.

After we get the image, we’re just getting the post title/link (in it’s own div called reltext).

Then we use css to stack the text on top of the photo.  Here’s the relevant stuff:

.relposts {
float:left;
position:relative;
width: 160px;
margin-bottom: 2px;

}

.relposts .reltext {
position: absolute;
top: 0px;
left: 0px;
width: 150px;
background-color: rgba(255, 255, 255, 0.6);
padding: 4px;
}
.bottom {
top:auto!important;
bottom: 0px!important;

}

And that’s about it.  Create a new Page called Random Photo Archive, and set it to your new template!