The following is a tutorial for the jQuery library, which animates a list of div blocks, each with a slider that animates on mouseover. Additionally, we will be using PHP to first build the set of blocks on page load, populating their elements accordingly with content filtered from a WordPress query. You can easily adapt this tutorial to non-PHP content for a simple thumbnail gallery, or add it to more complex code for any other many creative uses.

You can see a demonstration of the effect we will be building below, and a more complex version in use throughout my site.

First, let’s set up the desired HTML structure for our box set.

<div id="the-box-container">
	<div id="box#" class="each-box"> 

		<div class="inner-dropshadow"></div>
		<span class="box-thumbnails"></span>

		<div class="the-box-slider">
			<span class="box-metadata">
				<span class="commentcount"></span>
				<span class="published-date"></span>
			</span>
			<span class="box-summary"></span>
		</div>

	</div>
</div>

So what we have here is a root container that holds all the individual boxes, each of which contains a thumbnail, a dropshadow, and a slider. Each slider then holds a span which acts as the transparent “tab” containing the post date and comment, and another span that holds the post description.

We use the following CSS to style and position the elements.

div, span, a, img
{
	font-family:Arial, Helvetica, sans-serif;
	border:0;
	outline-style:none;
	text-decoration:none;
}

#the-box-container
{
	width: 450px;
	position:relative;
}

div.each-box
{
	background:#F5F5F5;
	border:1px solid #999;
	font-size:11px;
	height:128px;  /* your desired height */
	width:128px;
	overflow:hidden; /* masks the slider */
	position:relative;
	float:left;
	margin-right: 4px;
	margin-bottom: 4px;
	z-index:1; /* below shadow and slider */
}

span.box-thumbnails
{
	position:absolute;
}

div.inner-dropshadow
{
	background:url('./images/shadowoverlay-trans.png');
	width:128px; /* must specify width and height of empty div */
	height:128px;
	position:absolute; /* absolute so it sits on top */
	z-index:2; /* between box and slider */
}

div.the-box-slider
{
	background:#999;
	height:128px;
	position:relative;
	top:128px; /* should be the same as your box height */
	z-index:3; /* on top of everything */
}

span.box-metadata
{
	background:url('./images/overlay.png');
	font-weight:700;
	width:128px;
	height:25px;
	margin-top:-25px; /* set to height */
	position:absolute;
}

span.commentcount
{
	background:url('./images/comments.gif') no-repeat left center;
	color:#dedede;
	float:right;
	font-size:9px;
	margin-right:6px;
	margin-top:7px;
	padding-left:15px; /* pushes the number to the right of the comment image */
}

span.published-date
{
	border-bottom:none;
	color:#dedede;
	float:left;
	font-size:9px;
	margin-left:5px;
	margin-top:7px;
	text-transform:uppercase;
}

span.box-summary
{
	color:#444;
	font-size:9px;
	margin-left:3px;
	overflow:hidden;
	padding:1px;
	position:absolute;
}

span.box-summary h3.post-title
{
	font-size:10px;
	font-weight:700;
	line-height:1.3em;
	margin-bottom:0.25em;
}

That’s a decent amount of CSS, some of it less important than others. Of note, you’ll see each slider is pushed down to the bottom of the div where you can’t see it, since div.each-box overflow is hidden. The slider’s transparent “tab,” is offset to the top in proportion to it’s height, allowing it to poke out from the bottom. The background is a transparent PNG. The drop shadow sits on top of the image, but below the slider and also uses a transparent PNG for the background.

Adding a few extra boxes in order to emulate our desired states, you should have a basic template similar to this:

Now that we know what we want, we can write our PHP code to build these boxes for us. We’re going to write a function that takes a query, and echo’s out the resulting content in the format of the schema we’ve created above. Keep in mind our code will be calling WordPress internal functions, and therefore will only run successfully from inside a theme or plugin unless you include wp-load.php. For our demo, we will be including wp-load since our demo folder lies outside the wordpress directory.

