Managing Image Content in Joomla!

Exclusive offer: get 50% off this eBook here
Joomla! 1.5 Multimedia

Joomla! 1.5 Multimedia — Save 50%

Build media-rich Joomla! web sites by learning to embed and display Multimedia content

$26.99    $13.50
by Allan Walker | February 2010 | Joomla! MySQL Content Management Open Source PHP

Next to text content, images are one of the most utilized multimedia resources in web pages. They can be used to inform and educate the reader, offer help with navigation, and to enhance the design and user's overall visual experience.

Whether you need to create multimedia image galleries in your Joomla! website or simply add images to your articles and modules, this article will provide the assistance to help utilize image content effectively within your Joomla! website. In this article by Allan Walker, author of Joomla! 1.5 Multimedia, we look at:

  • Creating image galleries and slideshows
  • Template images
  • Joomla! Image Extensions
  • Browser support and accessibility for images

Creating image galleries and slideshows

Joomla! is a Content Management System designed primarily for organizing and managing website content. It contains numerous multimedia features built into it, but its main focus is providing two roles: Powerful CMS features, and a well-designed framework which allows additional features to be added to the system, thus creating powerful functionality.

These additional features are called Extensions and are designed to plug in to the core Joomla! Framework and extend the functionality of it. With regards to the core Joomla! CMS, we have already looked at how images can be included into content items and modules. However, image galleries and slideshows are asking a bit more than just simple image management, and so require the power of extensions to provide these features:

Managing image content in joomla

The number of multimedia extensions now available for Joomla! is staggering. We have extensions which can create complex galleries, stream in videos, and compile jukebox type audio features.

Having considered at great length the best approach has resulted in one option. That is to highlight some of the most popular and useful image gallery and slideshow extensions, and hope that these will provide understanding as to the complex image management capability that can be achieved by using Joomla! Extensions.

Image management extensions, and how to install them

Before proceeding with covering third-party extension functionality, let's quickly cover how image extensions are added to your Joomla! site.

As with most things in Joomla!, the process of installing extensions has had careful consideration from the development team, and is a very easy to perform. Most Joomla! Extensions come with their own installation instructions, and these general guidelines will help you get them installed on your site.

Before installing anything, make sure you copy your file set and backup your site database.

For the purpose of this example, I am going to install one of my favorite Joomla! Multimedia Extensions—the RokBox extension by RocketTheme. RokBox is a MooTools powered slideshow plugin that enables you to display numerous media formats with a professional pop-up screen lightbox effect:

Managing image content in joomla

The installation steps are as follows:

  1. Download the required extension and save this download on your computer. The file will be in a .zip format, or possibly a .gzip or .tgz format which may require unzipping before installation:

    Managing image content in joomla

  2. Log into your Joomla! Administrator's Control Panel, and navigate to the Extensions menu, then to Extension Manager. The page will default to the Install screen:

    Managing image content in joomla

  3. Browse your computer for the extension .zip file using the Choose File button on this page and once the file is located, use the Upload File & Install button. The Joomla! Installation Manager will perform all of the work and if your extension has been built correctly, the installer will place all files and documents into their correct directories:

    Managing image content in joomla

  4. An installation success message will show to inform you that the extension has been successfully installed.

    Some extensions success text may contain additional links to configuration pages for the extension.

Joomla! 1.5 Multimedia Build media-rich Joomla! web sites by learning to embed and display Multimedia content
Published: February 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Image gallery extensions

The following is a list of Joomla! Extensions to create image galleries:

Simple Image Gallery

The Simple Image Gallery extension is a plugin:

Managing image content in joomla

The way the extension works is you add in a special tag—{gallery}myphotos{/gallery}—into your articles to display all of the photos correctly labeled in the myphotos folder:

Managing image content in joomla

The extension then goes to work. The gallery created contains features such as stylish shadows on each thumbnail, lightbox pop ups to display the original images, and automatically generated thumbnails for each image.

By utilizing the special tag method, you can display numerous galleries within your content articles and website. This offers great fl exibility for a site-wide simple gallery feature.

Expose Flash Gallery

Expose is a component, module gallery extension that offers language support. It is a Flash-based tool for offering eye-catching slideshows of your images on the Web:

Managing image content in joomla

             

This extension is based on the stand-alone gallery software called "Expose" which has evolved to provide support for Joomla! websites. This extension offers numerous features, including nesting of albums, assigning thumbnails to albums, online picture upload, offline gallery management, watermark addition, and playing slideshows.

