How to Create a Gallery with Thumbnails in Silex

Create a gallery by using Oof components!

We saw that you can create a gallery easily by using the Simple gallery plugin.

Here we are going to create a gallery with a function that you can’t have with the simple gallery plugin: the thumbnails of your pictures.

Gallery with thumbnails

For that we will use Oof components.

Note: Oof components are dynamic and open source Flash components that allow, among other things, to create interactions with data bases.

Step 1: Your pictures

To create a gallery with thumbnails, you must have 2 pictures folders: a full-sized folder and a thumb folder.
The full-sized folder will contain your pictures at their full size and the thumb folder will contain the same pictures but, in a smaller size (you can use photoshop for example to resize your pictures).

! Important: your full-sized and thumb pictures must absolutely have the same name and the same extension ( .jpg, .png or .swf format).

Let’s go!

Create a new publication and open the ftp.

Create a new directory named “gallery”. In that directory create a new folder named “full-sized” ; open it and upload all your full-sized pictures.

Return to the “gallery” directory and create a new folder named “thumb” ; open it and upload all your thumbnails pictures.

We can now go to step 2!

Step 2: Display the thumbnails on your publication

To do so, click on “add components” and add the following ones:

  • Thumblist
  • DataSelector
  • RssConnector

Note: the DataSelector and the RssConnector are invisible components. Only the Thumblist will be visible on your publication.

Let’s configure them!

The Rssconnector

Click on “edit” for the “URL base” parameter. Enter the following command:


The DataSelector

For the “list name” parameter select your Thumblist.

For the “icon field” parameter, enter this:


For the “connector name” parameter, choose “RssConnector”.

The Thumblist

The only thing you will change here are the visual parameters. It depends on the result you want.

For example, if you want horizontal thumbnails, check the “horizontal” box. The width, the height and the row height of your thumblist depend a lot of your thumbnails size. That’s why it’s better to modify these parameters once your thumbnails will appear.

Advice: to keep your pictures’s quality, uncheck the “resize image” box.

You can now save and refresh your page. The thumbnails must appear and you can make all the changes needed on your thumblist visual parameters.

Step 3: Display the full-sized pictures

The idea is to display the full-sized pictures by clicking on the thumbnails.

For that, you must add the “Image Display” component.

The only thing to change on this component is the width and the height of your image display.
Generally, it’s better to make them match with the width and the height of your full-sized pictures.

When done, go back to the DataSelector component and choose the “commands to execute on click” parameter.

Click on “edit” and then on the “+”. Enter the following command:


Save and deselect your layer. Click on a thumbnail to check that the corresponding full-sized picture appears. If not, refresh your page and try again.

Your gallery is now over!

Note: to have a picture by default, enter the following action in the action toolbox of your DataSelector:

onResult selectedIndex=0

Confirm, save and refresh your page.

Look at this tutorial in video:

Tags: , , , , , | Posted under Silex | RSS 2.0

Author Spotlight



Leave a Reply

Your email address will not be published. Required fields are marked *