Search The Site

How To Add Pictures With Descriptions To Your Joomla Web Site

In this article I will teach you how to add pictures complete with descriptions to you joomla web site. You will need Adobe Photoshop or an equivalent program to accomplish the task. I will use a simple 2 column table with one row layout for this lesson. You can add as many rows as you need. Lets get started.

Go ahead and take a couple pictures with your digital camera and then download the pictures to your computer. Next we will launch Photoshop and begin the cropping process.

Once you have Photoshop up and running do the following:

  • On the top menu bar click on File and then click on open.
  • Navigate to the picture you took earlier and select it and then click open.
  • Click on the dotted rectangle box on the left vertical menu bar. Draw a square around the portion of the picture you would like to crop like illustrated below.

cropping a picture

  • Next, on the top menu bar click on Edit and then choose Copy. The copy is now on the clipboard.
  • Next, click on File and choose New.
  • In the new file box click on Transparent for a background and then click on OK.
  • Next, on the top menu bar click on Edit and then choose Paste.

We should now have a picture we can work with. Now, lets say we need the picture to be 400x200 pixels. To crop your picture to the correct size do the following:

  • On the top menu bar click on Image and then click on Image Size.
  • If your picture is 2000x1000 pixels change the width to 400 pixels. Photoshop will adjust the height accordingly. If Photoshop adjusts the size to 400x205 do the following.
  • On the top menu bar click on Edit and then choose Select All and then click on Edit and then click on Copy.
  • Next click on File and then choose New change the dimension to 400x200 and then select a transparent background and then click on OK.
  • Next, on the top menu bar click on Edit and then choose Paste
  • You should now have an image that is 400x200 that you can now save.
  • Next, click on File and then choose Save For The Web.
  • Next, on the right panel choose PNG-24 and then click on Save.
  • Next, navigate to the folder on your computer where you save pictures for your web site. Give the new picture a name and click on Save.

Now we need to create our web page and upload the image to our web site. Login to your joomla web site, bring up a web browser and type your web address in the address bar for example http://www.mywebsite.com/administrator, type in your username and password. Once you are logged in do the following:

  • Click on Media Manager.
  • Select the folder where your images live, for example click on the stories folder and then click on the sports folder.
  • Next, at the bottom of the page click on Browse, navigate to the pictures folder on your computer and click on the picture you created earlier.
  • Next, click on Upload.
  • Now that the picture is uploaded to the correct place we can create a page that will display the picture.
  • Next, click on Article Manager and create a new page.
  • For example lets create a page called Winter.
  • Next, copy and paste the following code into your new page.
<table align="center" width="850" border="0" cellspacing="1" cellpadding="1">
  <tr>
    <td><img src="/images/stories/sports/400x200.png" width="400" height="200" alt="description of image here" /><br />Description of product here</td>
    <td><img src="/images/stories/sports/400x200.png" width="400" height="200" alt="description of image here" /><br />Description of product here</td>
  </tr>  
  </table>
  • Change the 400x200.png to the name of your picture and then describe the picture in the alt tag.
  • Next, after the break tag describe your product.

If you did everything correctly you should have a page that looks similar to the following.

change screen  resolution

That is all there is to it. Congratulations on creating your new page.