Web Development Documentation

Random Image Module

Overview

This module will display a single image from a Media folder.  If there are multiple images in the folder, the module will display a different image each time the page is visited.  This adds variety to the site without creating a complex slideshow.

The module works best when all the images in the folder are resized and cropped to the same size.

You can assign a link to all the images displayed in the module, so that when someone clicks on the image, they will be taken to a specific page on the website.  The link will be the same for all images.

This module is not a substitute for an actual photo gallery or slide show.

Recommended uses are for study abroad pages, or for displaying different images of artwork on the home page of a website.

Procedure

Upload Images to the Media Folder

  1. In the Joomla! Administrator Control Panel, select Media from the Content menu:

    Go to "Content > Media"
  2. Click Create New Folder (see #1 below).
  3. Enter a name for your folder (see #2 below).  Do not use spaces, or any special characters other than a dash (-), in the name of the folder.
  4. Click Create Folder (see #3 below).
  5. Select your new folder from the list of folders (see #4 below).

    Create new folder in "Content > Media"

  6. Upload images into the folder following the documentation: How to Add an Image to Media

Create Random Image Module

  1. In the Joomla! back-end (Control Panel), navigate to Extensions > Modules, then click the New Button to create a new module:

    Create new module

  2. For "Select a Module Type," select Random Image:Create new module type: "Random Image Module"
  3. Enter a title for your module in the "Title:" field.
  4. For "Image Folder," enter the name of the Media folder containing your images.  This should start with "images/" followed by the name of your folder.
  5. If you would like the images to be linked to another page or website, enter the URL of that location in the "Link" field.
  6. For "Width (px)", enter the width of the images in pixels.
  7. For "Height (px)", enter the height of the images in pixels.Configure Random Image Module options
  8. For "Position" (found to the right), select the position where the module should appear on the website. See the article "Module Position" for more information.
  9. Unless the module should appear on every page of the site, assign the module to one or more menu items.
  10. Click "Save & Close" to the upper left to save your new module: Save & Close button

 

Joomla-Workshops-Button-Hugo