NextGen Gallery Compact Album Mods

Share this!
This article describes how to customize aspects of the NextGen Gallery plugin by modifying an NGG template and making corresponding CSS modifications.

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:

Before

After:

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.

Share this!

About JeffCohan.com

The nSiteful Tech Blog (the official blog of nSiteful Web Builders, Inc. since January of 2013) is where I (Jeff Cohan) and (occasionally) associates will be posting articles of potential interest to like-minded techies, nSiteful clients who are playing active roles in the maintenance of their own Web sites and blogs, and pretty much anyone interested in how Web strategies and tools can help them reach their goals.

This entry was posted in Snippets and tagged , , , , by Jeff Cohan. Bookmark the permalink.

About Jeff Cohan

Jeff and his wife, Margie, are the proud parents of Sarah and Jake. Jeff is the founder, president and chief cook and bottle washer of nSiteful Web Builders, Inc., a Web development and Internet Consulting firm. In his spare time, Jeff builds Web sites and Web applications, plays guitar, putters around in his basement woodworking shop, mercilessly spoils his grandchildren, and creates videos from more than two decades of home movies. His current video project is an extended montage of people (mainly family members) asking him to stop filming them.

7 thoughts on “NextGen Gallery Compact Album Mods

  1. Thank you for this mod!!! That is exactly what I need.

    Can you just tell me how can I change distance between lower and upper album thumbs?
    And how to make the preview is below the text?

    Thank you.

        • If you’re asking how to increase the spacing between each row of thumbs, I’d do that by adding a ‘margin-bottom’ declaration to the stylesheet. Here is your CSS rule to which I’ve added a new line:
          .ngg2-album-compact .item-container {
          display: block;
          float: left;
          padding-right: 26px !important;
          width: 140px;
          margin-bottom: 48px;
          }

          Here’s the before: Before
          Here’s the after, with that margin: After

          To swap the positions of the preview image and text, you’d have to move those sections in the template file. But again, I recommend you do this in a cloned version of the template file which you store as described in my article. Hope this helps.

    • If I understand, your problem here is that a NextGen Gallery thumb container will push downward the thumb(s) below if the caption wraps to 2 lines or more.

      Probably the easiest solution is to alter your CSS for this…
      .ngg2-album-compact .item-container .meta
      …and give it an explicit height that large enough for the multi-line names to fit.

      HTH

Leave a Reply

Your email address will not be published. Required fields are marked *