Keeping Navigation ‘on the level’

In building a website with TTG plugins, the most difficult concepts to grasp are also related. They are folder structure and navigation structure. In practice these concepts are not difficult to grasp, but they are extremely obtuse to explain. In this tutorial, I will attempt to tackle navigation setup. Through relation, folder structure will also be touched upon.

Let's start by taking a look at the navigation controls. In CE2, there are ten navigation slots you can setup from within Lightroom (if you need more menu items than that, you can author larger menus via PHPlugins). Navigation slots consist of two parts, a label and a target:

The Label is how your menu item will appear in your navigation. If left empty, there will be no menu item. So, for example, if you wanted to remove the "Blog" item from your navigation, you need only delete the Blog label from the controls.

The Target is the address to which the menu item directs the user. The target URL may be either absolute or relative. See my tutorial Working with URLs for more information.

Of note, the Target includes a drop-list of options intended to make your life easier. The contents of this drop-list will vary from one engine to the next, but you can always access the list by clicking here:

Click here to access the Target drop-list of options.

In TTG CE2 Pages, this drop-list is very important and should be used to get around your pages. More information on creating navigation in TTG CE2 Pages here. For this article, though, we're going to focus on our other web engines. While TTG CE2 Pages has a unique set of target options, other TTG web engines offer a target list that looks like this:

The CE2 navigation target drop-list, for every plugin except TTG CE2 Pages.

As you can see, the list is made of repeating options for the standard TTG navigation menu -- Home, Galleries, Blog, Services, Info, About and Contact -- divided into a series of "levels". Levels tie directly into folder structure, and based upon folder location determine how many steps back a link must travel in order to reach its destination. If that sounds confusing, fret not; we're going to break it down.

Files & Folders

In discussing "Level" we are referring to the hierarchy that is created by placing folders within folders. Level 0 is where we start, the root of our domain. Every folder added creates another layer of depth.

For the purposes of our discussion, files reside at a particular level, while folder increment the hierarchical level.

Planning

When configuring your plugins' navigation, it is important to plan ahead. You should be aware of where each component will reside in relation to your Home page, and setup your navigation accordingly. I will run through some examples below.

I'll say it again ...

Before getting into the meat of the technobabble, I'd just like to say again: This is much more complicated to explain than it is to actually do. And so things may seem daunting as you read through this bizarre explanation. But if you sit down and just try to do it, I think you will find it rather intuitive. Planning is the key. Be able to anticipate where things will reside in your overall site structure, and select the appropriate level for your navigation. And remember, having a general understanding of Relative URLs will help to make sense of things.

Level 0

"Level 0" is the root of your domain, http://yourdomain.com/. It is the top-most level of your site, the base. The only web engine which assumes Level 0 status is TTG CE2 Pages. Absolute Level 0 URLs would look like this:

http://yourdomain.com/about.php
http://yourdomain.com/contact.php

And relative Level 0 URLs would look like this:

about.php
contact.php

Level 1

"Level 1" locations are one folder deeper than your root:

http://yourdomain.com/level1/

Files residing in a Level 1 location would look like this:

http://yourdomain.com/level1/index.php

According to the standard TTG method of constructing a site, TTG CE2 Cart and TTG CE2 Theme for WordPress operate as Level 1 entities. That is to say we would organize are site such that the following addresses are true:

http://yourdomain.com/cart/
http://yourdomain.com/blog/

Therefore, when setting up navigation for our cart and blog, using TTG CE2 Cart and TTG CE2 Theme for WordPress respectively, you would select your navigation links -- Home, Galleries, Blog, Services, Info, About and Contact -- from the Level 1 list of targets.

Select your targets from the Level 1 list.

From a level 1 location, the path back to the Home page is ../index.php, the ../ being one relative step toward the top-level (Level 0) location of your site.

By default, TTG CE2 Cart and TTG CE2 Theme for WordPress are set to use Level 1 targets for navigation back to pages created by TTG CE2 Pages.