With Expose, you can link directly to images, categories of images, or full albums:

Managing image content in joomla

Phoca Gallery with Slideshow

Phoca Gallery is a fully-featured image gallery and slideshow extension for Joomla! It is a component with plugins and modules. It also caters for language support:

Managing image content in joomla

Phoca Gallery allows you to create image categories and subcategories, and place images into these. It is possible for images to belong to more than one category, which provides greater flexibility in displaying images.

Image thumbnails are automatically generated for the gallery, with added options such as watermarking, user access, YouTube support, and numerous gallery effects to display your image galleries in various ways:

Managing image content in joomla

Phoca Gallery comes with a range of available plugins and modules. It is possible to present image galleries and slideshows in both your articles and modules. There is even a search plugin to help Joomla! search through your image categories.

Ozio Gallery2

Ozio Gallery is a Joomla! Component, with available modules:

Managing image content in joomla

It can be used to develop complex image galleries with interesting effects thanks to the Flash features and gallery skins. These two features effectively turn this image gallery component into many different image gallery options:

Managing image content in joomla

Ozio Gallery offers you the flexibility of linking directly to the content, or by publishing your galleries into module positions using the Ozio Gallery module. Containing numerous parameters, this product should satisfy anyone requiring an interesting Flash-based image gallery feature with slideshow support:

Managing image content in joomla

This extension also offers the ability to show photos from a flickr account, and to display your flickr images within your Joomla! site:

Managing image content in joomla

JoomGallery

JoomGallery is a Joomla! Component, Plugin, and Module with language support:

Managing image content in joomla

JoomGallery offers many features including defining subcategories of galleries, batch upload of images, user access rights to categories, configurable watermarks, slideshow support, and the list goes on:

Managing image content in joomla

Image slideshows

A list of Joomla! Image Extensions for creating slideshows is as follows:

RokSlideshow

RokSlideshow is a Joomla! Module that allows you to display a series of images and captions, and transition between them in a configurable manner.

Managing image content in joomla

The slideshow is driven by Mootools, providing fades, burns, wipes, and push effects between the images displayed. All in all, the module is capable of 30 different transition effects.

Image information can be displayed and images may contain hyperlinks, a title, and a description:

Managing image content in joomla

RokSlideshow is very flexible and easily customizable. It is a great way to display image slideshows in your Joomla! website and an excellent alternative to Flash image gallery players.

Simple Image Rotator

The Simple Image Rotator module offers a simple image rotating mechanism. It is a lightweight JavaScript alternative to Flash image rotation scripts, but offers a similar feel in terms of the fading transition. The previous image will fade within a few seconds to the next image, and so on. It does what it says on the tin!

Managing image content in joomla

Boncko Cooliris (PicLens) Gallery Plugin

If you happen to use Cooliris for your image galleries, then extensions such as the Boncko Cooliris Plugin will be right up your street:

Managing image content in joomla

You can easily add Cooliris image galleries inside your articles by using the special tag: {boncko}/img_dir/{/boncko}. This plugin will insert all images and Flash video files from the /img_dir/ directory into your Joomla! content, making your image gallery look good.

This process means you can store and organize your image galleries externally from your Joomla! site, and suck in the content that you wish. Boncko Cooliris Plugin can even play audio tracks while your image gallery is active.

Some of these have been highlighted because they are popular GPL extensions which offer great flexibility for creating image galleries and slideshow features.

There are many other image gallery extensions available at http://extensions.joomla.org:

Managing image content in joomla

Many new extensions are being made available each week. Some of these are free GPL, some commercial extensions, and others require club memberships to access. Whether they are free or commercial entities, I hope you find a solution for your image gallery and slideshow requirements.

Joomla! Extensions generally provide image solutions for creating galleries and slideshows within articles or modules. You may have a number of other images loading into your web pages, these are usually contained within your template.

Joomla! 1.5 Multimedia Build media-rich Joomla! web sites by learning to embed and display Multimedia content
Published: February 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Joomla! Template images

Joomla! Templates control the overall look and layout of your Joomla! website. They provide the framework that brings together common elements and they provide the glue for your layout to interact with modules and components.

Joomla! utilizes templates for both the frontend and backend (administration) of your site. When Joomla! is installed, it comes with a default set of templates included, and as you may be aware, you can find hundreds, if not thousands, of Joomla! Templates available on the Web. Some of these are feature packed and are commercial templates, some are ones without charge that fall under various licenses. Templates utilize a defined structure, which allows all of the template elements to interact with each other correctly:

