Creating a Gallery and Albums Without a Gallery Plugin

A few months ago, I wrote about our experience in porting a site from CMS Made Simple to WordPress and the difficulty in finding similar plugins to replace the CMSMS modules the site was using. Turns out that the popular WordPress plugin Next Generation Gallery conflicted with the one plugin we found that worked well to display the site’s online documents. So we decided to find a solution to recreate photo albums without using a plugin.

We now have a nice solution to this problem that is easy to maintain. We used a page as the Gallery main page that lists each individual album with a thumbnail and description (which is an excerpt rather than a full post), which links to the chlld page under that main gallery page.

The child pages contain galleries created using the WordPress media feature. The problems we ran into were that, first of all, pages do not usually contain excerpts. If you attempt to just pull in the page’s post area (which is normal WP behavior), you end up with WP trying to display the entire description text AND all the images on the main gallery page. We don’t want that. All we want is the main thumbnail and the description (excerpt).

To solve the problem, we created a script on the gallery page to pull in child pages and edited the functions.php file to allow pages to have excerpts, and put the description in the excerpt box. When you point the main gallery page to the excerpt in the child pages, this works to display the album list nicely on the main gallery page.

HOWEVER (you knew there would be a “however,” right?), if you want the album to display its appropriate description and the gallery images on the child subpage, you have to also enter them in the main content area on the child page. So it’s just an extra bit of work to copy the description into the excerpt box on each child page.

The good news is that the main gallery page takes care of itself. There is nothing in the content box on the main gallery page. The code in the template takes care of pulling in all of the child pages, in alpha order. (You can, of course, modify the code so that it sorts by the age of the album also, latest on top or earliest on top.)

Functions.php Code

Add the following code to your functions.php file to turn on page excerpts.

// Turn on Excerpts for pages
add_post_type_support( 'page', 'excerpt' );

The Main Gallery Page Template

The next step is to create a custom page template for your main gallery so that it pull sin all that page’s child pages and displays them according to plan.

<?php
/*
Template Name: Main Gallery Page
*/
?>
<?php get_header(); ?>
<!-- PAGE-GALLERY-MAIN.PHP -->
	<div id="wrap">	
		<section id="content" class="primary" role="main">
		<?php if ( function_exists( 'breadcrumb_trail' ) ) breadcrumb_trail(); ?>
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>		
			<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				
				<h2 class="page-title"><?php the_title(); ?></h2>
				<?php edit_post_link(__( 'Edit', 'zeeTasty_lang' )); ?>

				<div class="entry clearfix">
						
					<?php the_post_thumbnail('medium'); ?>
					<?php the_content(); ?>
<div class="gallery_wrap">

<!-- Child Page Code to Pull in Gallery Child Pages onto Main Gallery Page-->
<?
$child_pages = $wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_parent = ".$post->ID." AND post_type = 'page' ORDER BY menu_order", 'OBJECT');

if ( $child_pages ) :
    foreach ( $child_pages as $pageChild ) :
        setup_postdata( $pageChild );
        $thumbnail = get_the_post_thumbnail($pageChild->ID, 'thumbnail');
        if($thumbnail == "") continue; // Skip pages without a thumbnail
?>
		<h4><a href="<?= get_permalink($pageChild->ID) ?>" rel="bookmark" title="<?= $pageChild->post_title ?>">
		<?= $pageChild->post_title ?></a></h4>

		<div class="child-thumb">
		<a href="<?= get_permalink($pageChild->ID) ?>" rel="bookmark" title="<?= $pageChild->post_title ?>"><?= $thumbnail ?></a>
        </div><!-- /.child-thumb -->
		<div class="child-summary">
		<?= $pageChild->post_excerpt ?>
		</div><!-- /.child-summary -->
<div class="clear"></div>
<?
    endforeach;
endif;
?>
<div style="clear:left;"></div>
<!-- /end custom code -->

The Gallery Child Pages Template

You can use your theme’s main page.php template to create the gallery child template. All you need to do is remove the call to the thumbnail.

<?php the_post_thumbnail('medium', array('class' => 'alignleft')); ?>

And now here are the resultant main gallery page and a child album page!

Joni

Joni Mueller has been designing web sites for hire since 2003, when she first blew up her web host’s server by insisting on running Greymatter. Since then, Joni has designed for Blogger and Movable Type, TextPattern, WordPress and CMS Made Simple. She lives with her cat and shoe collection in a bucolic old section of Houston called Idylwood. For some strange reason, Joni likes to refer to herself in the third person. When she’s not working on web design, she’s ordering lawyers around. And blogging about it. Or both.

www.jonimueller.com