WordPress.org

Extends NextGen Gallery to simplify the image filtering, providing a simple way to filter the gallery images with their own tags. This plugin depends on NextGen Gallery.

Usage

1. Add one or more tags to the gallery images
2. Insert the nggpowertags shortcode:[nggpowertags gallery=X] (where X is the gallery ID) and you have done.
3. Optionally you can add one or more attributes:

• tagmenu_sep: to define a character to separate the tags (default is ",")
• tagmenu_format: can be "sep", "list" or "select" or "empty" to hide the menu (default is "sep", which stands for separator)
• all_word: can be one of the translated strings see Translation notes (default is "All")
• template=caption or one of other ngg templates (the same as nggallery shortcode)
• exclude: see "Include/Exclude notes"
• include: see "Include/Exclude notes"

You can also set more than one gallery using a comma separated list of IDs, for example:

[nggpowertags gallery=1,2,3]

Include/Exclude notes

The include attribute has been set to have the precedence on the exclude attribute and can be also used to specify a custom ordered list of tags. To better understand the precedence, I show you an example of a gallery (name it with ID=1) with 3 images tagged as follow:

• image1: "dubai", "cool"
• image2: "cool"
• image3: "dubai"

This shortcodes are equivalent:

[nggpowertags gallery=1 include=cool exclude=dubai]

[nggpowertags gallery=1 include=cool]

You'll end up with image1 and image2.

Using this shortcode:

[nggpowertags gallery=1 exclude=dubai]

You'll end up with the image2 only.

Custom ordered tags

With the "include" attribute you can easily change the tag order as you like: if you have "dubai" and "cool" tags, you end up with the alphabetical order (cool / dubai), but if you specify the attribute "include":

[nggpowertags gallery=1 include=dubai,cool]

you end up with your personal ordered tags.

Permalinks

In order to have working parmalinks with Powertags, you have first to enable the permalinks in WordPress (using for example %postname%) then on NextGen Gallery (../wp-admin/admin.php?page=nggallery-options), checking "Activate permalinks" options. You can optionally change the gallery slug name, changing the "Gallery slug name" input field.

In this way, you end up with something like this:

http://www.yoursitename.com/yourpagename/gallery-slug-name/tags/yourtag

Translation notes

The default word used to describe all the images is set to "All". Someone asked me to add a translatable string, so I've added some useful words:

"All", "Any", "Show All", "Show All Categories", "All Categories", "All Tags"

Actually these are translated only on my mother tongue, which is the italian. If you need more translatable strings or more languages, please modify or create a new ".po" file and send it via mail to my email address (info@mauromascia.com).

Note that, if you specify a different word (from the ones defined as translatable strings) in the "all_word" attribute, this will not be translated.

Style

The main structure is this:

<div id="nggpowertags">
    <div class="nggpowertags-menu">...</div>
    <div class="ngg-galleryoverview">...</div>
</div>

If you need to move the menu down, you can put some CSS (in your style.css) like this:

div#nggpowertags {
    position: relative;
}
div.nggpowertags-menu {
    position: absolute;
    bottom: 0;
}
div.ngg-galleryoverview {
    padding-bottom: 30px;
}

The style of the active tag can be changed using the "active-tag" class under the "nggpowertags-menu" div.

If you need to hide the tag menu, you have to set the tagmenu_format to "empty":

[nggpowertags gallery=1 tagmenu_format=empty]

Demo

EscursioniAsinara.com

Coming soon (PRO version)

• Start displaying the images from a certain tag
• Faceted Search
• Ajax loading