Difference between revisions of "Gallery2:Themes" - Gallery Codex
Personal tools

Difference between revisions of "Gallery2:Themes"

From Gallery Codex

Line 13: Line 13:
 
; Progress bar: a page that allows the theme to provide the user with some kind of visual indication that a long operation is in progress.
 
; Progress bar: a page that allows the theme to provide the user with some kind of visual indication that a long operation is in progress.
  
== How do I customize a Theme? ==
+
== Anatomy of a Theme ==
  
 +
== How do I customize a Theme? ==
  
 
* How do I create a brand new theme?
 
* How do I create a brand new theme?

Revision as of 16:09, 6 August 2005

Template:Expand

What is a Theme?

A theme is the outermost skin of Gallery. It's a thin but powerful layer that allows you to control almost every aspect of the user interface to make Gallery look exactly the way that you want. Site Administrators can choose which themes are available in the Gallery, and then you can optionally choose a different theme for each album. Because themes are very powerful, not all themes provide the same functionality. For example, the Classic theme allows you to display a list of sub albums next to each album, functionality that's not available in other themes.

There are six different page types in Gallery. A theme is responsible for understanding and drawing each of these different page types in a consistent way.

Album 
a page where you can view many photo thumbnails at once. Typically you don't see any single photo in detail on these pages.
Photo 
a page where a single photo is displayed in detail. Typically this page focuses on only one image, though it may show thumbnails of the other images around it.
Module
pages that wrap content generated by modules that add additional functionality, like the slideshow and the members list. The actual content of these pages is generated by the module itself (and can vary extensively).
Admin
pages that wrap content generated by the Gallery framework to administrate the site, items, or users.
Error
a page that Gallery displays when something has gone wrong, giving the user instructions on how to proceed to correct the error (or whom to notify)
Progress bar
a page that allows the theme to provide the user with some kind of visual indication that a long operation is in progress.

Anatomy of a Theme

How do I customize a Theme?

  • How do I create a brand new theme?
  • How do I clone an existing theme?
  • How do I change the way a theme page looks?

Creating a new theme

The easiest way to create a new theme is by cloning a theme and then modifying it.

Cloning a theme

Pick a theme that is similar to the functionality that you want. We suggest that you start from one of the themes that comes with Gallery2 itself as those are usually the most current code. Your new theme will need a unique theme id. Ids are a single word that contains only alphanumerics and underscores and should be related to the name of your theme. So let's say that you're cloning the Matrix theme and making a new theme called MySite, you might give it the id mysite.

Let's start by making a copy of the the matrix:

 cd gallery2/themes
 cp -r matrix mysite

Now let's edit mysite/theme.inc to set the details for your new theme. Edit mysite/theme.inc and inside you'll see a block that starts like this:

 class MatrixTheme extends GalleryTheme { 

     /** 
      * Constructor 
      */ 
     function MatrixTheme() { 
         global $gallery; 
         $this->setId('matrix'); 
         $this->setName($gallery->i18n('Matrix')); 
         $this->setDescription($gallery->i18n('Standard Gallery2 look and feel')); 
         $this->setVersion('0.9.9');  /* Update upgrade() also */ 

You need to change every reference to matrix to mytheme so that it looks like this:

 class MySiteTheme extends GalleryTheme { 

     /** 
      * Constructor 
      */ 
     function MySiteTheme() { 
         global $gallery; 
         $this->setId('mysite'); 
         $this->setName($gallery->i18n('My Site')); 
         $this->setDescription($gallery->i18n('This is a theme for My Website')); 
         $this->setVersion('0.9.0');

A few notes about this:

  • You must use the same letters in the class name and function name as you use in the id, but the capitalization is not important.
  • You can use whatever version number you want, but stick with the #.#.# format to make it easier for you to write your own upgrade code.
  • If the original theme has an upgrade function, you can delete it from your new theme (and add it back later when you start supporting upgrades)


Now, go to the Site Admin and select the Themes option from the left sidebar. Click on the "All Themes" tab and you should see your "My Site" theme show up in the list.

Click the "install" link then the "activate" link and your theme should now be available for use! Edit an album and select your theme from the list and you'll be using your own personal copy of the Matrix theme!

External Links

advertisements