Gallery2:Themes:How to Create a New Theme - Gallery Codex
Personal tools

Gallery2:Themes:How to Create a New Theme

From Gallery Codex

How to Create a New Theme

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.

The HTML Templates

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.

Getting Started

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.

  1. First, I created a new folder in gallery2/themes/ named 'autorc'
  2. Next, I copied theme.css and functions.js to the autorc folder
  3. Inside of gallery2/themes/autorc, I made a new folder named 'templates'
  4. I copied album.html and photo.html to the new templates folder
  5. I changed the file extension on album.html and photo.html to .tpl
  6. Since I didn't create templates for admin, error, module, or progressbar pages, I copied these templates from the Matrix theme (themes/matrix/templates)

Next, we'll create our theme.inc file.

After that, we'll convert our HTML pages to Smarty templates.

advertisements