Improving Navigation of Albums and AlbumSets

To navigate back from an album or an album-set to the parent album-set, I use either bookmarks or a keyboard shortcut (cmd-[ on my Mac). Or on my phone, it is a simple swipe from the left border of the LCD to the middle of the screen. But some users might be more familiar with clicking a dedicated link instead.

Using phplugins, it is easy to add a ‘back’ link to Backlight 2 based albums and album-sets. Just add following few lines of code to your phplugins file*:

// Check we are at a top-level gallery
function dlp_is_top_level_album($arg = "galleries"){
   $galleries = explode(" ", $arg);
   $arr_url = explode("/", $_SERVER['REQUEST_URI']);
   if (count($arr_url) > 3) {
      return false;
   }
   foreach ($galleries as $gallery){
      if ($gallery == $arr_url[1]) {
         return true;
      } 
   }
   return false;
}

function albumset_bottom() {
   // only add link to the parent album if this is not a top-level gallery
   if (!$this->dlp_is_top_level_album("galleries shop")) {
      echo '<div class="dlp-prev-album"><i class="fa fa-angle-left"></i><a href="..">Back to previous set of albums</a></div>';		
   }
}

function album_bottom() {
   // add parent link at the bottom of the album page
   if (!$this->dlp_page_match('/backlight/search')){
	   echo '<div class="dlp-prev-album"><i class="fa fa-angle-left"></i><a href=".." rel="nofollow ugc">Back to previous album</a></div>';
   }

Update: just updated the album_bottom function to disable the back button on search results! See this blog post for the dlp_page_match function!

I use my helper function dlp_is_top_level_album() to determine if the album I’m looking at is a top-level-album. If this is the case, there is no parent album and I don’t have to include a ‘back’ link.
If the helper function is used without an argument, the default top-level-album ‘galleries’ is used. If your top-level-album is different, just provide it as a parameter when you call the helper function. If you have several top-level albums as it is the case on my site, you just provide them as a space separated string:

// top-level album 'pictures'
if (!$this->dlp_is_top_level_album("pictures")) {

// several top-level albums 'galleries' and 'shop'
if (!$this->dlp_is_top_level_album("galleries shop")) {

The standard Backlight 2 functions albumset_bottom() and album_bottom() are used to insert the back link at the bottom of the respective galleries. I encapsulate the link in a div with it’s own class. This way, I can easily add my own CSS markup code with my custom.css file:

.dlp-prev-album,
.dlp-prev-album a {
   color: #999;
   font-size: 0.75rem;
   letter-spacing: 0.015em;
   line-height: 1.125rem;	
}

.dlp-prev-album a {
   margin-left: 1em;
}

.dlp-prev-album:hover {
   color: blue;
}

.dlp-prev-album a:hover {
   color: blue;
   border-bottom: 2px solid red;
   text-decoration: none;
}

If you are curious to see this in action, then head over to my photo site.

*) The custom php code needs to be added after following section (eg, within the PHPlugins class definition):

// SET USER FUNCTIONS BELOW
// Some example functions are included below. Feel free to delete or modify unwanted functions.
// ****************************************************************************************************

Did you like this post? Did you use the given code? Please consider supporting me by buying me a coffee!

Buy Me A Coffee


Thanks!

3 thoughts on “Improving Navigation of Albums and AlbumSets”

  1. Hi, Daniel,
    this solution works very well for me also in Backlight 3 – thanks for the tip!

    But my Backlight search is also created as an album. Therefore the link to the previous album will appear there, too. When I click on this link I get to the Backlight Admin login page.

    On my test page bl3.mc-photografie.de I tried to hide it by adding the code in phplugins. Unfortunately without success.

    function album_bottom() {
    // add parent link at the bottom of the album page
    if (!$this->dlp_is_top_level_album(“backlight/search/”)) {
    echo ‘back to the previous album‘;
    }

    How did you manage that? The link is not shown on your photo search

    Thanks for your tip.

    Many greetings
    Markus

    1. Hi Markus,

      Backlight 3 is just the next generation Backlight. So whatever works for Backlight 2 should work for Backlight 3 as well!

      I recently I discovered this as well and didn’t think about this post! Thank you for noticing! Please check above where I have updated the code.

      Best!

  2. Hi Daniel,
    thanks for your answer. I was already on the right track, but did not have the dlp_page_match function on the screen.
    Greetings
    Markus

Leave a Reply

Your email address will not be published. Required fields are marked *

Web Design Consulting

Do you need help designing your web site or getting Backlight working the way you want? Contact me to discuss your idea or project.


Buy me a Coffee

If you like what I share here, please consider buying me a coffee or a print. This helps keeping me motivated to continue posting. Thank you!

Buy Me A Coffee

Categories