This article describes how you can build custom thumbnail templates for search results, galleries, lightboxes and so on. There are five different viewing styles that you can configure via Site configuration, Thumbnail pages. The modal lightbox page uses a grid type thumbnail. The code editor provides code examples for each of the styles (grid, list, small, large and flow), and for the modal lightbox thumbnails – that you can use as a starting point. If you load the first example code for one of the thumbnail templates and save it without making changes, then the client facing result is the standard result (i.e. what you get without customized thumbnail templates).
There is also example code that you can use if you have configured your pages to use Google Icons instead of button images.
Note that you can change just one or a few viewing style templates. You don’t have to make a custom template for every viewing style if for instance you just want to change the large thumbnail template.
Before you begin
Recommended reading: Thumbnail hover text macro, Using the code editor, Infradox XS customisation.
Make sure that you understand how the XS tags work, before changing the templates described here. You can find more information in the article Infradox XS functions, tags and conditions. You also need to know about constants, locales and repository properties before you start working on the thumbnail templates.
Configuring related settings
It is recommended that you start configuring the thumbnail pages before you use the code editor to make template changes – because the settings will also affect your custom templates. Note that the default templates are complex and use several classes so that everything can be configured with back office settings without making code changes. If however you are going to make code changes, then the code can be simplified (and as a result smaller and faster) by removing classes and/or HTML you don’t need for your specific requirements.
The above screenshot shows where you can configure the thumbnail templates in backoffice
Site configuration, Thumbnail pages
- Click on General settings and configure the Data to display setting. This is used with the tag
- Configure the settings for hovering and so on as needed. Note that the options that are best used depend entirely on what you want to achieve with your custom templates. Create a support ticket if you need advice.
- Open the section Page layout and enable the thumbnail viewing styles that you want to make available on the client facing pages (i.e. grid, list, mini/small, large, flow).
- Open the Alt and Title tags section and configure the alt and title tags. These are used in the templates with
. Note that these are important for several reasons, one of them being SEO.
Site configuration, Metadata display
- Click on General settings and configure what info (i.e. rights, restrictions and so on) you want to use in the thumbnail templates.
You can use these settings in the templates, e.g. with
which outputs 1 if “rights info” is configured to show on thumbnails.
If you decide to use Google icons, then make sure to set this up first. You can then use the example templates that are ready for Google Icons as a starting point. In Site configuration, go to Website style and open the Button images section. If you haven’t changed the settings before, then you’ll see the default Google icon names already filled in. Select the Google icons option and save your settings. You can of course specify different icon names and codes but this is beyond the scope of this article. You can find more information here. Note that the icon names are followed by a colon (:) and a code. The code is used for older browsers, specifically MSIE 9 and lower.
The above screenshot shows the set up for Google Icons
The Grid template explained
This paragraph explains how the grid thumbnail template works and how it can be changed. The other templates are more or less the same, and you should be able to work on those once you have successfully changed the Grid template.
Note that the classes and attributes (set with tags) are important because the script “looks for” elements having – or not having – certain class names and or attribute values.
In the code editor, select Grid (90) in the dropdown box at the top. Then click “Load example” and load the default code into the editor.
The first line looks like this: