How to link back to an album in a NextGen Gallery

When you use the amazing plugin NextGen Gallery for WordPress you can organise your photos into ‘Galleries’ and you can sort these into ‘Albums’ to create a folder hierarchy like you might have on your computer.

When these galleries and albums are viewed on your website they give the visitor a great way to see your pictures, but there’s one feature missing; links back to the album you just came from. I searched the internet for a solution to this but didn’t find a way I liked, so I created my own breadcrumb trail to insert.

First, obviously, you need the NextGen Gallery plugin installed. I also have Effects for NextGen which opens up a couple of extra theme options, but isn’t required.  I also have Shortcode Exec PHP, which is how my workaround works.

In SEPHP I created a new shortcode with the code below;

$url = $_SERVER['REQUEST_URI'];
if ($url == "/gallery/") {
echo "You are here: <b>Gallery</b><br><br>";
}
else {
echo "You are here: ";
$url = explode('/',$url);
$limit = count($url);
$limit--;
for ($myi = 2; $myi < $limit; $myi++) {
if ($myi < $limit-1) {
echo "<a href='http://psychopixi.com/";
for ($myi2 = 1; $myi2 <= $myi; $myi2++) {
echo $url[$myi2] . "/";
}
echo "'>" . ucwords(str_replace("-"," ",$url[$myi])) . "</a> -> ";
}
else { echo "<b>" . ucwords(str_replace("-"," ",$url[$myi])) . "</b><br><br>"; }
}
}

I noticed that the URI in the address bar would work fairly easily to indicate the folder I was in, as well as the hierarchy of folders above it. For example, my Gallery page has a main album called ‘gallery’ and then albums inside it, each with albums and galleries in them. If I go from gallery to photos and then to nature my URL looks like this;

http://psychopixi.com/gallery/gallery/photos/nature/

My PHP code above grabs the URI – the part of the address after my domain name.

URI = "/gallery/gallery/photos/nature/"

If you’re in the top level gallery the URI will just be “/gallery/” and in that case we just output “You are here: Gallery“. If you’re in a subalbum (eg. photos) or subgallery (eg. nature) we want to break up the URI using the PHP explode function to get the full hierarchy.

/gallery/gallery/photos/nature/  ->  gallery, gallery, photos, nature

(“Gallery” is repeated because the page is called Gallery, and the topmost album is called Gallery.) Now we have the list of albums and galleries in the hierarchy we can put them back together again as a breadcrumb trail.

We want to take every item in the array except the first (since that’s the page name, not a folder) and check if it’s the last item. If it’s not last that means it’s a gallery or album above the one we’re visiting.

For example in my array above we disregard the first item (the page ‘gallery’) to get “gallery, photos, nature”. The last item is ‘nature’, the gallery we’re currently viewing. The other items in the array (gallery, photos) are galleries or albums we’ve gone through to reach where we currently are. We want to display those items in the breadcrumb trail as links so the user can navigate back the way they came.

To create a link for each one we look at its position in the current array and build a link based on the main domain name plus it and any items that come before it in the whole URI array.

For example, the link for ‘photos’ would be the domain name “http://psychopixi.com/” plus the first array item “gallery” plus a forward slash, plus the second array item “gallery” plus a forward slash, plus the current (third) array item “photos” plus a forward slash.

http://psychopixi.com/ + gallery + / + gallery + / + photos + /
http://psychopixi.com/gallery/gallery/photos/

We use this as the link URL, and for the link text we take the name of the current array item, turn any dashes into spaces, and capitalise the first letter of each word. For example, “illusion-this-or-that” becomes “illusion this or that” and then “Illusion This Or That”.

We do this for every item in the array except the last; since this is the folder we’re currently viewing we don’t need to create a link for it, and so we simply display the name in bold, edited as above for capitalisation and spaces.

All of this code creates the breadcrumb navigation, and using Shortcode Exec PHP I gave it the title ‘gallery_back’. To display this along with my gallery I just have to include the shortcode in the position on the gallery page that I want the navigation to appear.

I’m quite happy with the result on my own pages and, although I don’t think you can just copy and paste the solution, I hope I’ve given enough explanation that anyone looking for how to link back to an album in NextGen Gallery might be able to create their own version by looking at my code.