function box_posts($count, $cat, $w, $h, $summarywordlimit) {

  global $post;
  $boxquery = 'showposts=' . $count . '&category_name=' . $cat;
  $query = new WP_Query($boxquery);
  $i = 1;
  $boxcode = '';

  if ( $query->have_posts() ) {
     $boxcode .= '<div id="the-box-container">';
     while ($query->have_posts()) : $query->the_post() ; 

         $thumbnail = get_post_meta($post->ID, 'thumb', true);
         $thumbnail = get_bloginfo('template_directory') . '/library/timthumb.php?src=' . $thumbnail;
         $thumbnail = $thumbnail . '&w=' . $w . '&h=' . $h . '&zc=1';

         $excerpt = strip_tags(get_the_excerpt());
         $excerpt = strip_shortcodes($excerpt);
         $excerpt = explode(' ', $excerpt, ($summarywordlimit + 1));

         if(count($excerpt) > $summarywordlimit) {
           array_pop($excerpt);
           $excerpt = implode(' ', $excerpt) . '...';

         } else {
           $excerpt = implode(' ', $excerpt);
         }

         $boxcode .= '<div id="box' . $i . '" class="each-box">';
         $boxcode .= '<div class="inner-dropshadow"></div><span class="box-thumbnails">';
         $boxcode .= '<a class="thumblink" href="' . get_permalink() . '">';
         $boxcode .= '<img src="' . $thumbnail . '"></a></span>';
         $boxcode .= '<div class="the-box-slider"><span class="box-metadata">';
         $boxcode .= '<span class="commentcount">' . get_comments_number() . '</span>';
         $boxcode .= '<span class="published-date">' . get_the_time( get_option('date_format') );
         $boxcode .= '</span></span>';
         $boxcode .= '<span class="box-summary"><a href="' . get_permalink() . '" rel="bookmark">';
         $boxcode .= '<h3 class="post-title">' . get_the_title() . '</h3></a>';
         $boxcode .= $excerpt . '</span></div></div>';  

         $i++;

     endwhile;
     echo $boxcode .= '</div>';
  }
}

That’s quite a bit of PHP, so let’s break it up and explain what’s happening.

function box_posts($count, $cat, $w, $h, $summarywordlimit) {

   global $post;
   $boxquery = 'showposts=' . $count . '&category_name=' . $cat;
   $query = new WP_Query($boxquery);
   $i = 1;
   $boxcode = '';

   if ( $query->have_posts() ) {
      $boxcode .= '<div id="the-box-container">';
      while ($query->have_posts()) : $query->the_post() ;
...

This is the start of our function, which as you can see takes a set of arguments.
$count = how many boxes you want to display
$cat = the wordpress category we’re querying
$w, $h = the width and height of our box (for image resizing)
$summarywordlimit = how many words we’re going to let our excerpt in the slider show

For your use, you may want to gut the arguments, and pass only a complete query into the function, but for the demo, we’ll keep it as is. Your theme functions may also already have similar components of our box function, in which case you may re-delegate and combine code rather easily.

We’re going to create a new WordPress query, showing only so many posts within the category of our preference. Obviously, you can rebuild this query to suit your individual purposes. Next, we set $i to 1, which will be our loop iteration variable. We clear $boxcode, which will be our HTML string, add the-box-container, then start our WordPress Loop.

...
         $thumbnail = get_post_meta($post->ID, 'thumb', true);
         $thumbnail = get_bloginfo('template_directory') . '/library/timthumb.php?src=' . $thumbnail;
         $thumbnail = $thumbnail . '&w=' . $w . '&h=' . $h . '&zc=1';

         $excerpt = strip_tags(get_the_excerpt());
         $excerpt = strip_shortcodes($excerpt);
         $excerpt = explode(' ', $excerpt, ($summarywordlimit + 1));

         if(count($excerpt) > $summarywordlimit) {
           array_pop($excerpt);
           $excerpt = implode(' ', $excerpt) . '...';

         } else {
           $excerpt = implode(' ', $excerpt);
         }
...

We’re now within the loop, and we’re going to establish a few elements of our box. Specifically, we need to resize our thumbnail and post excerpt to fit within the box properly. We’re going to use timthumb to crop and resize our thumbnails..but you can use phpthumb, imagemagick, or remove the resizing code and simply create thumbnails to the desired dimensions manually. Our posts will include a custom field (key), called “thumb” which holds the path to our images.

get_post_meta() is a WP function that pulls info from each of your posts, which we will use to find our thumb key. We will store it’s URL in $thumbnail, then pass it to timthumb using our $w, $h as constraints.

Next we use get_the_excerpt() to pull the summary from our posts. We strip all html tags and any WP shortcodes, then split the string into an array using explode(). We delimit our string by the spaces between words, and limit the split to our $summarywordlimit + 1. What this does, is split every word up to our target limit, keeping the rest of the excerpt as the last element of the array. We then count the words in the array, and if greater than our limit, we drop the last element with array_pop(). We then build a new string from the result, and if necessary, add ‘…’ to the end.

...
         $boxcode .= '<div id="box' . $i . '" class="each-box">';
         $boxcode .= '<div class="inner-dropshadow"></div><span class="box-thumbnails">';
         $boxcode .= '<a class="thumblink" href="' . get_permalink() . '">';
         $boxcode .= '<img src="' . $thumbnail . '"></a></span>';
         $boxcode .= '<div class="the-box-slider"><span class="box-metadata">';
         $boxcode .= '<span class="commentcount">' . get_comments_number() . '</span>';
         $boxcode .= '<span class="published-date">' . get_the_time( get_option('date_format') );
         $boxcode .= '</span></span>';
         $boxcode .= '<span class="box-summary"><a href="' . get_permalink() . '" rel="bookmark">';
         $boxcode .= '<h3 class="post-title">' . get_the_title() . '</h3></a>';
         $boxcode .= $excerpt . '</span></div></div>';  

         $i++;
     endwhile;
     echo $boxcode .= '</div>';
  }
}

