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:
- I renamed the container div class (adding the numeral “2” in line 1) to avoid competing with style rules in the NGG style sheet.
- I then created a new container div (class of “item-container”, line 2) to contain the thumbnail image and all the “meta” stuff.
- I wrapped the “meta” stuff in a div with a class name of “meta” (line 8).
- 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.
I was searching for NextGen Gallery Compact Album Mods | nSiteful Tech Blog on google and i found your blog! Thanks
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.
Mark – Can you provide the URL?
Yes, of course. Example page with album – http://ma-lkmodels.ru/boys/
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:

Here’s the after, with that margin:
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.
Hi Jeff!
Can help with one more thing? I noticed that in the album galleries preview with big names violate the order of other previews. Do you think it can be corrected? Look at the end of this page for example – http://ma-lkmodels.ru/girls/
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