• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

nSiteful Web Builders

Building a Better Web - One Site at a Time.

  • Home
  • About
    • Testimonials
    • Resources
  • Web Sites
  • Online Marketing
  • WordPress Support
    • Customized WordPress Training
    • 60-for-60 Sessions
  • Web Applications
  • Blog
    • Archive Listing Minimalistic
    • Blog Articles Grouped by Category
    • Case Studies
    • General
    • Portfolio
    • Reviews
    • Snippets
    • Techniques
  • Contact Jeff
    • Purchase Retainer Consulting Hours
    • About Retainer Consulting Hours

By Jeff Cohan, February 9, 2012

NextGen Gallery Compact Album Mods

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

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.

Related Posts

  1. Customizing WordPress Using Vendor-Built Child Themes
  2. What to look for in WordPress themes: Pluggability
  3. Dynamic Linear Gradients for Background Images in Genesis
  4. Make Responsive Lightbox by dFactory Work with FooGallery
  5. FooGallery Plugin for WordPress: First Look
  • Choose the best match.

Written by Jeff Cohan · Categorized: Snippets · Tagged: NextGen Gallery, Photo Gallery, Plugins, WordPress

  • Choose the best match.

Reader Interactions

Comments

  1. ganhar dinheiro says

    June 5, 2012 at 12:30 pm

    I was searching for NextGen Gallery Compact Album Mods | nSiteful Tech Blog on google and i found your blog! Thanks

    Reply
  2. Mark says

    March 12, 2014 at 9:42 am

    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.

    Reply
    • Jeff Cohan says

      March 12, 2014 at 5:34 pm

      Mark – Can you provide the URL?

      Reply
      • Mark says

        March 13, 2014 at 5:41 am

        Yes, of course. Example page with album – http://ma-lkmodels.ru/boys/

        Reply
        • Jeff Cohan says

          March 13, 2014 at 8:43 am

          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.

          Reply
  3. Mark says

    March 17, 2014 at 8:42 am

    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/

    Reply
    • Jeff Cohan says

      March 17, 2014 at 9:17 am

      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

      Reply

Leave a Reply Cancel reply

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

Primary Sidebar

mailchimp signup

Subscribe to get notified when new articles are published. Unsubscribe any time. No spam. I promise. Check out my newsletter archives.

social

Twitter Facebook LinkedIn

Recent Articles

  • Use Case for Custom Post Type: “In The News” March 10, 2023
  • Create a Custom Shortcode to Display a MemberPress Membership Price ANYWHERE on Your Website February 5, 2023
  • Avoid Direct Styling; Use CSS Instead September 21, 2022
  • Blog Tags: What They Are (and What They’re Not) August 5, 2022
  • How to Create a Simple Custom Events Plugin May 24, 2022

Filter By Category/Tag

Categories

  • Case Studies (7)
  • General (61)
  • Portfolio (5)
  • Reviews (12)
  • Snippets (16)
  • Techniques (38)

Popular Tags

Advanced Custom Fields Blogging Child Themes Content Marketing CSS CSS Grid Customer Service Custom Fields Custom Post Types Diagnostics Facebook FooGallery Genesis Gutenberg HTML Images iPhone Libra Live Chat Marketing Media MemberPress MemberPress Courses mu-plugins MySQL Photo Gallery php Pinterest Plugins Post Formats Pricing Project Management Security SEO Seth Godin Shortcodes Social Networking Surveys Taxonomies Trello Twitter Video Web design Web forms WordPress

siteground wp hosting

Web Hosting

wp101

EasyWordPresstutorialvideosforbeginners.
MemberPress CTA

Footer

Background

Web Sites | WordPress Support | Web Applications.

Formally trained in liberal arts and education (I have a B.A. in Government from Harvard and studied Secondary Education at Rutgers Graduate School), I have honed my skills in the communication arts and sciences as a teacher, trainer, instructional designer, writer, photographer, calligrapher, helpdesk manager, database programmer, and multimedia developer.

(I've also been a group counselor, waiter, bartender, bicycle messenger boy, computer salesman, carpenter's helper, financial analyst, and school board president.)

Tech

Systems since 1983.
Web sites since 1994.
PHP since 2001.
WordPress since 2007.

Contact

770-772-5134
Email Jeff
Send Money
All Ways

Copyright 2023, nSiteful Web Builders, Inc.

 

Subscribe

Pardon the interruption. I know popups can be annoying. But I’d love to have you as a subscriber.

Sign up to be notified when new articles are published. Unsubscribe any time.

* indicates required

Powered by MailChimp

×