Now we get to build each box by adding html to $boxcode. This is rather self-explanatory. Our $boxcode string could be written in as little as one statement, as we’ve divvied it up here only for readability.

Our box div id is appended with our iteration counter. We get our title from get_the_title(), comments number from get_comments_number(), published-date from get_the_time(), and a link to the post from get_permalink(). At the end of the loop we add 1 to our iteration counter and close the loop. We only close our parent div container and echo out all the html from $boxcode once there are no more posts left in the query.

If all goes well, you should see something similar to the below boxes by calling the function with box_posts(3, art, 128, 128, 13); …assuming you have an art category. You can check to make sure the summary is there by temporarily changing the CSS, either by setting the box overflow to visible, or by adjusting the slider position. For the test below, we’ve overridden the style-sheet with some inline css for div2 and 3, simply to show that the excerpt is there. The overridden CSS is identical to our first style template example.

Now comes the fun part, where we animate these elements with some jQuery! You’ll need the jQuery color plugin, which is included for you in the WordPress scripts library. Hopefully you already know how to en-queue scripts with WordPress. Writing the jQuery hover function is actually the easiest part of the tutorial.

jQuery(document).ready(function($) {

	boxid = $('div.each-box');

	if (jQuery.browser.msie === false) {
		var ie = false;
		boxid.children('div.inner-dropshadow').css('opacity','.55')
	}

	boxid.hover(function () {
                // this is your mouse over section
		$(this).stop().animate({
				borderLeftColor : '#F5F5F5',
				borderRightColor : '#F5F5F5',
				borderBottomColor : '#F5F5F5'
			}, 500);

		$(this).children('div.the-box-slider').stop()
			.animate({ backgroundColor : '#F5F5F5' }, { queue:false, duration:500 })
			.animate({ top: '25' }, 250);

		if (ie == false) {
			$(this).children('div.inner-dropshadow').stop().animate({
					opacity : '1'
				}, 300);
		}

	} , function() {
		// this is your mouse off section
		$(this).stop().animate({
				borderLeftColor : '#999',
				borderRightColor : '#999',
				borderBottomColor : '#999'
			}, 800);

		$(this).children('div.the-box-slider').stop().animate({
				top: '128',
				backgroundColor : '#999'
			}, 800);

		if (ie == false) {
			$(this).children('div.inner-dropshadow').stop().animate({
					opacity : '.55'
				}, 800);
		}
	})
})

Pretty basic. We first select all the boxes, set the dropshadow to a lower opacity assuming you’re not on Internet Explorer, then attach a hover function to the boxes. We only adjust opacity of the dropshadow for browsers that support adjusting the opacity of transparent PNG’s. IE will end up filling all transparent pixels in with black, so we can’t have that.

The hover animations are pretty simple. We add a stop() to each to prevent queue build up, and then simply animate the elements we want. Our borders must be referenced by their location, ie: Left, Right, Bottom, Top. We add a queue:false argument to our slider so that both of it’s animations occur at the same time. We could combine them, except that for our desired effect, they’re using different durations.

