Adding 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.

This article by Allan Walker, author of Joomla! 1.5 Multimedia, will provide the assistance to help utilize image content effectively within your Joomla! website. We look at:

  • Why we use images in websites
  • Image formats and which ones to use
  • Including images in articles and modules

Images and why we use them in websites

Research suggests that images enhance learning by illustrating the concepts visually and by providing visual memory cues to the viewer. We have been using images to describe, tell stories, and record history since our human evolution.

I have been in a few situations where, if a language barrier between me and the other party exists, we have resorted to a pencil and napkin in order to communicate effectively.

Pictures can convey a message, which might take many thousands of words to describe. This non-textual communication and the visual emotions that the use of images can generate mean they are the perfect medium to complement or replace the text in our web pages:

joomla multimedia

The previous image could easily take a thousand words to describe, which would look uninteresting to the reader and take up valuable space on our web pages. Instead the picture only utilizes a fraction of the space that our description would use and tells a story in itself.

Not only do images describe a story, a moment in time, or a fantasy situation; they can provide a visual stimulus, which portrays a style or theme and sets a mood for the viewer. Many Joomla! Templates now contain a high percentage of graphical images in order to produce interesting designs and effects, such as this commercial example from http://www.yootheme.com:

joomla multimedia

Many templates now utilize rounded edges for the graphics, or faded effects, and some create a 3D type effect on our two-dimensional computer screens. This is achieved by using shading and image layering effects. Others use images to create interesting navigation effects which could not be achieved without using these.

Besides the design, navigation, and branding effects that images help provide, inside our content and modules, we use images to advertise and communicate to our site visitors. One important trick as web developers is to make sure our images are as optimized as they can be before asking our viewers to load them into their web browsers. This ensures a pleasant user experience because if a site is slow to load, or images are missing, these can be a big turn-off to your site visitors.

Image formats and which ones to use

Images can often make up 50 percent of a Joomla! website; sometimes even more. These images that get loaded into the browser can be part of your template design, or site images we have loaded into our modules and articles. Choosing an appropriate format for this image content will help optimize the loading times of your web pages, which is one of the most important considerations when building a multimedia rich website:

joomla multimedia

There are a few simple rules we can use in order to choose an appropriate image format. The most important criterion for the final file is the size. The previous image is exported using Adobe Fireworks on a Mac computer. External image editors such as the GNU Image Manipulation Program (GIMP) are good open source solutions for manipulating and optimizing images for the web. GIMP can be downloaded by visiting http://www.gimp.org.

With each image requiring loading by the user's browser, page-loading times can be easily affected with the quality and quantity of images you use in your web pages. This in turn results in end user frustration (especially on dial-up Internet connections) and loss of site traffic.

Digital images

Before we proceed further into file sizes and file types, it is important to mention a note about digital images. Because all of our web page images are stored or viewed on a computer device, they are in a digital format (an electronic file stored using zeros and ones). A digital image is built up of tiny elements called pixels. Pixels are the building blocks of all digital images and are small adjoining squares in a matrix across the length and width of your image.

Pixels are so small that you cannot easily see them when the image is viewed on your computer screen:

joomla multimedia

Each pixel is an element containing a single solid color, and when put together all of these tiny dots make up your final image. Usually, more pixels per area make up a higher quality image, but there is a poin t when viewed with the human eye on electronic devices that you cannot actually see the extra detail that the additional pixel's bring to the image:

joomla multimedia

The physical dimensions of a digital image are measured in pixels and all digital images have what is called an image resolution (the image height and width dimensions in pixels). It is possible to save your digital images in numerous formats and compressions in order to optimize the file quality and size. Image editing programs, such as Adobe Fireworks, are specifically designed with web optimization and export options:

joomla multimedia

Lossy and lossless data compression

Data compression is an important part of our digital world. File compression is useful because it helps in reducing the consumption of expensive resources such as transmission bandwidth and computer hard disk space.

Almost all digital images that we use on the web have been resized or compressed to some degree. When editing or saving files in popular software editing programs, many options are provided to help optimize digital images.

