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:
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:
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.
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" 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:
And relative Level 0 URLs would look like this:
"Level 1" locations are one folder deeper than your root:
Files residing in a Level 1 location would look like this:
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:
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.
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:
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 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:
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:
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:
In the standard TTG construction method, Level 3 entities come into play only when nesting image galleries within a child index:
For example, you might create a Travel category, then create separate galleries for each of your destinations:
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:
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
Level 1 targets
TTG CE2 Theme for WordPress
Level 1 targets
TTG CE2 Auto Index, used as a main-level index
Level 1 targets
TTG CE2 Auto Index, used as a child-level index
Level 2 targets
TTG CE2 Highslide Gallery, TTG CE2 Horizon, TTG CE2 Photoswipe Gallery
Level 2 targets
TTG CE2 Highslide Gallery, TTG CE2 Horizon, TTG CE2 Photoswipe Gallery - organized into a child-index
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.