Digital Dutch
arles image web page creator
Navigation
 

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.

Arles gallery created with templates. Click image for example gallery.
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}

Table with thumbnail tags in Dreamweaver

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


email: info@digitaldutch.com