Lossy and lossless compression are two terms that describe the compression type of a file, and whether or not the file retains all of the original data once compression and then decompression of that file has taken place. The preferred formats for digital web images (such as JPEG and GIF) all fall into one of the following compression types:

  1. Lossy
    A lossy data compression is one where the compression attempts to eliminate redundant or unnecessary file information. Generally, once a file has been compressed, the information that was lost during compression cannot be recovered again. Hence, it is a degradable compression type, and as the file is compressed and decompressed each time, the quality of the file will suffer from generation loss.
    JPEG and MP3 files are good examples of formats that use lossy compression.
  2. Lossless

    Lossless file compression makes use of data compression that retains every single bit of data that was in the original file before compression.
    Lossless compression is often used when an identical representation of the original data is required once a file has been compressed and then decompressed again. As an example, it is used for the popular ZIP file format. Image formats such as PNG and GIF fall into the lossless compression type.

For now, it is not so important to go into any more detail on these compression types, but the following image formats fall into both of these compression categories. It is possible to optimize your website images by choosing the correct format to save and present them to your site users.

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 formats

With hundreds of graphical image formats now available, it is understandable that there are some bizarre image formats being dished up on websites, mostly from inexperienced site designers who just happen to upload whatever they have been sent in an e-mail.

Having just mentioned the "hundreds" word, to help calm the nerves there are only four main formats that are commonly used and recognized as web suitable. These have been deemed suitable due to their format and compression properties (making the final file size and view quality suitable). Another important reason why these formats have become the standard is the accessibility of being able to open or view these file types on most computer systems. With the Internet bringing together millions of users across the globe, common formats that are easily viewed or saved had to evolve.

The following formats are members of both the lossy and lossless data compression formats:

  • Graphic Interchange Format (GIF) pronounced "giff"
  • Joint Photographic Experts Group (JPEG) pronounced "jay-peg"
  • Portable Networks Graphic (PNG) pronounced "ping"
  • Scalable Vector Graphics (SVG)

Converting a digital image from one format to another is usually a "Save As" in a common graphical editor package. During this saving or exporting process, you will usually have options to choose the quality, file size, and pixel resolution

GIF

The GIF image format belongs to a family called "index-color" formats. This means they use a fixed number of colors to make up the image. The file size is usually related to the bit-depth or number of colors used. These are usually a small number such as 256 or "8 bit" color, and often contain as little as two colors. For optimum file size, you usually want to choose as lower bit-depth as possible while still retaining an acceptable image.

Due to its limited color properties, GIF images are usually perfect for a low number of solid flat colors and are often the format of choice for logos, buttons, and graphical text:

joomla multimedia

GIF images are an in-efficient format for images such as photographs, which contain lots of colors. Photographs that are converted to a GIF format will usually be of poor quality, look blotchy, or show jiggered edges due to the limited color range:

joomla multimedia

JPEG

The JPEG file format was designed to efficiently compress realistic true color or grayscale images such as photographs. This compression type was designed and is the perfect option to save and compress your photographic images.

The JPEG format works its magic by approximating blocks of pixels and during compression preserving the key details that are most apparent to the human eye. JPEG images can be highly compressed allowing you to save a good quality picture with a small file size. However, the JPEG format belongs to the lossy compression type which means every time you read, modify, and save your JPEG image, you lose some information. This derogation is very noticeable when you have text within an image, such as logos. This loss of data will still occur even if you set the quality slider to "100" when saving a JPEG image; hence it's an excellent example of lossy file compression.

JPEG is an excellent image format for multiple colors or toned images for your website, but it is not a good format to save your images in if you wish to edit or change them frequently:

joomla multimedia

PNG

PNG is a relatively newer file format that was created as the open source successor to the GIF format. Being a member of the lossless compression type, PNG images are best suited to images, which may require editing and saving again. Like the GIF format, the PNG file format excels when the image contains large uniformly colored areas. The PNG format also lends itself well to the use of transparency, which can be important for logos that may be laid on top of background colors, or graphics:

joomla multimedia

Mozilla Firefox, Internet Explorer 7, and most of the major browsers now offer PNG support. Many purchased Joomla! Templates will contain PNG images for logos, rounded module headings, and buttons / icons.