We can access interior elements with children(), and other boxes with siblings(). If you decide to space the boxes with padding instead of margins, or you choose to simply have flush boxes, you may need to add additional animations for every box and not just the one targeted. This is because if the mouse doesn’t completely leave a box, and instead travels immediately to another without hitting a non-box element on the way, the mouse-off will fail to trigger correctly and you’ll have “stuck” boxes.

If all goes well, you should have something similar to the example below. Congrats!

We can do some other things with this to make it more complex. You can set the boxes to use absolute positioning and then use jQuery to position them as necessary, allowing you to create all sorts of patterns for your boxes. Since we applied a unique ID to each box while in the Loop, we can use that to manipulate specific boxes in any number of ways. The potential is limited only by your imagination and skill with JavaScript. Have fun experimenting, and if you have any ideas to improve upon the code here, or see any glaring issues, feel free to comment!

Tutorial files can be found here.

A large organization, especially one centered around any form of future model or business planning, will invariably have several broad-scope documents that are routinely updated and modified. These documents or master plans often encompass and direct the heart of an operation, especially when the organization is entirely focused on long-term development. Such “living documents” are routinely found as land-use and urban development general plans, asset management and life-cycle models, and requirements based mission plans for acquisition of systems.

Much time, effort, and money has been used within the last decade to keep these living documents on the crest of information technology and accessible as web-based or electronic publications. Many local and state government plans are available as PDF or downloadable documents, and federal enterprises often build elaborate web portals hosted on secure servers or local networks to allow for indexing and casual updates to content. There is unfortunately no single approach or proper model for the development of a web-based living document, and much of the decision making to proceed with new architecture is based on funds, experience with IT systems, and knowledge of the countless and rapidly expanding number of content management systems available for purchase as either commercial, off-the-shelf (COTS) packages or free for use as open source software (OSS). With an absence of this knowledge or experience, an organization may come to the conclusion that they will  be required to contract out for new development in order to meet their capability requirements.

Granted, sometimes there simply isn’t an easily obtained COTS or OSS solution to meet a system requirement — however, an organization should always first attempt to see if there’s a way to adopt one or more of these systems through customization and alteration. OSS software is almost always free to modify, and often times proprietary COTS software can also be built upon or customized with the permission and assistance of the owner. It is much cheaper and faster to adopt an already built 80% solution, budgeting only for the development to add the extra capability your living-document may require. Within a Federal Government enterprise, you also have the opportunity to request other organizations code or systems, assuming the US Government owns the rights. It is worth the time to review what other agencies have already built or purchased, and what content management or hosting systems are available to use either for free or through interdepartmental agreement.

An Open-Source Solution

One of the most often overlooked and fiscally elegant solutions available to an organization is a system that their employees are already extremely familiar with, use daily as a reference, but are unaware of it’s potential use for their own documents and organizational plan management. The Wikimedia Foundation is a non-profit entity that develops and maintains the popular encyclopedia Wikipedia. As the worlds largest and most popular reference work on the Internet today, it holds 14 million articles which expands daily through the collaborative input of scientists, educators, professional subject matter experts, and everyday users. While not disputing some of the criticism and debate behind it’s alleged flaws as a reference work and encyclopedia, the system behind this massive database is proven and widely lauded as one of the most efficient and feature rich content management systems for knowledge management and information hosting available today.

Written in beautifully optimized PHP with an SQL database to store all the content, MediaWiki is the power behind Wikipedia and an infinitely expanding number of smaller resources throughout the Internet. Many companies and small government agencies already use this free open-source software (distributed under a GNU Public License) for their own creative uses thanks to a rich community in support of developing, improving, and optimizing the code base. Countless new extensions, widgets, and modules are created and distributed every day to add new features and capabilities to the existing software.

Adopting MediaWiki within your organization is a rather trivial process. The installation is fully contained and can be completed successfully within a day by almost any capable developer with access to their web servers. Regardless of the architecture of your web-servers, MediaWiki can usually be installed without complaint or issue, requiring little or no modifications to fit within common enterprise configurations. Once successfully installed and tested, the Wiki itself can be themed and configured to suit your requirements with a bit of thought and patience.

Utilizing Wiki based Planning within the Air Force

As a pilot program, our organization authorized an install of MediaWiki 1.15 onto a development server running secure IIS5, PHP5, and MySQL 5.1. Installation and full customization was painless and completed within a week. Further customization and content loading was accomplished by one person over a period of a month, resulting in a demonstration of capability and performance for a sample installation General Plan. The most time-consuming aspect of the pilot was establishing new logical methods of organization and the display of hundreds of small content sections previously listed in a static plan of over 200 pages.

