john bishop images | fine art photography | vancouver, bc

using TTG autoindex-CE as a widget

  Apache, drop down, dynamic, Lightroom, MAMP, menus, mySQL, PHP, TTG Autoindex, WAMP

in my post on fixed drop down menus i explain how to create fixed drop down menus and near the end i make reference to dynamic drop down menus.

this post is a follow on from that first post so make sure you can follow what is happening there before you try to dive in here. actually… it would really be a good idea to implement fixed drop down menus first and get them working properly first then modify them as shown here.

caveat

this method relies on a standardized set of folders…

1. your main site is in the root folder (ie. ‘/’),
2. the TTG Autoindex CE function is under the standard second level folder called ‘/resources/php’ and hasn’t been renamed or altered in anyway, and
3. your images galleries are inside a second level folder called ‘/galleries’, and
4. your blog is self hosted (ie. it runs on your server and not on wordpress.com or blogspot.com) and under a second level folder called ‘/blog’.

this function will not index nested galleries! if you do nest galleries, it will only index the top level.

PHP – a hypertext preprocessor

one of the prerequisites to creating dynamic drop down menus is the ability to generate a web page using PHP scripts. .php files generate dynamic html for a web page while .html files contain fixed html content. for this to work all of your files that are to contain dynamic content (ie. dynamic drop down menus) with a file type extension of .html must be renamed with a file type extension of .php.

you can not view .php files directly in your browser. like CGI, PHP is executed on your web sites server and not in the browser or on the users desktop. Content Management Systems (CMS) like WordPress, Drupal and Joomla use PHP to generate all of a web sites pages or a blogs content.

all of the gory detail needed on how to install and use PHP is way beyond the scope of this post. most web servers, including my own, have this as a standard offering although most notably the .mac domain offered by Apple’s iWeb service doesn’t. the combination of Apache to manage the HTTP conversation, PHP to generate a web page and MySQL to support truly dynamic data driven content are designed to run together in one comprehensive package and has been an industry standard for many years.

if you would like to explore Apache, PHP and MySQL on a Windows PC have a look at WAMP Server. for MAC OS X try MAMP Server. there are some differences between a *nix-based Apache/PHP/MySQL server and the WAMP/MAMP products but for most purposes they are more than adequate. indeed i make extensive use of WAMP Server on my Windows XP system to develop and maintain my web site – i wouldn’t try to run a web site without a test platform and WAMP Server fills the bill quite nicely thank you!

generating dynamic content

with that out of the way, this post takes us one step closer to dynamic drop down menus by exploring some of the new capabilities offered in Matthew Campagna’s TTG Autoindex CE is being offered to subscribers of his TTG Autoindex product.

have a look at the menu bar at the top of this page. all the drop down menus except two – galleries and blog – have fixed content. the drop downs for the galleries and blog menus are generated each time a page is sent to a users browser.

WordPress

the blog menu drop down is created by

1. instantiating the WordPress environment,
2. calling the get_categories() function and
3. developing the menu HTML from the results.

Corvid Works has an excellent article on how to do this and the WordPress codex has a wealth of information on WordPress functions.

Autoindex CE

now, with the advent of TTG Autoindex CE, the ability to enumerate all the galleries outside of the standard TTG gallery structure is here! prior to Autoindex CE i had to reverse engineer this capability. but you don’t have to – i’ve done all the work for you. and if you are at all comfortable programming in PHP, it is relatively easy to do.

just like the blog drop down, there are several steps needed to make this work

1. instantiate the Autoindex CE environment,
2. call the autoindex() function and
3. develop the menu HTML from the results.

here’s a sample code snippet …

require '../resources/php/autoindex.php';      // instantiate autoindex-ce
$albums = autoindex('../galleries/');          // get all the galleries under this path
$albums = array_reverse($albums);              // put newest first

// build <li>s containing an <a> tag linking to gallery for drop down menu
for ( $i=0; $i < $j; $i++ ) {
	echo '<li>';
        echo '<a href="'.$albums[$i]['url'].'">'.$albums[$i]['description'].'</a>';
        echo '</li>';
}

autoindex() will scan all the folders underneath the specified folder looking for an ‘autoindex.xml’ file which is automatically created by the TTG web gallery modules (ie. HighSlide Gallery, etc).

when autoindex() finds an ‘autoindex.xml’ file the values in that file will be parsed and set into the array the function returns along with a gallery URL and thumbnail jpeg. if you use TTG Autoindex or TTG Pages along with at least one of the TTG gallery modules, these options will be familiar to you. Matthew has a great resource detailing how to use Autoindex within the TTG web module plugin suite.

for example, a standard autoindex.xml generated by TTG gallery modules file looks like this …

<?xml version="1.0" encoding="UTF-8"?>
<album>
   <thumbnail></thumbnail>
   <title>best of 2010</title>
   <description>some of my best work for 2010.</description>
   <url></url>
</album>

all of these values are required although their values can by empty as shown above for <thumbnail> and <url>. when autoindex() finds empty values in these tags it does special processing.

• if <thumbnail> is empty autoindex() will scan underneath the gallery folder inside the ‘/thumbnail’ folder looking for a valid jpeg image file. this will be randomised each time the autoindex.xml file is parsed by autoindex()
• if <url> is empty autoindex() will default the value to the folder name containing this autoindex.xml file

there is only one autoindex() function parameter and that is the server filepath of the folder to scan for autoindex.xml files. if you use TTG modules this typically is at ‘/galleries’ but in the case of this code running under my ‘/blog’ folder we need to specify this filepath in relation to the ‘/blog’ folder – ie. ‘../galleries’. note that if you don’t specify the server filepath autoindex() will use the folder in which the calling PHP file lives.

if things aren’t working the way you expect them to, there is help. by defining a PHP constant of ‘AUTOINDEX_DEBUG’ and setting it’s value to ‘True’ autoindex() will dump a status display of the root folder it is scanning, the root folder for your web server, and a progress report of all the folders and thumbnails it scans and selects for processing.

why go to all this work? in the longer run there will be less work to do – most particularly when you publish a new gallery. when you keep your menus as fixed content you must manually modify each page to include any new galleries as you publish them. with dynamic drop down menus generated using PHP and autoindex() this all happens as soon as your new gallery is published.

if you have any programming experience (yes, javascript counts) this is fairly simple to implement. if not, drop me a note and i might be able to help you out.