Uploading Images

This is a basic tutorial for new Joomla users. Its fairly basic and uses the mosimage tag as a means for displaying images within content.

The following steps actually get the image you want to display into your image directory.

  1. Log in to the administrator section of your website ie http://yoursite.com/administrator .
  2. Click on the site menu item on the horizontal menu near the top left of the screen.
  3. Click on Media Manager.
  4. Once the media manager has loaded choose the directory you would like to upload your images to by clicking on the dropdown list next to the 'directory' label. Keep in mind that the default directory used for images within content is images/stories/ ... so most of the time this is the directory that you should choose. You could also click on the folder icon named stories below the drop down menu.
  5. Once the stories folder has loaded you should be able to see all of the other images that you have loaded to your site, or at least the default images that come with the Joomla installation eg articles.jpg, asterix.jpg, clock.jpg etc.
  6. Click on the browse button on the right hand side of the screen and browse to the copy of your image on your hard drive.
  7. Click the upload button which is positioned next to the icon labelled 'Create'.
  8. Once your image is uploaded and the page has refreshed your image should now appear next to the other images in the stories directory.

Now its time to place the image in the content:

  1. Navigate to the content item you want to place the image in.
  2. Once the page loads click on the image tab on the right hand column which is in between 'parameters' and 'publishing' tans.
  3. In the images panel you should be able to see two columns or list areas. The column on the left entitled "gallery images" holds all of the images that we found in the stories directory when we were in the media manager.
  4. The column on the right holds all of the images that are currently being used in the content item.
  5. Find the image that you have just uploaded and click on it and then press the arrow button that sits in between the gallery and content image columns.
  6. Click on your image on the right column and make sure that it is highlighted and you can see it underneath the content image column and it is currently displayed as the active image.
  7. Now move to where you want your image to display in the content and click your mouse button (make sure that your cursor is flashing where you want the image to appear). This can either be in the intro text or main text box.
  8. Click on the button below the text area called 'insert image'. You should see the text: mosimage surrounded by { } appear in the text where you want your image to be placed.
  9. Press apply on the top right hand side of the page.
  10. Your image should now appear in your content.

You may find that the placement of the image requires a little tweaking. This is where the parameters underneath the gallery and content image columns come in.

  1. The cleanest way to display an image is to leave the captions and borders blank and simply use the image align option.
  2. Click on the image align drop down box and choose the alignment you require for the image.
  3. Now write your description of the image in the text area next to "alt text". This will be the text displayed to people using screens readers or if the image goes missing.
  4. Click apply at the bottom of the parameter box (please note that this is not the apply button at the top of the page.
  5. Now click the apply button at the top of the page.

    Your image should now be aligned according to your choice and the text of your content should wrap around the image. The margin or buffer between the image and the text is controlled by the img tag in your css file.

Creating a gallery.

Creating a gallery using this technique is little more than using the insert image button or mosimage tag a number of times in your content.

  1. Follow all of the steps above to get your image into the director.
  2. Instead of clicking the mosimage button once, click the button for each image you want to display in the content eg 5 images so click the button 5 times.
  3. Now simply add the images you want to appear in gallery, remembering that images will appear in the same order that they appear in the content items list.
  4. You may have to tweak the alignment settings of the image depending on the width of your template, but usually assignin left align to all of the images will do the trick.
blog comments powered by Disqus