"Pictures are worth a thousand words; images are one of the best ways to make our site interesting and grab our visitors' attention."
Although some people will agree with this statement more than others, the truth is that images have been one of the most important aspects of websites to date. From images incorporated into the layout to images used in content, they all help to make our site look interesting and appealing. And that's very, very important. We can have the best content, products, and articles; however, if our site is not appealing enough, our visitors will leave before we can even show them all of our site's great features.
If you stop to think about it, this makes a lot of sense. A good looking site denotes a good quantity of effort being put into it, and in the end it gives a sense of seriousness to our site or business, which makes our visitors more confident.
In this chapter we are going to work with images, and will make use of some Joomla! modules to give our site the extra appeal that it needs.
These are some very nice additions for any site. If you don't have a live site, you can try them with the sample template that is provided with the book code. For now, our site looks similar to the following screenshot:
As you can see, there is a lot of work to be done on the layout mock-up. Let's see an overview of what we are going to cover in this chapter.
First, we will see how Joomla! handles images by default, without the help of any module or extension, using just Joomla! and images. Then, we will see some modules and extensions that will help us to:
- Add an image slideshow to our site
- Incorporate image pop ups—a great way of making our images stand out from our contents
- Create galleries
Through all of the examples in this book, we will look at jQuery-powered extensions to help us in our work. For now, let's stop talking and start working on our site.
Even though these basic ways of putting images onto our site won't make our site stand out from the competition, we are going to take a look at them. This will also show us the improvement achieved once we have used some of the modules previously commented on.
Let's add an image to one of our content articles. Log in to your Joomla! Administration zone. Go to the Media Manager, and then to stories. Once you are there, upload an image.
For this example, we will be using the following image:
This image is named image_1.png. You can find it in the
code for Chapter 1 in the code bundle of the book. Then go to Content | Article Manager; here we will create a
sample article. Don't worry about the structure; it's not important for
now. Create the article in the Uncategorised
section and category:
To insert the image into the article, click on the Image control button at the bottom of the editor (action 1). Then, select the image (action 2) and click on the Insert button (action 3). The image is now inserted into the editor at the location where the cursor was placed. The actions involved are displayed in the following screenshot:
If all has gone OK, the result will be an image inserted into our article—nothing more, and nothing less. Do you want to see it? The result is as follows:
An image, like the one we have used, can make the article more interesting and is easy to incorporate.
Placing images in modules works in the same way as placing them in articles.
However, images end up in module positions, and therefore you can use them as
banners, ads, or something equally useful. For this example, we are going to
use image_2.png (the following image), which is included
in the code bundle. Don't forget to upload it to our Joomla! installation
before continuing:
To create a module, go to Extensions | Module Manager | New | Custom HTML, and give the module a name you want. In this example, we will be placing the module in the module_1 position.
As we have selected the Custom HTML module type, we will be presented with a WYSIWYG editor, similar to the one we had when creating the previous article. Insert the image as we have done before, and then save the module. When this is done, and if the module is published, the result will be similar to the following screenshot:
For now, this will be enough. Later, we will continue working with this module position. However, before that let's take a look at the process of placing images.
Most templates use images in the layout in order to make them more
interesting; and, of course, our example template is no exception! To see how
this is done, open your Joomla! installation folder. Go to the
templates folder, and then to our jj15 template
folder.
Note that we are opening the jj15 folder as it's the
name of our template. Now open the index.php file and search
for the following piece of code:
<div id="header"> <img src="<?php echo $this->baseurl ?>/templates/jj15/ images/header_image.gif" /> </div><!-- End of header -->
This will result in our header image being shown, as follows:
To get this to work, we have used the typical HTML
<img> tag and a bit of PHP scripting, such as
<?php echo $this->baseurl ?>, to generate the base URL of
our site. This will, therefore, produce the following code:
<img src="/jj15/templates/jj15/images/header_image.gif" />
That's it! Enough of the basics. We want to make our site very interesting, so let's use jQuery for further improvement of our site along with the use of third-party extensions.
One of the most interesting features of working with Joomla! is that there are lots of extensions already built. These extensions will surely help us in the development of our site, saving time and effort, and will give great results in no time. In this chapter, we are going to take a look at some interesting Joomla! extensions.
Don't worry, later in the book we will also see how to create our own extension. But don't go so fast my friend, stay with me and we will go step by step and create a very interesting site.