This is a short tutorial on SuaveGallery, a small image gallery program I put together for this site. It requires no special PHP modules, nor any database access to work properly.

Step 1. Install Smarty and setup folders

Download and install the Smarty templating class at http://smarty.php.net and upload it to your web space. Once it is in place, you'll need to create a some folders.

Here is the folder structure:

/templates_c

/templates

/cache

/Smarty (where the Smarty installation resides)

/pics (where the pictures will be)

/pics/Section (a grouping of pictures)

/pics/Section/Thumbnails (thumbnails for this section)

You'll need to make the templates_c and cache folders writable by the

web server (chmod 777 on the folders should do the trick). You'll also need the pager pluging for Smarty (http://smarty.incutio.com/?page=pager download and put it in Smarty/libs/plugins)

Step 2. Create the main page: index.php

<?php ini_set("include_path",".:Smarty/libs"); require("Smarty.class.php"); $smarty = new Smarty; $smarty->template_dir = 'templates'; $smarty->compile_dir = 'templates_c/'; $smarty->cache_dir = 'cache/'; $smarty->compile_check = true; $smarty->caching = true; $smarty->cache_lifetime = 60; //$smarty->force_compile = 1; //$smarty->clear_all_cache(); $columns = 2; $items_per_page = 4; if (!$smarty->is_cached("viewpage.tmpl",$_GET['folder'].$_GET['pos'])) { if ($dir = opendir('pics')) { while (false !== ($file = readdir($dir))){ if ($file != '.' && $file != '..') { if (is_dir("pics/".$file)) { $folder_list[] = $file; } } } } $smarty->assign("folder_list",$folder_list); } if ($_GET['folder']) { if (!$smarty->is_cached("viewpage.tmpl",$_GET['folder'].$_GET['pos'])) { foreach(glob('pics/'. $_GET['folder']. "/Thumbnails/{*.jpg,*.gif,*.JPG,*.GIF}",GLOB_BRACE) as $filename) { $images[] = basename($filename); } $smarty->assign("section",$_GET['folder']); $smarty->assign("data",array_slice($images,$_GET['pos'],$items_per_page)); $smarty->assign("pos",$_GET['pos']); $smarty->assign("cols",$columns); $smarty->assign("LISTDATA",array('rowcount'=>count($images),'limit' => $items_per_page)); } $smarty->display("viewpage.tmpl",$_GET['folder'].$_GET['pos']); } else { $smarty->display("default.tmpl"); } ?>

Step 3. Create the picture viewer script: viewpic.php

<?php ini_set("include_path",".:Smarty/libs"); require("Smarty.class.php"); $smarty = new Smarty; $smarty->template_dir = 'templates/'; $smarty->compile_dir = 'templates_c/'; $smarty->cache_dir = 'cache/'; $smarty->compile_check = true; $smarty->caching = true; $smarty->cache_lifetime = 60; //$smarty->force_compile = 1; //$smarty->clear_all_cache(); if (!$smarty->is_cached("viewimage.tmpl", $_GET['filename']. $_GET['section']. $_GET['pos']. $_GET['filetype'])) { if ($var = @file_get_contents("pics/".$_GET['section']."/".$_GET['filename'].".txt")) { $smarty->assign("pic_desc",$var); } if ($dir = opendir('pics')) { while (false !== ($file = readdir($dir))){ if ($file != '.' && $file != '..') { if (is_dir("pics/".$file)) { $folder_list[] = $file; } } } } $smarty->assign("section",$_GET['section']); $smarty->assign("pos",$_GET['pos']); $smarty->assign("filename",$_GET['filename']); $smarty->assign("folder_list",$folder_list); } $smarty->display("viewimage.tmpl",$_GET['filename'].$_GET['section'].$_GET['pos'].$_GET['filetype']); ?>

Step 4. Create the main template : templates/viewpage.thtml

<h1>Current Section: {$section} </h1> {section name=list loop=$folder_list} <a href="index.php?folder={$folder_list[list]}">{$folder_list[list]}</a><br> {/section} <TABLE width="500" border=1> <TR> {section name=numloop loop=$data} <TD><a href="viewpic.php?pos={$pos}§ion={$section}&filename={$data[numloop]}"><img src="pics/{$section}/Thumbnails/{$data[numloop]}" border="0"></a></TD> {* see if we should go to the next row *} {if not ($smarty.section.numloop.rownum mod $cols)} {if not $smarty.section.numloop.last} <TR> {/if} {/if} {if $smarty.section.numloop.last} {* pad the cells not yet created *} {math equation = "n - a % n" n=$cols a=$data|@count assign="cells"} {if $cells ne $cols} {section name=pad loop=$cells} <TD> </TD> {/section} {/if} </TR> {/if} {/section} <tr><td colspan={$cols} {pager rowcount=$LISTDATA.rowcount limit=$LISTDATA.limit txt_first=$L_MORE} </td></tr></table>

Step 5. Create the default template : templates/default.thtml

{section name=list loop=$folder_list} <a href="index.php?folder={$folder_list[list]}">{$folder_list[list]}</a><br> {sectionelse} Nothing here {/section}

Step 6. Create the image viewing template: templates/viewimage.thtml

<h1>Currently viewing : <a href="index.php?folder={$section}&pos={$pos}">{$section}</a> : {$pic_desc|default:"No description yet..."}</h1> {section name=list loop=$folder_list} <a href="index.php?folder={$folder_list[list]}">{$folder_list[list]}</a><br> {/section} <a href="pics/{$section}/{$filename}" target="_blank"><img src="pics/{$section}/{$filename}" width="450" border="0"></a>

How this all fits togeter? Here's the demo (warnings caused by problem with hosting provider)

This is a fairly complicated tutorial, so I'll begin with a general explanation of what the program does.

Generally speaking, the script starts by getting a list of subfolders of the /pics folder. It then adds this list of folders to the template.

If nothing is passed to the script, it simply displays a list of the folders. If a folder name is passed to the script, it gets a list of thumbnails from the pics/FOLDERNAME/Thumbnails folder, and generates a paginated list of the images, with links to view the full sized image.

The image display script also looks for a file describing the image (image.jpg.txt), reads in the file contents and displays it along with the image.

All this is done using Smarty's caching feature so that it should always run very quickly no matter how many images are contained in a folder.