Using thumbnail tags in Arles templates
Most aspects of your image galleries
can be customized in the Arles interface.
For even more control you can
use Arles HTML templates.
This tutorial will show you how
to place thumbnails anywhere on the index page with thumbnail
tags and how to specify custom sizes for thumbnails.
We will create an irregularly
shaped table gallery with one thumbnail that is
larger than the default size and some custom text in
two bottom
cells.

Click image for example gallery
Create a new Arles template file
To create a new template,
in the Arles main window select the Edit menu > HTML
Templates. In the HTML
templates window select the "Simple" template
type and "Use index page template". Click the
Create button and specify
where you want to save the new template. The Edit button
allows you to open the template in the default Windows
HTML editor.
Edit the template
Once you saved the new template
on your hard disk, open
the file in your favourite
HTML editor, which is in my case Dreamweaver. Not
much to see yet. When generating galleries Arles replaces
the {indexpage.body} tag
with the thumbnail table, navigation items and some
other stuff. For those interested in the details, it
is replaced with the
code in the indexpage_body.html template file which
you can
find
in the defaulttemplates
folder, which is generally located in
C:\Program Files\Digital Dutch\Arles Image Web Page Creator\defaulttemplates
We delete the {indexpage.body} tag,
because we will be defining our own page layout. The newly
created template with
a custom table and some text at the bottom cannot yet
be used by Arles, as it does not
contain the required tags.
Add Arles thumbnail tags
When generating a gallery, Arles
first looks for the {indexpage.body} tag
in the main template, which we just deleted. In addition,
it scans for {indexpage.thumbnail} tags.
You can place as many of these tags in your template
as you want. They tell Arles where to
put the thumbnails.
In our HTML editor we
now add
thumbnail tags in
every table cell where we want thumbnails to be
shown. Save the template and generate
the gallery
in Arles. We now have a working image gallery.
I did select the "Crop to Fit" option on
the thumbnails tab in Arles
to make the gallery look more balanced.
Specifying a custom thumbnail size
You can specify a custom size
for thumbnails by setting the width and height attributes
in the thumbnail tag.
To create a thumbnail with a width and height of 220
pixels, we change
the thumbnail tag in the first table cell to:
{indexpage.thumbnail width=220 height=220}

Once again, save the template
and regenerate
the gallery.
The gallery
now works like we want it. For most users
this result might be good enough. The only problem
is that some features,
like navigation, custom HTML and subcategories, won't
work.
Enabling navigation, banners,
custom HTML, title and subcategories
For the navigation, custom HTML
and subcategories to work, Arles looks for the required
tags in the template. Those features will not be added
if those tags can't be found. To fix this we copied
the required code from the indexpage_body.html default
template into
our final template.
You can download the final template
by right clicking this
link and selecting "Save Target As".
|