Looking for a fix for your NextGEN 2.0 problems? You’re not alone! The NextGEN Gallery update from 1x to 2x has been a painful transition for many NextGEN administrators. Many theme and plugin conflicts have been reported with the new Pope based version, and people are struggling to find solutions to their problems.

I also experienced several issues with the 2.0 update, and I feel one of the less obvious solutions is worth sharing with the community in this article.

The problem

The primary NextGEN conflict I was experiencing, was with a new Backbone based theme I was working with. As you might already know, Backbone.js sites rely heavily on JavaScript, and NextGEN was messing with the loading order of Backbone.js, Underscore.js (Backbone’s sole dependency), and other JavaScript files. Because NextGEN was loading Backbone and Underscore at the wrong time during during the page loading, my Backbone theme experienced problems. Some of the problems I was having with the theme included the following:

  • Some links didn’t respond when I clicked on them.
  • Other links would respond when I clicked on them, but the resulting page would be blank. When I did a “view source” on these pages, I could see that the code was present—it just wouldn’t display. When I refreshed the browser, the page would display normally.

Troubleshooting steps

As part of the troubleshooting process, I used the JavaScript Console in my browser. The console was reporting various TypeError and ReferenceError messages. I also saved a copy of the “view source” results for when NextGEN was enabled, and when it wasn’t enabled. I then did a “comp” and saw that the JavaScript files were being loaded in a different location when the NextGEN plugin was activated.

The next step was to track down what NextGEN file and function was doing this reordering. Thanks to grep, I found the move_resources() function in the file nextgen-gallery/non-pope/class.photocrati_resource_manager.php.

The solution

Before I list the solution, let me first say that it’s never a good idea to modify a plugin’s code because future plugin updates will probably overwrite your changes. However in this case, I just didn’t have any other option—I needed to get this new Backbone theme into production ASAP.

The fix for the conflict that I was experiencing entailed modifying the following line (around line 102) in the move_resources() function:

$this->buffer = str_ireplace('</body>', $this->scripts.'</body>', $this->buffer);

This code is basically moving the JavaScripts so they load before the closing body tag. For my theme conflict, I needed to move these scripts back to their original location (before the closing footer tag).

The modified code looks like this:

$this->buffer = str_ireplace('</footer>', $this->scripts.'</footer>', $this->buffer);

Recommendations

While this solution might not fix the specific issue you’re experiencing, it should give you an idea on where to start looking. If you’re problem is related to JavaScript, I recommend you review the move_resources() function to see what you might need to tweak.

Also remember to keep an eye on upcoming NextGEN updates. These updates will likely overwrite any changes you make. With any luck, some future update might also negate the need for you to make these types of changes in the first place.

The complete (original) function is shown below, and as you can see it shuffles the loading of stylesheets and scripts around quite a bit.

The original move_resources() function

/**
* Moves resources to their appropriate place
*/
function move_resources()
{
// Move stylesheets to head
if ($this->styles) {
$this->buffer = str_ireplace('</head>', $this->styles.'</head>', $this->buffer);
}

// Move the scripts to the bottom of the page
if ($this->scripts) {
$this->buffer = str_ireplace('</body>', $this->scripts.'</body>', $this->buffer);
}

if ($this->other_output) {
$this->buffer = str_replace('</body>', $this->other_output.'</body>', $this->buffer);
}
}

 

Share This