using TTG autoindex-CE as a widget

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.


This method relies on a standardized set of folders...

  1. Your main site is in the root folder (ie. '/'), and
  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 (i.e. it runs on your server and not on or and resides in 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 (i.e. dynamic drop down menus) that have 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 files (.cgi) and ASP files (.asp), PHP files are executed on your web sites server and not in the browser or on the users desktop. It is the output from that execution that is sent to the browser. 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!

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. Autoindex 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.


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.

Here's what the code looks like on my system.

// Include WordPress 
define('WP_USE_THEMES', false);
$args = array(
	'type'       => 'post',
	'orderby'    => 'name',
	'order'      => 'ASC',
	'parent'     => 0,
	'hide_empty' => true,
	'number'     => 10,
$categories = get_categories($args);
foreach ($categories as $cat) {
	echo '>li<>a href="'.get_category_link( $cat->term_id ).'" title="'.$cat->category_description.'">'.$cat->cat_name.'</a></li>';

The WordPress codex has a wealth of information on WordPress functions including how integrate WordPress into your site.

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.

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

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

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<./li>

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.


Leave a Comment

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

Get Email Updates


It takes money to run a website. If we have been of assistance to you, if you have found useful information on our website, or if you have enjoyed using the free Photoshop Creative Commons plugin, please consider helping to defray our costs by making a secure PayPal donation. We do not receive any of your personal information or financial data.


john bishop images receives a small portion of affiliate sales. This costs you nothing extra, but helps to support our work. Though compensated by affiliate relationships, john bishop images carefully chooses affiliates based upon the quality of services and products these entities provide to our users. They must provide significant value-add. john bishop images is independently owned and the opinions expressed here are our own.