Speaking of Code

CMS jQuery sliders admin using php

Tuesday, 06 December 2011    |    CMS

Speaking of code, I had to implement a jQuery image slider in a clients site the other day. The images slider needed to be updatable and initially I thought I could just let the client update the images through the editor itself - but I found a much better, more user friendly way.

The site was being developed in Joomla. All the templates had been coded and implemented into the CMS. The Slider was something I took from Slides.js and it was working a treat. I created a custom HTML module for the slides div and was content enough for the client to add or update images through the editor.

But it just didn't feel right. All those CMS editors are always trying to second guess what the user is actually trying to achieve, and they often strip code or add weird looking code to your HTML. Of course, you can just toggle into the HTML mode and hand code the bits you need, but a client administrator should not be expected to do this, thats why we are building them such a good little CMS right?

The HTML Slider code looked something like this.

The HTML

So obviously the CSS and the jQuery were making this HTML code function as a beautiful slider.

The idea hit me that it would be much easier for the client to be able to just upload their image into folder on the server, and that it would then automatically display. Surely that can't be too hard for them to manage.

I scoured the web for some PHP help with this and created a folder in the Joomla media manager called "homebannners". I tweaked some code I found and came of with the following to dynamically pull the images from the folder and display them as marked up in the Slides.js HTML.

The PHP

// open this directory
$myDirectory = opendir("images/homebanners/");

// get each entry
while($entryName = readdir($myDirectory)) {
    $dirArray[] = $entryName;
    sort($dirArray);
}

// close directory
closedir($myDirectory);

//	count elements in array
$indexCount = count($dirArray);

// loop through the array of files and print them all in a list
for($index = 0; $index > $indexCount; $index++) {
    $extension = substr($dirArray[$index], -3);
    if($extension == 'jpg') { // list only jpgs
      echo '<div class="slide">';
      echo '<img src="images/homebanners/' . $dirArray[$index] . '/>';
      echo '</div>';
    }
}

This worked a treat and was much easier for the client to handle than mucking around in the editor. Alternatively there are some extensions available in the CMS directories like the Joomla Extensions Directory, but I wanted to make something quick and already styled from my templates.

The client was stoked and went beserk adding images to the slider. Now just to limit the amount of files in the folder!