Templates utilize a defined structure, which allows all of the template elements to interact with each other correctly:

Managing image content in joomla

It is possible to make your own Joomla! Templates and now there are many tutorials available at http://www.joomla.org and a number of specialist Joomla! Template development books such as "Joomla 1.5 Template Design, Tessa Blakeley Silver, Packt Publishing". More information can be viewed at http://www.packtpub.com.

One important role of a Joomla! Template is to contain and load the site stylesheets. These help position the template elements in your site. An increasing number of these elements in modern Joomla! Templates are scripts, style information, and images.

Let's take a quick look at one of the popular included templates that are available for Joomla!:

Managing image content in joomla

It is easy to see a number of images that help make up this template. We have images for the logo and rounded images for the boxes. Here is the same template loaded in the browser with the images disabled:

Managing image content in joomla

The previous examples are of a relatively simplistic template, but you can see how the template images come together in greatly enhancing the site design. The advancement of Joomla! Templates are increasing every month, with many companies making extremely professional templates available for purchase each month.

These commercial templates often include preset color themes and styles, offering the ability to change the site color scheme, and layout in seconds. This flexibility offers the administrator powerful features to create a new look for their site, but also can mean that some templates contain an abundance of scripts and images that never get used once the administrator had made a decision on the color choice, among others. What used to be a simple path to your template image folder can now often be multiple directories in your template containing the image files:

Managing image content in joomla

How to adjust your template images

The images for a Joomla! Template are generally located in the <your Joomla Home Folder>/templates/<yourtemplate>/images directory. If you would like to adjust certain images in your template, the easiest way to do this is by viewing the template in your site browser and then making the necessary adjustments to the images. It is worth mentioning that many web developers develop their sites locally. A local development process is easily created by setting up a localhost server environment on your computer. Utilities such as MAMP for MAC, and XAMPP for Windows provide easy software installs of all the necessary components for running a local server environment. If you don't already work locally, take two minutes out to look into these programs, as they not only save you time (as there are no connections to the live web servers), but also provide confidence when developing as you are never working on your live site:

It is worth mentioning that many web developers develop their sites locally. A local development process is easily created by setting up a localhost server environment on your computer. Utilities such as MAMP for MAC, and XAMPP for Windows provide easy software installs of all the necessary components for running a local server environment. If you don't already work locally, take two minutes out to look into these programs, as they not only save you time (as there are no connections to the live web servers), but also provide confidence when developing as you are never working on your live site:

//dgdsbygo8mp3h.cloudfront.net/sites/default/files/Article-Images/

One of the easiest ways to find and manipulate your site images is to either use a browser element inspector tool (such as Firebug for Firefox or Web Inspector for Safari), or to simply right-click on the images in the web browser, and choose View Image. This option may differ depending on the browser you are using, but most browsers offer the ability to find the location (URL) of the image or to open it in a new browser tab:

Managing image content in joomla

Your image URL may look something like: <your Joomla Home Folder>/templates/<yourtemplate>/images/logo.png. This image URL method lets you know the path, so you can find the necessary image.

There are hundreds of available image manipulation programs, and we cannot go into the details of image manipulation in this article. However, if you stick to the following rules when adjusting your images, you will be on the right track:

  • Copy the original file. For example, if your file is called logo.png, then name the original file as logo.png.orig (or something similar), so you always have a copy of that original file. Or if you will be editing your website regularly, consider a version control system such as SVN or Git.
  • Make a note of the file name, size, and format before editing the file.
  • Unless you are a pro, always keep the same image format as the original image. If this image is referenced in the CSS or original code, your new image name will be different and the image will no longer show.
  • When saving an image, try to make sure the file size is as low as the original or as close to it as you can achieve through image optimization.
  • If you do change the image dimensions, make sure you check if there are any CSS variables or other code that might specify the physical file dimensions.

With most templates, one of the first files you will adjust will be the Template Logo. The process for changing the logo is exactly the same as the previous steps.

I briefly mentioned the use of Web Inspector Tools. Probably one of the most common of these is a tool available for the Firefox web browser. This is called Firebug. Visit http://getfirebug.com/ for more information. Firebug allows you to edit, debug, and inspect CSS, HTML, and JavaScript on any web page:

Managing image content in joomla

