Random Images In a Joomla Article

There’s a random images module for Joomla that I use in some places. However, i wanted to have random images appear in the body of one specific content item, and not anywhere else. I pulled together a few technologies, including:

  • kl_PHP
  • Blue Lights Template
  • Random Image Module

Together, they let me do it. Read on for the full scoop.

1. Download and Install kl_PHP

The kl_PHP module allows you to insert PHP code in an article and then Joomla will actually execute it. It is hard to find online, as the original site appears to be down or broken or something. I found kl_PHP at JoomlaFrance. I installed it as a mambot, and it worked fine. Nothing special there.

2. Upload some Images

To get this to work, you’ll need to upload some photos and know where you put them. I recommend the following steps.

  1. Make all your images the same size. If you let the browser resize them or if they’re all different sizes, they’ll look bad. Because of the nature of how I was using them, I chose to make them all 250 pixels wide. I let the height vary a little, but not too much.
  2. Create a folder for just these images. Go to Media Manager and create a folder.
  3. Upload your resized images to the special folder you created.

Your folder will be rooted in /images on the web server. So, if you called your folder “random,” then the path you need to know is “/images/random.”

3. Configure a Random Images Module

Go to the Site Modules control in the administrator console, and find “Random Image.” Change this how you like. You’ll want to set things like:

  • “Show Title” should be off
  • The folder for the images has to be set to the one you created above (e.g., “/images/random”)
  • Set the size of the images, if you want. If you don’t, Joomla will pick a pretty small size.
  • Set “Published” to Yes

Note: Use small images! If you don’t resize your images, people will waste time and bandwidth downloading big images. For example, if you got them from your digital camera, and they’re 6 megapixel images (e.g., around 6 megabytes in size), use some software to shrink them down. If you put a 6 meg photo on your web site, and then tell Joomla to display it as 360×240, people still download 6 megabytes of photo. Their web browser just struggles with it and has to convert it to a smaller size after they’ve downloaded the whole thing. Your site will be faster and your users will be happier if you resize your images small.

4. Examine your Template

I use a template called Blue Lights. You can do this with any template, but what you do may be a little different than what I did. What you’re looking for is a module position that is not used by your template. In my case, I discovered that Blue Lights does not use the inset position, so I used that.

An easy way to figure out if a module position is used is to publish your “Random Image” module (that you created in Step 3) in various positions. If it doesn’t show up at all, then your template doesn’t use that position. For example, virtually all templates use “left” and “right.” But some may not use “cpanel” or “toolbar” or “header”. Find one that’s unused. It doesn’t matter what it’s called. It just matters that your template has no use for it.

5. Use kl_PHP

Advanced users have probably been skimming. “Get to the good part already!” they say. This is the trick. In your content item, put some kl_PHP like this:

{kl_php}

mosLoadModules( 'inset' );

{/kl_php}

Since you’re publishing the “Random Image” module to the ‘inset’ position, this PHP code will generate the correct HTML output for a random image.