Thanks to the flexibility and the non-linear database system behind MediaWiki, a plan document is not limited to any single method of organization. Through continuing experimentation and research, users and content managers will find ever more efficient ways to categorize and display critical data, resulting in streamlined data and an improved user-experience for senior leadership and management review. By developing your business and life-cycle plans within a Wiki framework, you will truly be creating a living document that encourages users to regularly analyze and improve collaboratively upon the data within it.

Adapting a general plan model to a Wiki framework will require creativity and thoughtful analysis. The benefit of this critical review is that an organization will most likely find redundant or trivial sections and eliminate unnecessary or outdated information and processes. Throughout our pilot program, the organization was able to reduce and optimize a Cold-War era installation plan by over thirty percent, resulting in reduced workload and faster information processing for leadership.

Our pilot program was successfully briefed and demonstrated live to Headquarters Air Force after only two months of in-house development by a single action officer. The unique approach was critically praised by leadership, siting the almost zero cost of development, rapid deployment, and incredibly user-friendly experience. Fully indexed and versioned with history and comparison of every change dating back to the creation of the Wiki; noted discussions and review available behind each section and article; and easily administered control of users groups and permissions were all benefits of our program found to be critical and necessary in any future living document produced within the organization.

Planning for the Future

A full contract to update all sixteen Air Combat Command Installation General Plans was awarded soon after, calling specifically to move them to a MediaWiki framework. Due to difficulties in negotiations with Global Combat Support Services (GCSS), whom develop and operate the Air Force Portal, a plan to incorporate the Wiki framework within the GCSS network was abandoned in favor of utilizing the large and robust Intelligence Community Wiki, Intellipedia-Unclassified, hosted and managed jointly by the Director of National Intelligence and Intelligence Community Enterprise Services (DNI/ICES).

As of October 2009, Air Combat Command manages hundreds of articles relating to their sixteen Base General Plans currently being developed within Intellipedia-U, available to any uniformed service member and federal employee at home or abroad. Plans to incorporate and integrate other related business practices are currently underway, including but not limited to, Sustainable Development Plans, Environmental Assessments and NEPA documents, encroachment playbooks and Anti-Terrorism Force Protection assessments.

Not having much time, I built a poster using some materials I had lying around from other projects… and also turned that into a 60 second looping backdrop for the workshop. The clip was built in After Effects, and was rendered out so it would play on a 12 foot screen, between briefings and during the breakfast, breaks, and meet and greets. We used the same basic theme for the name tags and base placards. People loved them so much, that most of the placards disappeared at the end of the conference, and are probably sitting on someones desk down at the various bases.

The name tags were printed on recycled paper, and the sleeves are bio-film, biodegradable plastic, courtesy of BioTech/KleerTech.

After the conference, I ended up exporting a smaller, cropped version of the looping background for use on the AF Portal. This is what you’re seeing here now.

The design has been used on everything from conference materials, shirts, bags, conference room walls, floor mats, and hats. Walking through the halls, I see it printed out and pasted on people’s doors and walls. It’s odd seeing your own work being distributed without any involvement from yourself.

IIR User Guide Cover

The ACC Installation Infrastructure Report Database System was a project I oversaw sometime last year (2008), where we developed a very slick leadership level roll-up report, in-house, with .net coding done by Bob Taylor from HB&A. I gave it a pretty thorough overhaul, polished it up, changed the CSS and icons, and embedded it into the AF Portal, to make it look like it does now — as well as changed some of the rules and categorization for various extensions. It’s very modular, and easily updatable by anyone who knows a bit of VB/.NET.

The framework pulls content from a very loose folder structure, so that the A7OI guys can just drop their sustain team reports in and keep on working. The application automatically sorts powerpoint briefs, word documents, pictures, and 332 Forms among other things. It can filter out project documents based on their text content, or just filter them out by extension. The installation rating itself is controlled by a rating text file for each section. This enables the end user to simply update the rating without knowing any code, or having to touch any sensitive data. The Application also supports archiving by year, so you can see how the installations evolve and fail to make changes and repairs to systems.

It’s a very slick rollup at a glance that the leadership loves since it looks pretty. Works very fast with minimal effort and the end user can just dump whatever they want into the database structure without worrying about formatting. I’m very happy with it, and I know the guys over at HB&A are too.