I changed how the ‘Photographs’ menu item works. This post has an explanation and some technical details.

Update

I added the capability to automatically create the JSON file, which is used to make the photo browser tree, from keywords in Lightroom (i.e. the program I use to organize and ‘develop’ photographs). I describe this new feature here.

Overview

Previously when you clicked the ‘Photographs’ menu item, you got a drop down with choices of photo galleries. I’ve changed it so that now when you click on the ‘Photo Browser’ item in the website header, you go to a page that has a hierarchical tree of galleries. It uses the familiar Windows GUI for a tree, with folders that can be expanded with the ‘plus’ sign. This is better because you don’t have to go to the menu and navigate for every gallery, and wait for a page reload. Instead, just click on a gallery in the tree and it will show the associated photographs, without reloading the page.

All the photographs are contained in blogs. The ‘Photo Browser’ page (accessed from a tab on the website) enables access to just the photos rather than searching for a blog. The photographs are selected based on tags that are associated with them.

The ‘Birds’ folder uses the common taxonomy for grouping birds that is used in the Sibley field guide. I think this is the standard taxonomy, but Sibley might have some customization of it (I don’t know). The ‘Bird Favorites’ gallery (in the Birds folder) is for bird photographs that are my ‘favorites’ (I tagged the photos with ‘Bird Favorite’).

Some Technical Details

I use the WordPress plugin NextGEN Gallery to manage photographs on the site. I can organize the photographs by named ‘galleries’, or using albums, which is a collection of galleries. I can also create a gallery ‘on the fly’ using a tag. Photographs can be ‘tagged’ with a comma separated list of tags, and NextGEN allows creating a gallery of all photographs with a given tag. For example, all photographs with the tag ‘Butterfly’.

I wanted to display bird photographs using a common taxonomy for birds, and I while I’m at it, also do it for other tags such as ‘Butterflies’, ‘Dragonflies’, etc. All of the photographs are contained in blogs, but this page allows viewing just the photographs regardless of the blog it was published in. My first attempt was using a menu item, which I wrote about here: https://www.thelesters.net/2012/nextgen-gallery-menu-link-to-tag-gallery-lightbox-effects-and-show-exif-data/. However, it wasn’t what I really wanted because it was awkward to use. I’ve seen other sites that use a hierarchical tree to access photographs, which I liked much better.

I finally got serious about figuring out how to do this. It was a good project to learn more about web development. I had to dig in to details about the following:

1. The jQuery library, which is a free library that uses Asynchronous Javascript and XML (AJAX).
2. Javascript programming.
3. Using the jstree library.
4. How the NextGEN and Easy Fancybox plugins work.
5. Writing plugins for WordPress.

I tried two things for the hierarchical tree. I first tried the WP Moo Tree plugin it. I found it was difficult to use for what I wanted, and creating the tree, and making it respond to my clicks the way I wanted, was too cumbersome.

My second attempt at implementing the tree was a free javascript library called ‘jstree’. This is what I wound up using. It’s really nice with a lot of flexibility. The problem was that it’s not a WordPress plugin, so it meant I had to do more work. The software is great, but it was a pain to learn how to use. There is documentation on the website, but it leaves out a lot of details. I had to learn through web searches and trial and error.

Another thing I wanted to do was reload the tag gallery without reloading the page. To do this I had to figure out more details about how the software works for the WordPress plugins NextGEN  and Easy Fancybox. It also required digging into details about jQuery, which allows me to get stuff off the server (e.g. the tag gallery) without reloading the page. This was more web searching, referencing the ‘dummies’ book, and trial and error.

I implemented the software to do the Photographs page as a WordPress plugin, which I called the ‘Tag Gallery Page’ plugin. I actually wrote two plugins. The first one reloads the page whenever a gallery is selected from the tree, similar to the way I did it before with the menu item drop down list. The second plugin, called ‘Tag Gallery Page 2’, doesn’t reload the page, but rather just loads the new thumbnails for the gallery. I’m using the second one.  It has the disadvantage that it requires using the Easy Fancybox plugin, but I like the operation of it better, and since I’m using Easy Fancybox, it’s not a problem.

There were three main hurdles I had to overcome that I consider key to the ‘Tag Gallery Page 2’ plugin (other than using jstree). I’ll briefly list them here:

1. Loading the thumbnails for the gallery. I implemented this by calling a ‘PHP’ on the server, which calls ‘nggShowGalleryTags( )’ and returns its output to the client.
2. Number 1 displayed the thumbnails, but the ‘Easy Fancybox’ software that allows navigating the photos didn’t work. I fixed this by calling another PHP which calls the ‘easy_fancybox( )’ function. This PHP is called in a handler function that is called when number 1 is done.
3. Everything worked with numbers 1 and 2 except when there were multiple thumbnail pages. In that case, the navigation between pages didn’t work (e.g. clicking on the page number, or clicking on the ‘next’ arrow). I fixed this by using the ‘replaceWith’ javascript function to update the navigation HTML on the page that called a reference (i.e. it got rid of the href), and then added a function that handles the click event for each of the navigation items. When the click event occurs, then the handler loads the new thumbnails for the selected page. The software to update the navigation HTML and add the click event handlers was implemented in a handler function that is called after the easy fancybox PHP is done (number 2 above).

As I mentioned, I wrote two plugins. However, they aren’t ready for prime time i.e. they aren’t ready to be published for general use. I didn’t add any admin pages or options for the plugin. Also, the tree is built using standard Javascript Standard Object Notation (JSON) file, rather than a GUI based implementation. I don’t plan on publishing them as a plugin because I doubt there is much need for them. If there was a need, it would be fairly easy to update the plugins (but just time consuming).

There are probably much better ways to do this, but this is the solution I came up with by stumbling around.