Minor update to ImageSlideShow
Following on from a number of comments left here on the website and some direct email, including helpful hints and tips, I’ve a minor update to ImageSlideShow to share.
It is a minor update but an important one. Unfortunately due to the way ISS has to work and my limited knowledge of Joomla, ISS would fail validation for XHTML due to how the internal CSS and javascript files were loaded.
David sent me a resolution to this demonstrating the use of the addStyleSheet and the addScript functionality of the Joomla JDocument class
$doc = &Jfactory::getDocument();
$doc->addStyleSheet(JURI::root(true) . '/modules/mod_briaskISS/mod_briaskISS.css');
$doc->addScript(JURI::root(true) . '/modules/mod_briaskISS/mod_briaskISS.js');
So that change has been made, tested and the updated version of ImageSlideShow is available from here .
How to write a Joomla! 1.5 module.
A Joomla! module is a simple extension to Joomla!. Many modules are display only or have limited interaction with a user. For more complex extensions or interactions then Joomla! plugins or components are more appropriate. In this post I’ll describe the basics of module development as I understand them.
Written in PHP, at their simplest a module only requires two files, one containing configuration information and the other code. In the best tradition of programming I’ll use a “Hello World” example to demonstrate.
Under the root of your Joomla! installation you will see a directory called modules, unsurprisingly this is where modules are installed to. Each module requires a unique name and although it is not required to be adhered to , a naming convention is in place which notes the module name should begin with “mod_” to denote module, components begin with “com_” (in the component directory) but oddly plugins do not seem to have a naming convention.
I’ll call my module “mod_briaskHello”. Joomla! expects the configuration file to be named the same as the name as the module and the configuration file is XML so I’ll create a file called mod_briaskHello.xml. The configurtaion file can also be considered the installation file as it is this file that Joomla! reads when it is installing the module. The module will be installed into the “mod_briaskHello” directory under the main modules directory.
Although any text editor can be used to create the file, I tend to use Notepad++ . The contents of the file should be as follows:
<?xml version=”1.0″ encoding=”UTF-8″?>
<install type=”module” version=”1.5.0″ >
<name>mod_briaskHello</name>
<author>Briask</author>
<creationDate>May 2008</creationDate>
<copyright></copyright>
<license>GNU GPL</license>
<authorEmail>briask@briask.com</authorEmail>
<authorUrl>http://www.briask.com</authorUrl>
<version>1.0</version>
<description>A HelloWorld example</description>
<files>
<filename module=”mod_briaskHello”>mod_briaskHello.php</filename>
</files>
<params>
<param name=”moduleclass_sfx” type=”text” default=”" label=”Module Class Suffix” description=”PARAMMODULECLASSSUFFIX” />
</params>
</install>
You will need to change the various elements to suit your own details, the following are purely descriptive elements and have no effect on the operation of the module name, author, creationDate, copyright, license, authorEmail, authorUrl, version, description.
The install element and associated attributes type and version detail the type of Joomla! extension (module, component, plugin) and the version of Joomla! that the module is compatible with 1.5.0 meaning J! 1.5 and above
The files element and its child filename elements detail the files that make up the module and will ensure that they are copied to the modules directory. The filename element attribute module indicates the module this file is associated with and the value of the element indicates the actual filename. In the example config file above the module is noted as being “mod_briaskHello” and the file to be installed is called mod_briaskHello.php.
The params element is used to detail the parameters associated with a module, can specify types of parameter, sizes etc. I’ll cover those in a post on more detailed module development. The parameter in the example listed is that for adding the “Module Class Suffix” to a module.
Next we need to create the mod_briaskHello.php file. As a default template the file needs to contain
<?php
/*
* Any comments or copyright(left) or licensing details
*/
defined(’_JEXEC’) or die (’Direct Access is not allowed’);
?>
The defined(’_JEXEC’) or die (”Direct Access is not allowed’); line should be included as the first line of code to be executed in all modules as it helps to ensure that the module will only be called by Joomla! and not bay any nasty hacker type code.
Now for the exciting part! Add the line ” echo JText::_(’Hello World!’);” after the “defined” statement. When executed that line will output Hello World . The _ method of JText hooks into the translation services that can be installed with J!.
Now that the code is written, it needs to be installed into Joomla! To this we need to create a ZIP file that the Joomla! extension manager can read and use to install the module. Use your favourite compression tool to create the zip file and ensure it is named the same as the module, in this case the file would be named mod_briaskHello.zip. Now just follow the usual steps in Joomla! for installing a module and you’ve written/installed your first Joomla! module. You should see that the module appears in the list of modules and that on the filesystem of your server a new subdirectory of the modules directory has been created for this new module.
Have fun!
Bug fix release of ImageSlideShow
You’ll find below a link to the latest version of ImageSlideShow for Joomla! 1.5 .
This release addresses some minor bugs/coding issues and adds the Module Class Suffix parameter.
You can read about why this update came about and what is next for ImageSlideShow in another post on my “blog”.
Many thanks to you all for the kind comments and interest in this module. This was just an idea I had for how to teach myself various aspects of development in the web world but seems to satisfy a need for some simple uncomplicated modules which may well give me direction for whatever future development work I do in this area.
ISS seems to have been used in quite a number and quite a variety of sites around the world. Everything from communites to volleyball teams to musical bands, love to see it being used and would love to see more sites that use it. So if you have a site that uses ISS send me a link and I’ll pop up a post here so others can see how it is used too.
How to : Add Module Class Suffix to a Joomla! 1.5 module
This field can contain a suffix that will be applied to the CSS classes for the Module styles of this page. This allows individual Modules styling with relative ease. For example, if the suffix .foo is entered here, all CSS code elements in the CSS file within the Template for Modules will have .foo added to them. Separate entries would then need to be added in the CSS file of the Template, for each corresponding difference.
What you need to do is add the following to the module XML file and thats it!
<param name=”moduleclass_sfx” type=”text” default=”" label=”Module Class Suffix” description=”PARAMMODULECLASSSUFFIX” />
Expect to see this in the next update so you’ll be able to add all the CSS styling you could ever want to the SlideShow.
How to - Configure ImageSlideShow
Image Slide Show for Joomla! 1.5 needs very limited configuration for it to work. for most purposes the only parameters that need to be modified are “Image Directory” and the “Height” and “Width” parameters. Below are listed all the current parameters and what effect they have on ISS.
- Image Directory : Set this to the location on your website where the images that you want ImageSlideShow (ISS) to use are located. ISS will use all the images (BMP, GIF, JPG and PNG) that are located in the location specified.
- Height in pixels : Sets a common height that ISS will attempt to display the images at.
- Width in pixels : Sets a common width that ISS will atttempt to display the images at.
- Transition Delay : Sets a delay, in miliseconds, between each phase of the transition between two consecutive images. A lower value will speed up transition but utilises more CPU cycles. A higher value will slow down transition but will use less CPU cycles
- Next Image Delay : Sets the period of time, in miliseconds, that determines for how long the current image will be displayed and when the next image will start to transition in.
- Slideshow title : Sets the “alt” tag on the image so that it displays the text when the cursor “hovers” over the image.
- URL : Sets the URL to which the browser will navigate to if the image is clicked. Works in tandem with “Enable Link?”
- Enable Link? : Has 3 options, “disable” which will not allow any action whn image is clicked. “Enable (same window)” => navigate to the URL within the same browser window. “Enable (new window)” => navigate to the URL by opening a new browser window.
- Display Sequence: Determines the sequence ISS will display the images. “Disable” will display the images in the sequence that the images were read from the source directory. “Shuffle” will load the images and then place them in a pseudo-random order. Pattern will repeat once all images have been displayed. “Sorted” will load the images and then perform a “natural” sort by file name. Natural sort will sort files alphabetically as a human understand i.e. “img1.jpg” is followed by “img2.jpg” and so on.Pattern will repeat once all images are displayed. “Totally Random” is just that, random pattern of images being displayed.
- Resize Images: If enabled will resize the images in the specifed directory to the size specifed. this does not modify the original images. ISS will create a resized copy of the image in a subdirectory of the directory containing the images. The sub-directory is called briaskThumbs, this directory must be created by you and the process running Joomla! must be given permission to write to that directory. How you do that very much depends on the server environment that you are running Joomla! under and is not something I can answer in this short post.
Briask- Minor update to ImageSlideShow
- OK Computer! Just start already…
- What a to-do about what to do!
- Final Fantasy - take a listen.
- Return from Vacation!
- How to write a Joomla! 1.5 module.
- ImageSlideShow for Joomla! 1.5.x
- Image Slide Show and resizing images.
- Joomla! and more Music I Like
- Bug fixing for ImageSlideShow