NextGen Gallery Compact Album Mods

Last updated October 10th, 2018 at 08:06 am

You gotta love the NextGen Gallery plugin for WordPress. It is to image galleries in WordPress what Irfanview is to desktop image management.

But not everything about NGG is wonderful.

Take the compact album template, for example.

Today I ran into problems with the rendering of the the thumbnail images which correspond to the galleries within an album. Namely, these thumbnail images were distorted, being resized oddly by the CSS in the plugin’s stylesheet. In addition, the gallery names and image counts for each gallery — essentially the captions for each thumbnail — weren’t lining up quite right.

Before:

After:

Initially, I attempted to fix things simply by adding overriding CSS rules in my child theme style sheet. But after (a) going through hoops to write CSS declarations that defeated the bad stuff in the NGG style sheet and (b) seeing that the template itself could be improved, I revised my approach.

Sometimes it’s just easier to start from a nearly blank slate.

In a nutshell, I cloned and modified the NGG template file and then created new CSS declarations to target the new CSS classes.

Key Principle #1:

If your active theme includes a folder called nggallery and that folder includes a file whose filename is identical to the NGG template file that NGG is looking for, your theme’s template file will supersede the native NGG template file.

I’m using the “compact” album theme, whose filename is “album-compact.php”. So I located that theme in the “/view/” folder of the NGG plugin…

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

…and copied it into the new /nggallery/ folder of my (child) theme.

Rearrange Template Components

I prefer to wrap images and their caption information in a targetable container. I think that makes it much easier to position all the pieces properly.

The native NGG template didn’t do this. Note below that the native container — “ngg-album-compactbox” lines 2-8 — does not contain the album description, gallery title, or count of images:

Native NGG Template:

<div class="ngg-album-compact">
	<div class="ngg-album-compactbox">
		<div class="ngg-album-link">
			<a class="Link" href="<?php echo $gallery->pagelink ?>">
				<img class="Thumb" alt="<?php echo $gallery->title ?>" src="<?php echo $gallery->previewurl ?>"/>
			</a>
		</div>
	</div>
	<h4><a class="ngg-album-desc" title="<?php echo $gallery->title ?>" href="<?php echo $gallery->pagelink ?>" ><?php echo $gallery->title ?></a></h4>
	<?php if ($gallery->counter > 0) : ?>
	<p><strong><?php echo $gallery->counter ?></strong> <?php _e('Photos', 'nggallery') ?></p>
	<?php endif; ?>
</div>

So I made mods to my cloned template. They were few and simple:

1. I renamed the container div class (adding the numeral “2” in line 1) to avoid competing with style rules in the NGG style sheet.
2. I then created a new container div (class of “item-container”, line 2) to contain the thumbnail image and all the “meta” stuff.
3. I wrapped the “meta” stuff in a div with a class name of “meta” (line 8).
4. Then I created new CSS declarations in my child theme style sheet, targeting the new class names.

Here’s the template…

Customized Template:

<div class="ngg2-album-compact">
	<div class="item-container">
		<div class="ngg-album-link">
			<a class="Link" href="<?php echo $gallery->pagelink ?>">
				<img class="Thumb" alt="<?php echo $gallery->title ?>" src="<?php echo $gallery->previewurl ?>"/>
			</a>
		</div>
		<div class="meta">
			<h4><a class="ngg-album-desc" title="<?php echo $gallery->title ?>" href="<?php echo $gallery->pagelink ?>" ><?php echo $gallery->title ?></a></h4>
			<?php if ($gallery->counter > 0) : ?>
				<p><strong><?php echo $gallery->counter ?></strong> <?php _e('Photos', 'nggallery') ?></p>
			<?php endif; ?>
		</div><!-- .meta -->
	</div><!-- .item-container -->
</div><!-- .ngg2-album-compact -->

And here are the three new lines of CSS:

New CSS

.ngg2-album-compact .item-container {
	width: 140px;
	display: block;
	float: left;
}

.ngg2-album-compact .item-container img.Thumb {
	border: 4px solid #ccc;
}

.ngg2-album-compact .item-container .meta {
	font-size: .8em;
}

HTH. Comments and questions are welcome.