Zentools for Joomla is a flexible, responsive and multi purpose extension that offers the ability to display content in many different ways from slide shows, carousels, grids, accordions, lists and many more.

In this tutorial a Zentools slide show is created using a directory (folder) of images. The images are then linked to web pages using the Zentools external link function.

Setting up a Zentools module

Use the "New" button in Joomla Module Manager and select the Zentools module from the list.

Configuring the Zentools module

To configure any Zentools module it is better to navigate through the Zentools setting tabs in sequential order as new option tabs will appear once settings are selected.

General Settings tab

1. Choose slide show for the Layout Type.
2. For the Content Source chose Directory.
3. The count setting in this case is set to 3 (to match the number of images and links to be used).
4. Link Behaviour needs to be set as External Links.
5. In the Links box add the external links (see the attaching links section below).
6. Using the drag and drop, drag across the image and title blocks (in this order).

Attaching links to the items in the slide show

The next step is to attach your links to the images in the slide show. You can use absolute or relative urls here so it's possible to link to pages within your site or to other websites.

All links need to be on a new line. A group of links for your images might look like the list below -

1. index.php/template-features/t3-features/solid-template-framework
2. index.php/template-features/font-icons
3. http://www.joomlabamboo.com

Image Source Settings tab

1. Using Image Directory, select the correct image folder, which in this case is named slideshow-images (see below - Naming and adding the images to a folder).
2. Order images based on prefix should be set to “yes” as this enables the sorting of the images by numbers, e.g. 1-Blue_girl_blond_hair.jpg is the first image displayed.
3. In the File name separator character, change this to underscore _ (this enables images to be uploaded via the media manager unlike +). The file separator character enables the file name to be split into different words on display.

The Rest of the Zentools options

The rest of the slide show options do not affect the interaction between external links and the images.

Naming and adding the images to a folder

In order to display text on the finished slide show using a directory of images, it is important that the same image file naming structure is followed. In the example below, the images are named as follows:-

• 1-Blue_girl_blond_hair.jpg
• 2-Sunny_sun.jpg
• 3-Orange_Hair_Girl_Bargin_offers.jpg

The number and hyphen in the file name will act as the prefix and combine with module settings to provide the order in which the images display in the slide show. Underscores in the file names are used to separate the words. These words minus the prefix will appear in the slide show as the image title. The title will only display if the drag and drop title option is selected (see General settings tab section).

Once the images are created, they need to be uploaded to a new folder in the web site images folder. This can be done by using the Joomla administrator media manager or via FTP.

Ordering and front end

With the image file names now containing prefixes they now match the Zentool setting order for the external links. To test the images and external links are working correctly open up the front end of the site and navigate through the slide show.

With this example the slides display the text as expected and each slide when clicked loads the correct external link.

Feedback

If you have questions about this tutorial or requests for additional tutorials and blog posts, we'd happy to hear from you.