Another possible Level 1 entity would be gallery indexes created by TTG CE2 Auto Index and intended for use as "main-level" indexes (i.e. not as child indexes within your /galleries/ folder). The address of a Level 1 gallery index would look like this:

http://yourdomain.com/gallery-index/

By default, navigation in TTG CE2 Auto Index is set as Level 2. When you wish to use TTG CE2 Auto Index to create additional "main level" indexes, you should set each of the default navigation targets to use Level 1 targets.

Level 2

Level 2 entities reside at a folder depth of two levels. Image galleries belonging to the Galleries page -- your primary gallery index -- would be Level 2 entities. The address to such would look like this:

http://yourdomain.com/galleries/portraits/
http://yourdomain.com/galleries/landscapes/

In these examples, the image galleries "portraits" and "landscapes" are Level 2 entities, and their navigation targets should be taken from the Level 2 list. A level 2 navigation target creates a relative path that steps back two levels (../../) to your pages. For example, the relative path to your Home page would be:

../../index.php

By default, all image galleries -- TTG CE2 Highslide Gallery, TTG CE2 Horizon, TTG CE2 Photoswipe Gallery -- are setup to use Level 2 targets. Additionally, TTG CE2 Auto Index uses Level 2 targets by default, assuming that the it will be used to create child indexes within a main gallery index:

http://yourdomain.com/galleries/child-index/

Level 3

In the standard TTG construction method, Level 3 entities come into play only when nesting image galleries within a child index:

http://yourdomain.com/galleries/child-index/image-gallery/

For example, you might create a Travel category, then create separate galleries for each of your destinations:

./galleries/travel/france/
./galleries/travel/italy/
./galleries/travel/spain/

In these examples, "france", "italy" and "spain" are each separate galleries residing three folders deep. This makes them Level 3 entities, meaning they must backstep three levels to reach your Home page:

../../../index.php

Therefore, when nesting image galleries within a child index, your galleries should be set to use Level 3 targets. Your child index -- in this example, ./galleries/travel -- should be set to use Level 2 targets.

The gist of it all ...

The purpose of the "leveled" target selector is to allow you to easily specify the correct hyperlink targets for your navigation. Rather than writing all of the links by hand, you need only know at which level your exported content will reside, then select targets of the appropriate level from the list. Using the standard methodology, a summary of rules:

TTG CE2 Pages
./
Always uses Level 0 targets.

TTG CE2 Cart
./cart/
Level 1 targets

TTG CE2 Theme for WordPress
./blog/
Level 1 targets

TTG CE2 Auto Index, used as a main-level index
./auto-index/
Level 1 targets

TTG CE2 Auto Index, used as a child-level index
./galleries/child-index/
Level 2 targets

TTG CE2 Highslide Gallery, TTG CE2 Horizon, TTG CE2 Photoswipe Gallery
./galleries/image-gallery/
Level 2 targets

TTG CE2 Highslide Gallery, TTG CE2 Horizon, TTG CE2 Photoswipe Gallery - organized into a child-index
./galleries/child-index/image-gallery/
Level 3 targets

And there you have it. I feel that all of this is much more difficult to explain than it is to actually do it. So, as complicated as all this sounds, it should be very easy to manage in practice. I hope your conclusions will be the same.