SVG

SVG is a new vector file format created by the World Wide Web Consortium (W3C). It was developed to create a standard format for displaying vector graphics on the web.

SVG is a text based graphics format with the images and their behaviors defined in an XML file format, which means they can be easily searched, scripted, and compressed:

joomla multimedia

SVG images can interact with users in many ways due to their textural file format, and images can be used with scripting in order to trigger events in web pages and on mobile devices.

All major browsers except Internet Explorer offer SVG file support. However, a browser plugin for Internet Explorer is available. At this stage there are not many extensions around the subject of SVG, but there is a useful Joomla! Plugin called XHTML Headers. This plugin helps to see if the browser supports XHTML based technologies. For more information, visit http://extensions.joomla.org and search for XHTML Headers.

Including images in your content articles and modules

In the following section, we will cover inserting images into our Joomla! content articles and modules. This section assumes that you have a basic understanding of how Joomla! content articles function.

Adding an image using the Joomla! Article Image button

Images can be easily added to new and existing Joomla! Articles (and Modules) by using the Image button, which is an extended editor plugin that is configured to be turned on with new Joomla installations. The Editor button loads in below the Content Editor window when you are in the Edit Article screen:

joomla multimedia

It is important to note that this is a different method of inserting an image than that when using the Insert Image button on the WYSIWYG editor toolbar.

To insert an image into your Joomla! Articles, you will need to be in Article Edit Mode. Open your article for editing either by:

  1. Clicking on the "Add New" Article icon when viewing the Control Panel.
  2. Clicking on the Article option in the menu at the top, and then clicking on the "Article Manager" menu option. Select the article you wish to edit and click on the "Edit" icon in the top-right toolbar.
  3. If logged into the frontend of your Joomla! website with the appropriate edit permissions, select the article you wish to edit and then click on the "Edit" toolbar icon.

Next, we need to choose where we would like our image to be placed. This is performed by inserting the image code in relation to the text that might be in your article. By clicking within the text content in the editor, you will be able to position your mouse cursor where you want your image to load:

joomla multimedia

An Insert image screen will load on top of your Edit Article screen, which is the Joomla! Media Manager:

joomla multimedia

The Insert image screen will show all of the media in your Joomla! Media Manager. It contains the following features:

  1. Folder navigation
    This is performed by using the Directory drop-down menu located at the top-left of the screen. You can drill down to subdirectories by using this or simply clicking on the folders that are available in the main Insert image window. The up button will quickly take you back up one directory:

    joomla multimedia

    You cannot move higher than your main "Media Directory" location, which is defined in the Global Configuration settings.

  2. Selecting an image
    Simply click on the image you wish to use, and the Image URL location will be automatically populated with that image's location on your server:

    joomla multimedia

    If you wish to use an image from another web server or site, enter the full URL to the location of that image into the Image URL field:

    joomla multimedia

  3. Setting the image properties
    We have three important fields (plus the Align and Caption boxes) to consider when inserting an image via the "Insert image" window:

    joomla multimedia

