Blog

Pictures can make or break a website.  While there is certainly a case to be made for simple, minimalistic designs, creative pictures can add life to the page.  In this post, we'll look at simple ways to add banner pictures to your site's pages in Joomla.

Creating the Banner

The first step in the process is to find the right picture for the page.  For this example, we'll use a church website.  Let's say you want to add a banner picture to your children's ministry page.  Obviously, we would not want a picture of an elderly couple, or an artsy shot of a pair of headphones on this page.  We're going to look for a fun, energetic picture - probably of a group of kids smiling and having fun.  If you have a good photographer in your church, you might enlist them to take pictures of children at your church, or you can find pictures on a stock photo website such as iStockphoto.

Once you have the right picture for the page, you will need to crop the image.  In the case of a banner, in most cases, you will want more of a rectangular graphic.  For those that may not have good image editing software (Photoshop, Fireworks, etc.), a quick Google search of "free image editor" turns up several solid results, including GIMP - a free program with similar features as Photoshop.  The ability to crop images is fairly standard in most image editors.

When you're ready to crop the image, you will need to know the correct pixel size for the banner.  Your content area likely has a fixed pixel width.  Creating a banner that is 800 pixels wide will not work if your content area is only 600 pixels wide.  You can find out the pixel width from your site's designer or developer.  Once you have determined the correct pixel width for your banner, you can experiment with different pixel heights until you're satisfied with the size of the banner.  The final step is to save the newly created banner in a good format for the web.  In this case, JPEG is a solid choice.

Adding the Banner to the Page

Once you have the banner created, we're ready to add the banner to your page.  Log into the back end of your Joomla site.  In the Extensions menu, click on Module Manager.  Inside the Module Manager, click on the "New" icon in the top right corner.  While there is a Banner module for Joomla, in this example, we will use a Custom HTML module instead.

Give the Custom HTML module a name.  For this example, something like "Banner - Children's Ministry" would work.  In the Show Title field, we will click on "No."  Enabled will be set to "Yes."  Select the name of your banner position in the Position field.

In this case, we only want this banner to show up on the Children's Ministry page.  In the Menu Assignment box, we're going to select the "Select Menu Item(s) from the List" button.  Then, we'll click on the Children's Ministry page in our list of articles.

Next, in the editor area of the Custom HTML module, we need to add the image to the module.  Click on the Insert/Edit image icon in the editor.  In the pop up window, navigate to the appropriate folder in your images folder, or you can create a new folder for banners.  To upload the new banner image we created earlier, click on the upload icon.  Find the image on your computer and click "OK," then click "Upload."  Once the file has finished uploading, a green check mark appears next to the file name.  Click "Cancel" to return to our Insert/Edit image window.  Click on the banner image in the list of files.  You can set other parameters such as border, margin widths and alignment as desired.  Select "Insert."

The final step is to save the module.  You're finished!