Follow for free plugins, new theme releases and theme news
Plugin Description
Extends NextGen Gallery (prior to version 2.0) / NextCellent Gallery to simplify the image filtering, providing a simple way to filter gallery images with their own tags.
This plugin depends on NextGEN Gallery prior to version 2.0 or NextCellent Gallery.
This plugin will not work with newer versions of NextGEN Gallery and IT WILL NOT BE UPDATED TO WORK WITH THEM.
This plugin is minimally maintained: please make a donation to encourage future developments using this link Donate to this plugin ».
WARNING! NextGenGallery 2.0 update breaks all
——————————————————————————–
NGG 2.0 has a completly different structure: Powertags will only work with NGG < 2.0
Please refer to this nextgen-gallery-200-conflicterror
Usage
- Add one or more tags to the gallery images
- Insert the nggpowertags shortcode:
[nggpowertags gallery=X] (where X is the gallery ID) and you have done.
- 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”
- unique: you can add an unique value per gallery
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]
Screenshots
-
Display All images
-
Display the first tag clicked
-
Display the second tag clicked
