So you've created a killer photo album template and you want to apply it to your Gallery. This tutorial demonstrates how I converted HTML album and photo templates into a Gallery theme.
I assume that you are already comfortable with HTML and CSS and that you already have a basic understanding of the anatomy of Gallery themes. You don't have to be a PHP expert, but basic scripting knowledge and the ability to recognize basic programming patterns is helpful.
Ready to build a theme? Then let's get started.
I created two basic HTML templates, one to display album thumbnails and one to view individual photos. I developed a stylesheet, and a few JavaScript functions to control the look of the HTML template. Because the JavaScript resizes thumbnail containers to fit comfortable on the page, even on window resize, I've decided to call this theme AutoRC—Auto Rows and Columns (thanks for the name floridadave :D).
The design is relatively simple visually—I chose to display the album's title and description and image titles under each thumbnail in the album template. Only the title and caption are displayed on the photo detail template.
http://codex.galleryproject.org/images/7/78/Autorc-html-album-sm.png
http://codex.galleryproject.org/images/5/5b/Autorc-html-photo-sm.png
Here are the files I've created for my mockup:
Please note that these files have not been tested in Internet Explorer 6. I will update them for proper display in IE 6 after completion of this tutorial.
The first thing we need to do is create a folder in Gallery for the new theme. We'll make copies of the original HTML templates, the style sheet, and JavaScript in this folder.
Next, we'll create our theme.inc file.
After that, we'll convert our HTML pages to Smarty templates.
