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 Name
polaroideffect
Function Args
none

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.

http://www.tabulizer.com/images/tabulizer/demo/avatar_1.png	Mary
http://www.tabulizer.com/images/tabulizer/demo/avatar_2.png	Wisley
http://www.tabulizer.com/images/tabulizer/demo/avatar_3.png	Homer
http://www.tabulizer.com/images/tabulizer/demo/avatar_4.png	Igor
http://www.tabulizer.com/images/tabulizer/demo/avatar_5.png	Maurice
http://www.tabulizer.com/images/tabulizer/demo/avatar_6.png	Dean
http://www.tabulizer.com/images/tabulizer/demo/avatar_7.png	James
http://www.tabulizer.com/images/tabulizer/demo/avatar_8.png	Suzy
http://www.tabulizer.com/images/tabulizer/demo/avatar_9.png	Anna

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 Name
scandirurl
Function Args
none

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:

dir

recursive

mask

max_count

abs_url

Explanations:

dir	The 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.
recursive	This 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).
mask	This 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_count	This 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_url	This 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:

images/tabulizer/demo

0

/^avatar/

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: