How to Add an Image to a Joomla Sidebar

Images in your Joomla! sidebars can add visual interest.

Besides the built-in Custom HTML and Random Image modules, there are a few free modules in the Joomla! Extensions Directory that will display images in any module position, including the sidebars: Easy Image Displayer, KAC Image Display and JT Shadowbox.

Instructions

Using the Random Image Built-in Module

1. Log into the back-end of your website as an administrator. Click "Extensions," then "Module Manager." This will display a list of the installed modules.

2. Select "Random Image" from the list of installed modules. Under "Details," select "No" for "Show Title" and "Yes" for "Enabled." From the "Position" drop-down list, select your desired position (e.g., "Right"). Under "Menus," be sure "All" or "Select Menu Item(s) from the List" is selected.

3. Enter the file extension for "Image Type" for the images to be displayed in your sidebar. The default image type is "jpg."

4. Enter the path to the image folder in "Image Folder." The path needs to be relative to your website's URL (e.g., images/stories). Enter the maximum width in pixels that pictures should be displayed (e.g., 150px) in the "Width" box to constrain the image to your template's sidebar width.

5. Click "Apply." Click "Preview" to verify that the page works correctly. Close this browser window. Click "Save."

Using the Custom HTML Module

1. Log into the back-end of your website as an administrator. Click "Extensions" then "Module Manager." This will display a list of the installed modules.

2. Click "New" in the Module Manager title bar. Select the radio button for "Custom HTML" and click "Next."

3. Enter a title for the image in "Title," select "No" for "Show Title" and "Yes" for "Enabled." From the "Position" drop-down list, select your desired position (e.g., "Left").

4. Scroll to the bottom of the page, if necessary, and select the image button located under "Custom Output." Locate the image and select it. Enter a description and title. Optionally, you may select the "Caption" box if you want the Title displayed with the image. Click "Insert."

5. Click "Apply." Click "Preview" to verify that the page works correctly. Close this browser window. Click "Save."

Tips & Warnings

• Create a new folder using "Media Manager" in the back-end for the Random Images module. Upload the photos you want in your sidebar to this folder.

References

• "Joomla! A User's Guide"; Barrie M. North; 2008

Resources

• Read this Article in Spanish
• Joomla!
• Joomla! Extensions Directory