eric lightbody

Bringing a customized image gallery isn’t as easy as it should be. Many developers have tried to solve this problem, and in my opinion Alex Rabe has done an excellent job of doing so. He has developed a WordPress plugin called NextGEN Galllery which allows the author to easily update and manage photos, and (this is important) allow for almost complete customization on how the images are displayed. As a specific example on how to do this, I’m going to walk you through getting NextGen gallery and the awesome Galleria jQuery image gallery to get along.

Once you have the NextGen plugin installed and customized, it’s time to begin getting the gallery to display correctly using a custom template. Alex talks a bit about templates, but I don’t think there is enough information for beginning. The first step with nextGEN templating is to create the folder nggallery at the root of your theme’s directory. I like to start off with the plugin’s default gallery file when creating a template. To do that copy the file gallery.php from the nextGEN plugin directory to your newly created nggallery folder. Gallery.php can be found here:

wp-content/plugins/nextgen-gallery/view/gallery.php

You will see the structure of the default gallery in gallery.php, and it will definitely need some changes in order to work with galleria. Galleria needs an unordered list structure for the thumbnails and a div container for the large image. The most important part of gallery.php is the foreach loop that cycles through all the images and outputs the html to display. This is how it looks now:

<?php foreach ( $images as $image ) : ?>

 <div id="ngg-image-<?php echo $image->pid ?>" <?php echo $image->style ?> >
 <div >
 <a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
 <?php if ( !$image->hidden ) { ?>
 <img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
 <?php } ?>
 </a>
 </div>
 </div>

 <?php if ( $image->hidden ) continue; ?>
 <?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
 <br style="clear: both" />
 <?php } ?>

 <?php endforeach; ?>

We need to change it to output the proper html for galleria like so:

<?php foreach ( $images as $image ) : ?>
 <?php
 $imgCounter = 0;
 if ( !$image->hidden ) { ?>
 <li<?php if ($imgCounter == 0) : ?><?php endif; ?>><img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->url ?>" /></li>
 <?php } ?>

 <?php if ( $image->hidden ) continue; ?>
 <?php $imgCounter++;?>
 <?php endforeach; ?>

Notice how I used $image->alttext and $image->url. With knowing these basic properties, you can pretty much create any html your gallery plugin requires. Here is the full gallery.php file I modified:

<?php
/**
Template Page for the gallery overview

Follow variables are useable :

 $gallery     : Contain all about the gallery
 $images      : Contain all images, path, title
 $pagination  : Contain the pagination content

 You can check the content when you insert the tag <?php var_dump($variable) ?>
 If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
**/
?>
<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>

 <?php if (is_single()) : //only call full gallery if on single page ?>
 <!-- Thumbnails -->
 <div></div> <!-- container for main image -->
 <div>
 <!-- <ul>  -->
 <ul>
 <?php foreach ( $images as $image ) : ?>
 <?php
 $imgCounter = 0;
 if ( !$image->hidden ) { ?>
 <li<?php if ($imgCounter == 0) : ?><?php endif; ?>><img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->url ?>" /></li>
 <?php } ?>

 <?php if ( $image->hidden ) continue; ?>
 <?php $imgCounter++;?>
 <?php endforeach; ?>
 </ul>
 </div>
 <!-- Pagination -->
 <?php echo $pagination ?>

 <?php else : //if on post list then display single image ?>
 <div>
 <img title="<?php echo $current->alttext ?>" alt="<?php echo $current->alttext ?>" src="<?php echo $current->url; ?>" />
 </div>
 <?php endif; //list?>

<?php endif; ?>

You will need the accompanying javascript and css that go along with the plugin. Ideally, you only want to call this when a gallery is being displayed. I haven’t found a good way of doing this without editing nggallery’s files directly. Instead, at least for now, I add these files to the appropriate template files. In my case, I only needed to add them to single.php since the galleries are only being shown when a single post is being displayed. If anyone has an idea of how to limit these files to only when they’re needed, please let me know.

Now all you need to do is call the gallery in your blog post. This is done with the nggallery shortcode. Grab the id of the gallery you created, and throw this shortcode:

 [nggallery id=2]

You do have the option to have multiple gallery templates. Just create a new php file in your nggallery folder. Start the name of the file as gallery-, like gallery-example1. Then to use this non-default gallery, call it like this within your post:

[nggallery id =1 template=example1]