The "Insert image" window has the following fields:

  • The Image URL field holds the location to your image. This can be a relative URL to your website domain (for example, /images/image.jpg), or the absolute URL path to your image (for example, http://www.mydomain.com/images/test.jpg).
  • The image Align drop-down option allows you to align the image in relation to the text that the image surrounds. If the align is set to the left, the image will float to the left of the block of text, if aligned to the right, the image will float to the right of the text. If this option is left blank, there will be no image alignment set.
  • The image Description field is a Joomla! description which is the equivalent to an alt tag when using HTML. The Alt description is used to describe an "alternate-text" for an image. The alt attribute tells the viewer what they are missing on the page if the image is not loaded in. They are especially useful for people with screen readers, or those who choose to view the web with images turned off in their web browsers.
  • The image Title field specifies additional information about the image. This information is shown as a tooltip text to the user when their mouse is hovered over the image.
  • The image Caption checkbox will use the image title, and output this description as an image caption. This usually shows under your image, and CSS can be used to manipulate the look and positioning of this.

The Insert image screen also has a useful file upload tool built into it. Hence, if your images have not already been uploaded by FTP or the Joomla! Media Manager, then you have the option to upload when editing your content articles.

Before uploading, make sure you have selected the directory in which you wish to upload a new image to. To upload, click on the Choose File upload button located at the bottom of the Insert image screen:

joomla multimedia

A screen will appear in which you should navigate to the file that requires uploading. Once you have selected your file, click on the Start Upload button to start the upload process.

A message at the top of the Insert image window will appear to tell you if your upload has been successful. If you have issues with uploading, check that your media directories and subdirectories have "read and write" permissions set on them to allow the upload.

Once your file has been uploaded, you can click on it to select that file, populate the image properties fields, and then click on the Insert button at the top-right of the Insert image window.

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:

Adding an image using the Editor Image button

Your Joomla! install has one or two WYSIWYG (What You See Is What You Get) editors available. It is possible to change the editor type on a user basis within the User Manager. It is also possible to make a site-wide setting within the Global Administration:

joomla multimedia

A suggestion would be to download these and see which one (if any) makes your editing environment more suitable. Almost all of these editors offer the ability to insert images into your content articles, usually via an icon on the editor toolbar.

For this example, we will use the Joomla! default TinyMCE editor:

joomla multimedia

Firstly choose the article you wish to edit, or create a new article and go into the Edit Article screen.

As when using the Joomla! Image button technique, we need to position the cursor in an area of the article where we want the image to appear. In the editor toolbar, you will see numerous icons to perform editor functions. Look for one with a small photograph image on it:

joomla multimedia

When clicked on, this icon will open a pop-up window, which allows you to enter in the image location and properties. The main difference between this window and the earlier mentioned Joomla! Image button technique is that we manually need to enter in the image location in this area, and do not have the ability to upload images using this window:

joomla multimedia

The fields available are:

Field

Description

Image URL

The Path to your image location.

Image description

The alt text for your image.

Alignment

Alignment of the image.

Dimensions

The height and width of the image.

Border

A border attribute for the image.

Vertical space

Vertical spacing around the image.

Horizontal space

Horizontal spacing around the image.

Using this method to input images into your content articles means that you have to manually enter the location to your site images (default is /images/stories/) and other properties into the fields provided, but it saves you having to enter the image code manually using HTML.

Image placement using custom HTML code

Depending whether you have chosen a WYSIWYG editor for your Joomla! account, you may choose to edit content articles and modules using an editor, or choose to format your site content using an HTML code view.

WYSIWYG editors can often add in additional characters to your site content, especially when content editors cut and paste the content directly from documents such as Microsoft Word, e-mail applications, and so on. They can allow users with no HTML experience to have wonderful functionalities for adding and updating website content, but can litter the code with unwanted or redundant code:

joomla multimedia

Image placement using HTML and CSS offers you options to align and style your website content as you desire. Let's look at how we can add an image into our content using pure HTML.

Just like using a WYSIWYG editor to insert an image, when using HTML we are performing a similar process, but this time entering in the image code by hand. In HTML, all images are defined using the <img> tag. Additional properties are given to this tag to make it perform functions. When using the WYSIWYG editor, we need to make sure that our image code is placed in the position where we want it to be displayed on the page:

joomla multimedia

In the editing window, position your mouse cursor where you want to enter your image. For our example, we will insert an image into the second (middle) paragraph of text (note each block of text has a <p> (paragraph) tag around it). The browser will show your image where the image tag occurs in the document. If we put an image in between two paragraphs, the browser will show the first paragraph, then the image, and then the second paragraph. In our example, we want the image to show at the start of our second paragraph, in line with our text content.

We will break this down as an example, so let's start off by inserting the basic <img> tag into our document:

<p>This is an interesting paragraph about inserting an image around
text</p>
<p><img>This is an interesting paragraph about inserting an image
around text </p>
<p>This is an interesting paragraph about inserting an image around
text </p>

Next we need to provide a location for the image. This is done by using the <src> attribute (<src> stands for source). The value of this attribute is the source location of the image you wish to display:

<p>This is an interesting paragraph about inserting an image around
text</p>
<p><img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://www.mydomain.com/image.jpg" />This is an
interesting paragraph about inserting an image around text </p>
<p>This is an interesting paragraph about inserting an image around
text </p>

Note how we have now added in a /> at the end of our image tag. This is required to end our <img> tag correctly and make our code XHTML compliant. Next we need to provide an <alt> (alternative text) description to our image. This is important to inform the viewer of what is loading into the page. Remember some web users have images turned off and use screen readers, so <alt> tags are very important for all images that you add into your site:

<p>This is an interesting paragraph about inserting an image around
text</p>
<p><img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://www.mydomain.com/image.jpg" alt="My Page" />This
is an interesting paragraph about inserting an image around text </p>
<p>This is an interesting paragraph about inserting an image around
text </p>

If we click on Apply on our content article now, this code will be saved and if the location to the image is correct, the image will show. The previous code will load the image in and then the text will load underneath:

joomla multimedia

If you want the text to wrap around your image, we need to set an align attribute (alignment) for the image. Options for the align attribute are either left, right, middle, top, and bottom, which will result in the image aligning to each of these values in relation to any text block around the image:

<p>This is an interesting paragraph about inserting an image around
text</p>
<p><img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://www.mydomain.com/image.jpg" alt="My Page"
align="left" />This is an interesting paragraph about inserting an
image around text </p>
<p>This is an interesting paragraph about inserting an image around
text </p>

If you have set the image alignment to left and clicked on Apply to save your Joomla! Article, you will see that your image is positioned to the left and at the same height as the middle paragraph of text:

joomla multimedia

Next we need to specify a few more details about our image, mainly the height and width of it. This is to ensure that when viewing across various devices, your images will load in with the correct size. The height and width attributes are set as they are spelt. These are in the value of pixels but there is no need to enter px to the attribute. For example, if an image is 60 px high and 100 px wide, our code will look like:

<p>This is an interesting paragraph about inserting an image around
text</p>
<p><img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://www.mydomain.com/image.jpg" alt="My Page"
align="left" height="60" width="100" />This is an interesting
paragraph about inserting an image around text </p>
<p>This is an interesting paragraph about inserting an image around
text </p>

We can use HTML to perform additional functions such as image spacing. By using the hspace (horizontal space) and vspace (vertical space) attributes, we can create some padding around our image. This is especially useful when your text flows around your images. In my example, I want to create some horizontal padding between my image and the text flowing around it. The code now becomes:

<p>This is an interesting paragraph about inserting an image around
text</p>
<p><img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://www.mydomain.com/image.jpg" alt="My Page"
align="left" height="60" width="100" hspace="5" />is an interesting
paragraph about inserting an image around text </p>
<p>This is an interesting paragraph about inserting an image around
text </p>

The image will now look like:

One final attribute that I would like to include is the title attribute (Title). This will provide a tooltip title to the image when the viewer hovers their mouse cursor over the image. Titles are useful for providing additional information and do have an affect on Search Engine Optimization (SEO). The code now becomes:

<p>This is an interesting paragraph about inserting an image around
text</p>

joomla multimedia

<p><img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://www.mydomain.com/image.jpg" alt="My Page"
align="left" height="60" width="100" hspace="5" title="A Nice Clock
Image" />is an interesting paragraph about inserting an image around
text </p>
<p>This is an interesting paragraph about inserting an image around
text </p>

The image will now look like:

joomla multimedia

If you want to insert numerous images into your articles and modules, it would be necessary to perform these steps for every image that you want to load in. It is possible to cut and paste the previous code and just change the values each time, but it can become time consuming.

Some image attributes such as the image padding (vspace and hspace) can be set in your CSS, creating a site wide stylesheet class for all of your content images. This CSS code may look like:

img { border: 0 none; margin: 3px }

The previous example will set a border of 0 and a margin of 3 on all of your site images, so you may need to specify the CSS attribute in more detail to suit your template.

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. In this article we have covered how to add images in Joomla!

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

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
j
F
r
S
Z
t
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