Firebug allows you to inspect web elements and edit these on the fly, in your browser. For example, if you wish to move your logo sideways or up and down a bit, simply inspect the image logo element, and then adjust the corresponding CSS which positions this element. This is just a brief example of what the Firebug tool can do, but its power comes in handy when you need to problem solve errors, and so on. If you are keen on enhancing and developing for your Joomla! Template, I suggest a tool like Firebug which will really help you out!

It is worth noting that Internet Explorer and Safari also have their own versions of an "Element Inspector".

Browser support and image accessibility

Almost all web browsers now offer image support. There are some considerations, however, when using images in your website content. The W3C Accessibility Guidelines emphasize the importance of offering text support (or text equivalents) to non-text content.

The power of text-equivalents lie in their capacity to provide "information and support" to people from disability groups and those using varied technologies to view your web page content.

Using text alternatives when using images can be a foolproof way to make sure that the widest possible audience has access to your web content. Text-alternatives can be visually read by screen readers, the size of the text adjusted for viewing, and content printed off to read in Braille, and so on, which makes a powerful argument for making alternative text content available.

Secondly when we do use images, it is important to specify the alt and title tag information, so users who have images turned off in their browsers can see the "alternative text" which explains what should be loading in. Title tags provide clear tooltips to the user and both of these tags combined can enhance accessibility and search engine optimization:

Managing image content in joomla

Up until recently, browsers such as Internet Explorer did not offer image transparency support, or PNG file extension support. Web developers had to use workarounds in order to show PNG files to users using these browsers to view their websites. Now Internet Explorer 7 and 8 both provide PNG support as a standard. SVG is a relatively new format, which re quired a browser plugin, for again the Internet Explorer browser. Web browsers, however, are improving every day, as is the support in them for various image formats.

Summary

Images are an important communication element. They are used to tell stories, show facts, advertise and sell, as well as visually entice the user with emotive feelings. Our Joomla! Templates usually contain many images, which create eye-pleasing and complex designs.

The use of images in websites has evolved quickly, from flat single color images to realistic high quality formats that cater to transparency and lossless compressions. The Web just wouldn't be the same without them! An increase in broadband and connection speeds has allowed the evolution of beautiful image-gallery scripts; a number of these being incorporated into powerful Joomla! Image Extensions. There has never been a better time to display images and galleries in your Joomla! site.

Take careful consideration when adjusting your existing template images, or when creating new ones for your site. Image file size and optimization is an important consideration to your site users. The use of good optimization tools and experience will help in providing quality images for your site while decreasing page loading time.

With a diverse range of user abilities and disabilities, varied connection speeds, and a vast range of hardware accessing the World Wide Web, it is very important to consider the correct use of images and make alternatives available for those who cannot or choose not to view them. The use of alt and title tags, as well as height and width properties are all best practice when loading images into your site pages.

If you have read this article you may be interested to view :

About the Author :


Allan Walker

Allan Walker lives in the United Kingdom, where he runs “Amplify” http://www.projectamplify.com , a CMS and e-Commerce Consultancy and Development Company.

Growing up in New Zealand, Allan studied Fine Arts, majoring in Photography. An interest in Video soon led to an Editor’s role producing a weekly Television programme, with this content being available for Television and Online.

In 2000, Allan moved to the UK and started Amplify, a business name for Allan’s web consultancy and development services. As well as providing open-source CMS and e-Commerce solutions for companies taking their business online, Allan established a successful e-commerce business of his own , which was sold in 2005.

In recent years Allan has been involved with a number of large-scale Joomla! projects, helping to establish Joomla! within the UK Government and Corporate sectors.

Allan has been a mentor for the Joomla! Google Summer of Code program. He helps the Joomla! community with Joomla! User Groups processing, and is a member of the Joomla! Marketing Team

Books From Packt

Joomla! with Flash
Joomla! with Flash

Joomla! 1.5 SEO
Joomla! 1.5 SEO

Joomla! 1.5 Development Cookbook
Joomla! 1.5 Development Cookbook

Joomla! 1.5x Customization: Make Your Site Adapt to Your Needs
Joomla! 1.5x Customization: Make Your Site Adapt to Your Needs

Joomla! 1.5 Template Design
Joomla! 1.5 Template Design

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

Joomla! 1.5: Beginner's Guide
Joomla! 1.5: Beginner's Guide

Joomla! 1.5 Content Administration
Joomla! 1.5 Content Administration

Your rating: None Average: 4 (2 votes)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
j
3
u
d
A
u
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software