How to create a polaroid image gallery with Tabulizer

In this tutorial we will describe how to turn a list of image filenames into a fancy polaroid image gallery! So, why use a dedicated gallery extension, when you can do it with Tabulizer?

Since there is no built-it functionality to convert a list of images files into a gallery, we will use the modification function polaroideffect:

Function Namepolaroideffect
Function Argsnone

In the following paragraphs we will give some examples and the visual output. Note that by changing the associate CSS file you can affect all aspects of the resulting gallery, including background colors, font type and colors, etc. The first two examples are using the following sample table, where you have listed a number of image files and a short description (labels). Another alternative is to give just the folder that contains the images, as explained in the last paragraph of this tutorial.

Basic Gallery

Here is the input used:

Here is the resulting gallery:

Fancy Gallery

Here is the input used:

Here is the resulting gallery:

Use a directory as your input, instead of a list of files

It is possible to create the image gallery by specifying the folder that contains the images, instead of each file separately. Of course, by doing so we cannot give a subtitle/short description to our images, but this is not always a requirement.

In order to convert the files contained in a folder into an image list, that will be processed later on by the polaroideffect modification function, we are using another modification function. It's named scandirurl and takes for following arguments:

Function Namescandirurl
Function Argsnone
Note that the actual arguments of the scandirurl are taken from the first row of the input table. More specifically, it expects the following input table:
dirThe initial directory(folder) that contains the images. It can be a relative path to the root directory of your site, or an absolute path. This is the only required cell, all others are optional.
recursiveThis can be 0 or 1. If th value is set to 1, it will scan not only the initial directory but all sub-diectories as well. The default value is 0 (i.e. non-recursive).
maskThis is a regular expression that can be used by preg_match while scanning the directories, giving you the possibility to select only certain files instead of all. It's an optional field and you can leave it blank.
max_countThis is another optional field that is used when you want to limit the number of files that will be returned by the scanning process.
abs_urlThis is an optional field that can be either 0 or 1. 1 indicates that the resutling URLs should contain the site domain. The default value is 0.
Here is an example input table that can be fed into scandirurl modification function:
Notice that:
  • images/tabulizer/demo is the initial directory that we will scan for image files
  • 0 means that the operation is non-recursive.
  • /^avatar/ is the regular expression that translates to "find all files that begin with avatar"
  • The rest of the optional fields were not specified and left with their default values.
Having explained how scandirurl works, lets continue with our example. Here is a sample input used:

Here is the resulting outcome:
You can download the sample ruleset archive that was used in this tutorial by clicking here. It contains the two used modification functions.