Categories
Chameleon skin jAlbum Tutorials

Adding custom header and footer to Chameleon galleries

Chameleon will include a header and footer if they are in the GUI (Settings > Header/Footer) or as plain text files named header.inc and footer.inc, respectively, located in an Image Source Folder or the Skin Folder (JAlbum/skins/Chameleon). The header is placed below the control bar and the footer at the bottom of the page. They give further control over formatting, are independent of the rest of the page contents, and can be used in addition to the Custom Link entries on the Chameleon > Album information tab.

Where to Put Header & Footer Information?

  • GUI

    (Settings > Header/Footer) : The GUI is global. Entries here are used by the index- and slide-page generating routines, and appear in each and every folder. Also, there are separate pages for the Index and the Slides. This means that special code (ie using the $level & $currentFile variables) is not required to differentiate between the two in the GUI, whereas it is required in the .inc files. See later examples.

  • Skin Folder

    If .inc files are placed in the “JAlbum/skins/Chameleon” folder the header/footer will be added to every page you generate with Chameleon. You can simply rename them if you don’t need them.

  • Image Source Folder

    If .inc files are placed in the image source folder, the header/footer information will be included on the index and slide pages generated from the given folder. You can have different .inc files for each folder.

The header/footer information is used in the following order: data found in the GUI is used unless .inc files exist in the Skin Folder unless .inc files exist in the Image Source Folder

Note that the above also works for virtual folders, of which there are 2 basic forms:

  1. A real folder in the Image directory, into which images are dragged in the GUI. (The folder exists in the Image directory but the dragged-in images are links. Deleting the images just deletes the links).
  2. Folders dragged directly into the GUI. (The folder does not exist in the Image directory but the images are real. Deleting the virtual images may delete the remote real images!).

If a header or footer is not required in some folders, put empty .inc files in those folders. Any combination of header and footer files to suit the album requirements can be used, and each .inc file can contain individual, folder-specific text. HTML (CSS) formatting elements can be used, allowing a little bit of creativity to be added to an album. If you use special accented characters, make sure to save the file using UTF-8 encoding. Code detailed below can be used in the .inc files to further differentiate between Index and Slide pages, whereas it not required in the GUI.

A simple text example

You can add a simple line of text alone, but some formatting can help a lot on visual impact. In the following example we align the text centered, make the font somewhat bigger and change its color.

Also we will add a link utilising the <a href="">...</a> HTML formatting tag. Note that each HTML tag has its own closing tag starting with ‘/’. One of the few exceptions is the <br/> tag which stands for line break and is self-terminating. Remember, no ordinary line breaks work in HTML; use <br/> for a simple linebreak, <p>...</p> for a paragraph.

The target="_blank" tells the browser to open the link in a new window.

<!-- Save as header.inc -->
	<p style="color:#FF6600; text-align:center; font-size:120%">
		Our trip to London - 14-17/10/2005.
		<a href="http://www.londontown.com/" target="_blank">
			Click here to go to London !
		</a>
	</p>

Adding images to the header/footer

In HTML you can add images with the <img> tag. You have to specify its path and optionally its dimensions, border, etc. If the image sits already on the web you can simply add its link as <img src="http://jalbum.net/images/icons/heart.gif" />. Note, that <img> tag also requires the self-terminating / before the > sign.

But if you want to supply the image with the gallery you need to place it in Chameleon’s /res folder to make sure to be included in all generated albums. In this case you can refer to these images as $resPath/myimage.jpg. The $resPath variable will always point to the gallery’s /res folder.

So first prepare your image in the desired size, and save it to Program Files / JAlbum / skins / Chameleon / res folder as .gif, .jpg, or .png, then use the code below to include it on all pages.

<!-- Save as footer.inc -->
	<p>
		<a href="http://www.mysite.com/" target="_blank">
			<img src="$resPath/heart.gif" border="0" />
		</a>
	</p>
	<p style="text-align:center; letter-spacing:5px;">
		Click my heart!
	</p>

Using Chameleon’s own table style

If you would like to place your content in a table of Chameleon’s table style use the <table> HTML element. Using tables is a bit more complicated. You must specify the whole table construct with table row <tr> and table cell <td> tags too. I used the ${tableWidth} skin variable to match its width with the others and also applied the infotable class which is used for the tables. The cell content is aligned to center and added the “smalltxt” CSS style which is used in the tables. You can use the “xsmalltxt” class also which uses a little smaller text. Or instead of using class=”” you can define the content’s style directly with the style=”” format.

<br/>
<table width="${tableWidth}" cellpadding="4" cellspacing="0" class="infotable">
	<tr>
		<td align="center" class="smalltxt">
			This table looks the same as the other tables on page.
		</td>
	</tr>
</table>

Different content for index and slide pages

In order to have different content for index and slide pages you can use a testing for $currentFile variable which exists only on the slide pages. The syntax is 

<ja:if exists="currentFile">This is the slide page</ja:if>
<ja:else>This is the index page</ja:else>

To detect the top-level folder use $level variable which is 0 on the top level. 

<ja:if test=<%=level == 0%>>Welcome</ja:if>

An example of a general header.inc is: 

<!-- Header content starts here -->
	<ja:if exists="currentFile">
		<!-- Slide Page: don't want a header -->
	</ja:if>
	<ja:else>
		<!-- Index Page: want a header ONLY for the top-level image source folder -->
		<ja:if test=<%=level == 0%>>
			<div style="color:#FF6600; text-align:center; font-size:medium">
				Welcome to Jalbum & Chameleon!
			</div>
		</ja:if>
	</ja:else>
<!-- Header content ends here -->

and a footer.inc:

<!-- Footer content starts here -->
	<ja:if exists="currentFile">
		<!-- Slide Page -->
		<p style="color:#FF6600; text-align:center; font-size:90%">
			Use the mouse to interact with Images. 
			Press F11 to maximise viewing window in Web Browser.
		</p>
	</ja:if>
	<ja:else>
		<!-- Index Page -->
		<p style="color:#FF6600; text-align:center; font-size:90%">
			Click Folders to see more Thumbnails, or click Thumbnails to see Images. 
			Press F11 to maximise viewing window in Web Browser.
		</p>
	</ja:else>
<!-- Footer content ends here -->


Note that the <ja:if> and <ja:else> elements need to be closed, because other errors might occur. If you do not need the slidepage (or indexpage) content just remove the corresponding line.