8 Responses to “Keeping Navigation ‘on the level’”

  1. I had used relative links, but switched back to absolute links, since I don” have to keep track of what level my nested galleries are in and having to figure out how many layers to go back.

    Aside from testing a site on a staging portion of your site where it would be easier to move files to production since you wouldn’t have to change the links, (but I believe Dreamweaver will update links if files are moved) are there another advantages of relative links?

    Thanks,

    Reid

    · January 5, 2012 @ 2:55 pm

    • Matt says:

      Just makes things more portable. If you are more comfortable with absolute URLs, that’s good too. And if you decide to use PHPlugins to manage your navigation instead, then all of this gets overwritten anyway, so there are several approaches that can be taken.

      · January 5, 2012 @ 3:06 pm

  2. Is there a tut on your site PHPlugins–what they do, how they work, how to modify. examples. Is this another product to buy or already incorporated in your engines? I see a few articles, but nothing comprehensive, unless I’m missing something.

    OT: Also are drop down menus available? I thought I saw that in one of the engines

    Thanks,

    Reid

    · January 6, 2012 @ 2:53 pm

    • Matt says:

      PHPlugins are a feature included in all CE2 plugins, a revisited implementation of the CE version PHP Hooks. Comprehensive technical documentation is available on the wiki, Using PHPlugins. Generic examples are included in the documentation, and several practical examples are included in the plugins’ /phplugins/phplugins.php file (the /phplugins/ assets exported only when PHPlugins are enabled).

      Here on the blog, I’ve been running a series of tutorials providing more practical examples of PHPlugins in use, with more to come.

      And drop menus are now available via a combination of in-Lightroom configuration and PHPlugin implementation. Within Lightroom, you you may style the drop-down menus and setup the top-level of navigation. And if that’s all you do, it’s perfectly functional and provides a cool new look for your site navigation. You can take things further, however, by delving into PHPlugins; here you may create the child-level navigation items, and the included TTG CE2 Pages example also includes script for an auto-indexing drop-down menu that lists the contents of your /galleries/ folder.

      I am planning a tutorial to better illuminate the drop-down implementation, but there should be enough to go on in the example that users of a minimal comfort level with source code should be able to get up and running. All you need to do is select the drop-down menu type and enable PHPlugins within Lightroom, then uncomment the relevant function in the /phplugins/phplugins.php file. It’s already built and read-to-use.

      · January 6, 2012 @ 3:03 pm

      • Thanks. Just was reading the Wiki as you were responding. Looking forward to additional tutorials. Many of us are photographers, not web designers and have stumbled up web design as a means of having more control of our photo website. Coding has been secondary to photography, so anything that you can do to help us get us and running is great.

        Sometimes I feel like I spend so much time keeping the computer system running and backed up and learning new techniques and software, email marketing, et al, that I loose site that’s is been a while since I actually produced an image. I guess the nature of these days in photography.

        Thanks,

        Reid

        · January 6, 2012 @ 3:23 pm

        • Matt says:

          Indeed. I’ve not taken a photo in ages, it seems. But CE2 has had me very busy. I think a lot can be done with PHPlugins via copy-and-paste from examples. Of course, for users who want to author code, there’s a lot more power there than my tutorials let on.

          But the drop-down menus, for example, are dead simple. Literally, enable PHPlugins via checkbox; style via controls. After export, open the /phplugins/phplugins.php file and delete the two lines (one on top, one on bottom) that comment out the function. And you’ll have a default TTG menu with auto-indexing drop-down Galleries menu.

          · January 6, 2012 @ 3:36 pm

          • Sounds great! Would be nice if there were file exchanges where TTG uses could share templates and PHP scripts.

            · January 6, 2012 @ 6:40 pm

          • Matt says:

            File attachments are enabled on the Community site. That might work as an exchange so long as uploads don’t get out-of-hand. I’ll have to keep an eye on spammers as well, though spam has thus far not been an issue.

            Also, scripts can always be copy-and-pasted into threads, which I would prefer to attaching PHP files.

            · January 6, 2012 @ 7:06 pm

Comments are now closed.


CE4-Sidebar

The CE4 Web Publishing Suite

Welcome to The Turning Gate. Our plugins for Lightroom's Web module allow you to create mobile-friendly, fully responsive image galleries, websites, blog themes, shopping carts and more!

Learn more, or hit the shop!


Got Questions?

Get answers in the support forum.

Find Your Order

Can't find your download? Look it up.

Need Web Hosting?

Get affordable, reliable, TTG-certified hosting with Bluehost.

Need a Logo?

We've partnered with an award-winning graphic designer and brand consultant to offer Branding Services to our users.


TTG Recommends

Bluehost

Lightroom Queen

The Turning Gate receives a small portion of affiliate sales. This costs you nothing extra, but helps to support our work. Though compensated by affiliate relationships, The Turning Gate carefully chooses affiliates based upon the quality of services and products these entities provide to TTG users.