18 thoughts on “How to link back to an album in a NextGen Gallery

  1. Hi,

    This is exactly what I want to do. Could you please elaborate more as to where you put the code above? Where is SEPHP I?

    thank you very much.

    Wrhona

    1. Hey, SEPHP is Shortcode Exec PHP; a plugin for WordPress which I’ve linked to at the start of this page. You want to install that plugin to the WordPress installation that you have the NextGen Gallery on, and then use that plugin to create a snippet of PHP code to put into your page. The code I gave above is the way I did it, but it relies on the structure of my blog and you’ll probably need to tweak it to work for you. The easy bit is once you’ve saved that shortcode you just put the shortcode tag into the page that you have the shortcode for the NextGen Gallery in. For example;

      [gallery_back]

      All my pictures, arranged into albums.

      [album id=3 template=compact]

      That’s all I have actually written in the WordPress editor for this page. The [gallery_back] part is the name of my shortcode to generate the breadcrumb navigation, then there’s a sentence of text followed by [album id=3 template=compact] which is the shortcode to display that gallery. Hope that clears things up a bit!

      1. Hi,

        Thank you for your reply.

        I arranged the photo gallery like this:

        The name of the page is “Taiwan”

        Photo album: Streets in Taiwan

        But actually, Taiwan is in another WP page, so that in the navigation bar it would be like this: Photos-Taiwan-Streets in Taiwan

        So if I understand well, this is how my code should be:

        if ($url == “/taiwan/”) {
        echo “You are here: Taiwan“;

        and

        echo “<a href='http://domain.com/photos/&quot;;

        Is this correct?

        Thank you once again…

  2. Hi Pixi – Help me Help me!! :)

    Pretty please !! I have followed your code and read it like 50times… I have inserted it and changed what I think needed changing …but I’m a bit lost..

    I have inserted the code into the shortcode plugin and changed line 2 and 9

    I have put the shortcode [gallery_back] into the main gallery page where all my albums are… But its not a link…. so I’m assuming and making an obvious guess that I’m misunderstanding where I put the links…

    Also… when I go to the next subalbum down…. like so…

    main page (Kizzies-Gallery)
    albums in main page (Current Quilting Projects)
    subalbums in albums (Cara’s Quilt, Jessie’s Quilt) etc etc….

    how do I put in the links for that and where…

    I am guessing the same shortcode would apply but how do you put in the numerous links…

    on the page when I go into the next album down it says You are here: Current Quilting Projects

    and again no link

    I know you are probably really busy but its worth a try in asking as I really appreciate the time you have taken to type out this post.. but I’m a complete idiot when it comes to PHP etc so I’m trying to learn my best!

    If you want to take a look at what I’m talking about
    my site is

    http://www.kizzieskorner.com and its in the Gallery Menu Button…

    Thanks heaps Pixi

  3. Pixi Nevermind I figured it out!!!

    Well I did it different to you but I think mine is a bit more simple for me to understand LOL!! Thanks so much for giving me the inspiration though to finding a solution!

    Cheers

    Kizzie

    1. Hey Kizzie,

      I’m sorry I took so long to reply to your comments. I’m really thrilled that you got it working, and I’m glad my post helped you figure out a way to do it. I realise it’s a bit late for me to add anything here, but I didn’t want you to think I’d completely ignored you – only the Real World sadly has been keeping me pretty busy lately.

      Best wishes.

  4. Works excellent, but is there any way to get rid of the extra gallery in the breadcrumb links? For example. Mine is mydomain.com/gallery, so when i go into the first album, it then says:
    You are here Gallery -> Nggallery -> Album Name

    Clicking Nggallery just results in a 404. Ideally, i’d want it to say You are here Gallery -> Album Name

    1. $url = $_SERVER[‘REQUEST_URI’];

      if ($url == “/en/product/”) {
      echo “You are here: Product“;
      }
      else
      {
      echo “You are here: “;
      $url = explode(‘/’,$url);

      $limit = count($url);

      $limit–;
      for ($myi = 2; $myi < $limit; $myi++)
      {

      if ($myi < $limit-1) {
      if ($myi != 3) // to get the Nggallery array value using print_r($url) and given to this loop
      {
      echo "<a href='http://globalexportcn.com/&quot;;
      for ($myi2 = 1; $myi2 ” . ucwords(str_replace(“-“,” “,$url[$myi])) . “ -> “;
      }
      }
      else { echo “” . ucwords(str_replace(“-“,” “,$url[$myi])) . ““; }

      }
      }

  5. I am totally lost with this code…

    I installed plugin, created shortcode and add it to my gallery page… OK I see the navigation but id is not working – could you help me please? I think there is a little problem

    1. Hey Jakub, I’m afraid I don’t actually use this plugin any more, but if you can give me a bit more information I’ll see if I can help. When you say the ‘id is not working’, what do you mean? If you’re referring to the shortcode [album id=3 …] then it might be that the NextGen Gallery plugin has changed since I used it and wrote this post. That shortcode is the way you’d insert a NextGen album into a WordPress post, so perhaps there’s a different way of doing that now?

  6. Hi Pixi,

    Wow, this is amazing and potentially exactly what I need! Do you know if there is anyway to not only go *back* an album but also to go forward to the *next* album?

    Ideally what I would would like to do is create “previous album” / “next album” buttons that would allow someone to navigate between the various albums on my page.

    Thank you so much for the work you’ve already done!
    Daniel

    1. Hey Daniel, glad you found the post useful! I’m afraid I haven’t used the plugin for ages now, and after having a quick look at the most recent version, it appears to have changed a fair amount since I used it. I’m afraid that implementing the previous/next links you want is gonna be a heck of a lot more complicated than just getting the breadcrumb nav in there. With the newest version of the plugin it looks like you can order the galleries in whatever way you want within an album when you go to the “Manage Albums” admin page, and then when you create a post with an album as part of it, I think you can pick and choose what you want to show up as well, choosing the order of galleries for that specific instance of the album.

      If I’m understanding you correctly, then what you’re hoping to achieve is the following: I have a page or post called “My Gallery” which is where I want the pictures to be displayed. If I have an album called A, containing three galleries called One, Two and Three – in that order within the album – then when I visit the gallery Two I should have breadcrumb navigation linking back up a level to the album A, and also previous/next navigation linking to gallery One and gallery Three.

         “My Gallery”
                 |
                A
                 |
       ——————-
       |         |         |
      One    Two    Three

      It’s easy enough to get the breadcrumb trail once you’re in the gallery Two because it’s literally there in the web address, you just trace your steps back, as it were, to find A and My Gallery. Getting the links to the galleries One and Three is different because you would have to know what order the galleries have been arranged in within the album. For example, you have the option to order the galleries by name in ascending order or descending order. That would make the order either “One, Three, Two” or “Two, Three, One”. If you’re in album Three then in the first case you would want the “Previous” link to point to One, and in the second case you would want it to point to Two. I’m really sorry, but I don’t know how you’d find out what ordering system is being used, and so I don’t know how you’d get the previous/next links to point to the right gallery!

      Forgive this rather lengthy reply just to tell you ‘I dunno, sorry dude!’ maybe it’ll at least give you some ideas to explore on your own? Like I said, I haven’t used (or looked at) this plugin for so long now, these are just the ideas I’ve come up with after a quick look over the latest version. Best of luck!

  7. Hello! This is awesome! Thanks a lot! I had to change the iterators because NextGen was making some weird file structures, but it works perfectly!!

  8. very good code, i see alot of time has passed, but the code seems to work very well

    however i had little problem;

    For example my arrangment is like that

    Page name and slug; foto
    Gallery slug : galeri

    Main Album: Mekanlar
    Sub Album: Mesrep
    Gallery : Mesrep 2014

    When i go to main page of gallery ……com/foto it works

    ————————————————
    When I click Mesrep album, it shows; You are here: Galeri

    http://www…………com/foto/galeri/mesrep
    ————————————————-

    When i click Mesrep 2014, it shows: You are here: Galeri -> Mesrep

    http://www………..com/foto/galeri/mesrep/mesrep-2014

    ——————————————————

    It seems that its showing top directory instead of i am in; how can i solve this?

    very thanks

Leave a Reply