Just recently I did some WordPress development work for a graphic design company. I thought their portfolio section was quite nice and used a few custom NextGen Gallery templates to pull it off. Here’s how I did it (mostly so I can do it again easily, but I hope this might help someone else too!).
Here’s a screenshot of the finished album:

And here’s one of the galleries:

(This post assumes you’ll need both Albums and Galleries, if that’s not the case, skip ahead as needed.)
After setting up each of the galleries and the album in NGG with some sample photos, I made two custom templates based off the existing NGG ones: album-clientname.php from album-extend.php, and gallery-clientname.php from gallery-caption.php. To make these, open the NGG plugin and you’ll find the original templates in the /view folder. Copy them and paste them into a new /nggallery folder in your theme, then change the names as needed. Don’t forget to then go to the album and gallery pages in your site and change the shortcode to match the new template names:
[ album id=1 template=clientname] and [ nggallery id=1 template=clientname]
You’ll remove that extra space between the opening bracket and the first word in your own shortcode.
Here is the code for album-clientname.php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
|
<?php /** Custom Mortensen Template Page for the album overview (extended) You can check the contents 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 ($galleries)) : ?> <div class="ngg-albumoverview"> <!-- List of galleries --> <?php foreach ($galleries as $gallery) : ?> <div class="ngg-album"> <div class="ngg-thumbnail"> <a href="<?php echo $gallery->pagelink ?>"><img class="Thumb" alt="<?php echo $gallery->title ?>" src="<?php echo $gallery->previewurl ?>"/></a> </div> <div class="ngg-albumtitle"><span class="album-caption"><a href="<?php echo $gallery->pagelink ?>"><?php echo $gallery->title ?></a><span></div> </div> <?php endforeach; ?> <!-- Pagination --> <?php echo $pagination ?> </div> <?php endif; ?> |
And the code for gallery-clientname.php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
|
<?php /** Custom Mortensen Template Page for the gallery overview with captions 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)) : ?> <div class="ngg-galleryoverview" id="<?php echo $gallery->anchor ?>"> <!-- Thumbnails --> <?php foreach ( $images as $image ) : ?> <div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> > <div class="ngg-gallery-thumbnail" > <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 class="caption-box"><span class="alt-caption"><?php echo $image->alttext ?></span></div> </div> </div> <?php if ( $image->hidden ) continue; ?> <?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?> <br style="clear: both" /> <?php } ?> <?php endforeach; ?> <!-- Pagination --> <?php echo $pagination ?> </div> <?php endif; ?> |
I didn’t change them too much; in the gallery template I removed some unneeded code and added a container around the alttext (which I’m using for the title on top of the thumbnail). In the album template, I removed the photo number and moved the album title, again adding a container to make it easier to style with CSS.
Here are the styles for the album – pretty simple:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
|
.ngg-albumoverview { margin-top: 0; } html>body .ngg-album { border: 0 !important; float: left; margin: 0 42px 42px 0; padding: 0 !important; position: relative; width: 186px; } .ngg-album .ngg-thumbnail a img { border: 4px solid #a0a2a2 !important; margin: 0 !important; padding: 0 !important; height: 178px !important; width: 178px !important; } .ngg-album .ngg-thumbnail img:hover { border: 4px solid #c4c7c7 !important; } .ngg-albumtitle span.album-caption { background: url(images/gallery-caption-bg.png) top left repeat; left: 4px; padding: 10px; position: absolute; text-align: left; top: 4px; width: 158px; z-index: 20px; } .ngg-albumtitle span.album-caption a { color: #fff; font-family: questrialregular, 'Helvetica Neue', Helvetica, sans-serif; font-size: 29px; font-size: 2.9rem; text-shadow: 0 1px 1px rgba(0,0,0,.3); } |
Here’s the styling for the galleries:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
|
.ngg-galleryoverview { margin: 0 0 15px; padding: 00; width: 100%; } .ngg-gallery-thumbnail-box { border: none; float: left; margin: 0 42px 42px 0; padding: 0; width: 186px; } .ngg-gallery-thumbnail { position: relative; } .ngg-gallery-thumbnail a img { border: 4px solid #a0a2a2 !important; margin: 0 !important; padding: 0 !important; height: 178px !important; width: 178px !important; } .ngg-gallery-thumbnail img:hover { border: 4px solid #c4c7c7 !important; } .ngg-gallery-thumbnail .caption-box { background: url(images/gallery-caption-bg.png) top left repeat; left: 4px; padding: 10px; position: absolute; text-align: left; top: 4px; width: 158px; z-index: 20px; } .ngg-gallery-thumbnail span.alt-caption { color: #fff; font-family: questrialregular, 'Helvetica Neue', Helvetica, sans-serif; font-size: 29px; font-size: 2.9rem; text-shadow: 0 1px 1px rgba(0,0,0,.3); } |
For the gallery, I also needed to use a modified page-title on those pages that would show over the header image:
|
.page-template-galleries h1.page-title { color: #fff; font-family: questrialregular, 'Helvetica Neue', Helvetica, sans-serif; font-size: 56px; font-size: 5.6rem; left: 10px; position: absolute; text-shadow: 0 1px 1px rgba(0,0,0,.3); text-transform: capitalize; top: -115px; z-index: 10; } |
I made a new page template called page-galleries.php to use for the gallery pages so I’d have a body style I could hook into.
All in all this took about an hour to do, start to finish. I think it’s a nice-looking portfolio and I hope you find this useful!