G2 Customization Guide

Just writing out a few things to help people getting started..

We have some new Theme documentation and a Tpl Reference. This page is still a good summary.

• Add your website header/footer/sidebar.
  The place to start for customization to affect all pages is themes/matrix/templates/theme.tpl. Instructions at the top explain how to create a "local template" file that is used in place of the default file (same concept as "html_wrap" if you are familiar with G1).
• Gallery title
  "Gallery" and "This is the main page of your Gallery" are the title and description of the top level album, just like any other album. Simply choose edit album from the top level to change these.
• Format of tpl files?
  These are "smarty templates". You may place any html you like in your local templates. See http://smarty.php.net/ for documentation on the smarty tags (things with { } around them; tags starting with {g-> are custom G2 tags and you won't find documentation at the smarty website). To include php code in a tpl file put it between {php} and {/php} tags.
• Variables in tpl files.
  Turn on buffered debug output by editing config.php and browse to an album. A smarty debug console will popup showing all the data available to that page (make sure your browser allows popups, at least for your server's domain). To access this data connect the names at each level of indentation with dots.. for example: {$theme.item.title} or {if $user.isRegisteredUser} ... {/if}
• Changes to album display.
  If you are using the matrix theme (default theme for new G2 install) you can make local templates to change how albums and photos are displayed. See themes/matrix/templates/album.tpl and photo.tpl. CSS controlling positioning and appearance is located in themes/matrix/theme.css. You can also create your own theme to create a completely new display for albums/items.. experiment with some of the themes included with G2 to see how different themes can change the viewing experience. However, adding a new theme requires a small amount of php coding ability to define the theme.inc file and an understanding of smarty templates to create the tpl files.
• Adding new functionality.
  G2 uses modules to add functionality.. you can write your own modules to do things like additional processing when items are added or modified, store additional metadata about items, display additional data with thumbnails (item summaries) or in item display (item details), or add new pages to display anything you like. Adding a module requires PHP coding ability and an understanding of smarty templates if the module displays anything in the browser. Look through Wiki / Development section here for some basic information about modules and post in the G2 development forum for some help with how to get your own module going.

[/]

I want to customize Gallery 2 for an artist ,to only display
as comments to the Photos
Date Created :
Medium :
Size :
Price :

Is there an "easy" way to do this without rewrting the databases/code ?

I have just done something like that, you just add the following code to your photo.tpl file (at any place you want)

<table class="mainContentBlock gbBlock">
    <tr>
        <th class="h3" colspan="3">{$theme.item.title|markup}&nbsp;</th>
    </tr>
    <tr class="gbOdd">
        <td class="descriptionLabel">Description</td>
        <td class="descriptionSeparator">:</td>
        <td>
            {if !empty($theme.item.description)}
                {$theme.item.description|markup}
            {else}
                &nbsp;
            {/if}
        </td>
    </tr>
    <tr class="gbEven">
        <td class="descriptionLabel">Date</td>
        <td class="descriptionSeparator">:</td>
        <td>
            {$theme.item.creationTimestamp|date_format:"%Y/%m/%d %H:%M"}
        </td>
    </tr>
    <tr class="gbOdd">
        <td class="descriptionLabel">Size</td>
        <td class="descriptionSeparator">:</td>
        <td>
        	{$theme.item.size} byte
        </td>
    </tr>
    <tr class="gbEven">
        <td class="descriptionLabel">Owner</td>
        <td class="descriptionSeparator">:</td>
        <td>
            {$theme.item.owner.fullName}
        </td>
    </tr>
</table>

For the pricing and the "medium" field you need to activate the custom fields module and add a field called price...

ps
You should start a new thread for questions like these...

No, they should be

http://codex.gallery2.org/index.php/Gallery2:Themes

and

http://codex.gallery2.org/index.php/Gallery2:Tpl_Reference

Steve Lineberry

Is there a reference for the template syntax? For example, all possible variations for theme.item.xxx If it's in the codex, it's well hidden... This page (http://codex.gallery2.org/index.php/Gallery2:Tpl_Reference) has the top level tags, but not the lower level options. Thanks.

Correct me if I am wrong but the How-To 'G2-Themes' seems incomplete. It stated the fairly obvious (how to clone) but the "How do I customize a Theme?" section doesn't contain any information on how change the way the theme looks! Is there another tutorial/how-to I am missing?

I am looking to place the gallery in an existing site template where the gallery is 'wrapped' (header/gallery/footer). Any assistance appreciated.

Thanks.
template - http://karatetraining.org
gallery - http://karatetraining.org/gallery

msaba,
Much of the information you need you need to get from a combination of sources

• Smarty website for help on the syntax of the templates
• The codex for things that are really G2 related
• HTML reference for the HTML parts you need to code in the templates. You can do anything you want in there, don't follow G2 standard ways of doing things, make up your own stuff if you want.
• CSS reference for the styling part.

These things combined plus looking through the source code a bit give you all you need to make a theme. Or at least it is all I needed.
(I used other (Dutch) references, but the ones I listed will do just fine)
______________________
I made a theme for G2, try it

I found that if you turn on debugging in the config file then you get a pop-up window that lists all of the image tags available. FYI, I found after hunting aroudn the forum, I have yet to locate that piece of information in any of the official documentation or how-tos. This seems like an important piece of info to share with users who might want to customize their galleries...

I'm looking for a Red colour pack to match the colour of my website.

Does anyone know if there is one available?

check out our site here http://www.leadmill.co.uk/db/home.php

Hey Steve... When I open my matrix file it has more than what is in that link above of the example theme.tpl. Should I just copy the information from the site and replace what i have in my current custum theme?

Here is the example on the site:

<html>
<head>
<!-- HTML and Smarty tags -->
<!-- YOUR OWN CSS AND JAVASCRIPT -->
</head>
<body>
<!-- YOUR HTML / INCLUDE HEADER -->
<!-- more HTML and Smarty tags -->
{if $theme.pageType == 'album'}
{g->theme include="album.tpl"}
{elseif $theme.pageType == 'photo'}
{g->theme include="photo.tpl"}
{elseif $theme.pageType == 'admin'}
{g->theme include="admin.tpl"}
{elseif $theme.pageType == 'module'}
{g->theme include="module.tpl"}
{elseif $theme.pageType == 'progressbar'}
{g->theme include="progressbar.tpl"}
{/if}
<!-- more HTML and Smarty -->
<!-- YOUR HTML / INCLUDE FOOTER -->
</body>
</html>

Here is my code:

{*
* $Revision: 1.7 $
* If you want to customize this file, do not edit it directly since future upgrades
* may overwrite it. Instead, copy it into a new directory called "local" and edit that
* version. Gallery will look for that file first and use it if it exists.
*}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
{* Let Gallery print out anything it wants to put into the <head> element *}
{g->head}

{* If Gallery doesn't provide a header, we use the album/photo title (or filename) *}
{if empty($head.title)}
<title>{$theme.item.title|default:$theme.item.pathComponent|markup:strip}</title>
{/if}

{* Include this theme's style sheet *}
<link rel="stylesheet" type="text/css" href="{g->theme url="theme.css"}"/>
</head>
<body class="gallery">
<div {g->mainDivAttributes}>
{*
* Some module views (eg slideshow) want the full screen. So for those, we
* don't draw a header, footer, navbar, etc. Those views are responsible for
* drawing everything.
*}
{if $theme.useFullScreen}
{include file="gallery:`$theme.moduleTemplate`" l10Domain=$theme.moduleL10Domain}
{else}
<div id="gsHeader">
<img src="{g->url href="images/galleryLogo_sm.gif"}" width="107" height="48" alt=""/>
</div>

<div id="gsNavBar" class="gcBorder1">
<div class="gbSystemLinks">
{g->block type="core.SystemLinks"
order="core.SiteAdmin core.YourAccount core.Login core.Logout"
othersAt=4}
</div>

<div class="gbBreadCrumb">
{g->block type="core.BreadCrumb"}
</div>
</div>

{* Include the appropriate content type for the page we want to draw. *}
{if $theme.pageType == 'album'}
{g->theme include="album.tpl"}
{elseif $theme.pageType == 'photo'}
{g->theme include="photo.tpl"}
{elseif $theme.pageType == 'admin'}
{g->theme include="admin.tpl"}
{elseif $theme.pageType == 'module'}
{g->theme include="module.tpl"}
{elseif $theme.pageType == 'progressbar'}
{g->theme include="progressbar.tpl"}
{/if}

<div id="gsFooter">
{g->logoButton type="validation"}
{g->logoButton type="gallery2"}
{g->logoButton type="gallery2-version"}
{g->logoButton type="donate"}
</div>
{/if} {* end of full screen check *}
</div>

{*
* Give Gallery a chance to output any cleanup code, like javascript that
* needs to be run at the end of the <body> tag. If you take this out, some
* code won't work properly.
*}
{g->trailer}

{* Put any debugging output here, if debugging is enabled *}
{g->debug}
</body>
</html>

iampedro, please start a new topic if you have any more questions.

NCochise, please post your question in a new topic.

Please post your question in a new topic (and see the FAQ/How Tos)