G2 Customization Guide

mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Mon, 2005-04-04 16:59

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.

[/]

 
royby

Joined: 2002-12-03
Posts: 17
Posted: Mon, 2005-09-19 08:16

The instructions at the top of the themes/matrix/templates/theme.tpl file read:

* 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.

But at what level do you create the new directory named "local" and is the file still saved into that as theme.tpl?

cheers

 
ZionRidge

Joined: 2005-09-15
Posts: 1
Posted: Tue, 2005-09-20 04:48

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 ?

 
RwD
RwD's picture

Joined: 2005-01-09
Posts: 383
Posted: Tue, 2005-09-20 12:42
royby wrote:
The instructions at the top of the themes/matrix/templates/theme.tpl file read:

* 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.

But at what level do you create the new directory named "local" and is the file still saved into that as theme.tpl?

cheers

You create the directory "local" inside the directory where the file is that you want to change. There will be no naming conflicts and you must make sure the copied file has the same name.

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

 
RwD
RwD's picture

Joined: 2005-01-09
Posts: 383
Posted: Tue, 2005-09-20 12:48
ZionRidge wrote:
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...

 
lenroyles

Joined: 2003-08-10
Posts: 9
Posted: Tue, 2005-09-20 16:58
mindless wrote:
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.

Are these links pointing where they should be? I don't seem to be able to find what I was expecting?

Regards
Len

 
shocksll
shocksll's picture

Joined: 2005-06-22
Posts: 352
Posted: Tue, 2005-09-20 17:41
 
mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Thu, 2005-09-29 16:10

the forums bug with urls containing a colon has been fixed, so those links work in all above posts now.

 
erogers

Joined: 2005-09-30
Posts: 3
Posted: Fri, 2005-09-30 19:18

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.

 
RwD
RwD's picture

Joined: 2005-01-09
Posts: 383
Posted: Mon, 2005-10-03 11:04

erogers, try print_r($theme) and print_r($template) then you know the exact makeup of these variables/objects
______________________
I made a theme for G2, try it :)

 
msaba

Joined: 2005-10-04
Posts: 2
Posted: Tue, 2005-10-04 12:22

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

 
shocksll
shocksll's picture

Joined: 2005-06-22
Posts: 352
Posted: Tue, 2005-10-04 12:35
 
RwD
RwD's picture

Joined: 2005-01-09
Posts: 383
Posted: Tue, 2005-10-04 12:35

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 :)

 
msaba

Joined: 2005-10-04
Posts: 2
Posted: Tue, 2005-10-04 13:31

thanks Steve that is what I was looking for.

 
erogers

Joined: 2005-09-30
Posts: 3
Posted: Wed, 2005-10-05 22:40

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...

 
mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Wed, 2005-10-19 17:46

That's the 3rd bullet here: http://codex.gallery2.org/index.php/Gallery2:Tpl_Reference#Smarty_Templates
(linked from the top post of this topic)

 
Leadmill

Joined: 2005-11-02
Posts: 1
Posted: Wed, 2005-11-02 14:42

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

 
nivekiam
nivekiam's picture

Joined: 2002-12-10
Posts: 16504
Posted: Wed, 2005-11-02 15:13

This isn't the thread to post such a question in. And no, I don't recall seeing one. You can, however, take the blue color pack or any other one and create your own.

Do not respond to my comment here, just post a new thread if you need help in creating a color pack:
Here are some other user contributed color packs
http://codex.gallery2.org/index.php/Gallery2:UserContributions#Color_Packs

Creating your own shouldn't be that difficult if you're modifying an existing color pack
____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here

 
iampedro

Joined: 2003-12-10
Posts: 41
Posted: Tue, 2006-01-24 15:01

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>

 
shocksll
shocksll's picture

Joined: 2005-06-22
Posts: 352
Posted: Tue, 2006-01-24 16:05

I wouldn't. What are you trying to do?

Steve Lineberry

 
mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Tue, 2006-01-24 16:56

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

 
NCochise

Joined: 2006-03-06
Posts: 8
Posted: Mon, 2006-03-06 11:32

Moved to a new topic elsewhere!

Sorry! I knew immediately it was in the wrong place, but could not find a way to delete it.

 
mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Mon, 2006-03-06 18:52

NCochise, please post your question in a new topic.

 
fester2001

Joined: 2006-06-20
Posts: 1
Posted: Tue, 2006-06-20 12:05

hey, is it posible to get rid of the icons at the bottem of a gallery

Like this one >[img]http://gallery.menalto.com/gallery2/images/gallery.gif[/img]

 
mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Tue, 2006-06-20 14:31

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