To upload, insert and format a picture, you need to used the Image button in the Editor Toolbar.

Look at the examples to understand the effect of the formatting parameters.

  • Move to the place in your page where you want to place the picture;
  • Click the Image button in the Editor Toolbar. This takes you to a File Browser window (illustrated here) where you can find and format the picture;
  • Navigate to the required folder on the server
    • You will start in the top-level images folder. If you want to go down to a sub-folder, click on a sub-folder name to open it. Note that opening a sub-folder sometimes takes time. The images folder is organised by subject (Biodiversity, History, Living in Sutton Poyntz, etc.);
    • Click on the up button if you need to go back up one level in the folder tree;
    • It is not possible to create a new folder from here. If you want a new folder, you need to exit the Article Editor (saving work you have done), and go to the Media Manager;
  • If necessary, upload the picture
    • If the picture is not already on the server, you need to upload it;
    • Navigate to the right folder on the server (as above);
    • Go down to the bottom of the File Browser window and click the Browse button; this opens a folder view of your own computer;
    • Navigate to the folder on your own computer where the picture is;
    • Click the picture file[1], and click the Open button;
    • Click the Start Upload button. After a pause, the picture file will now appear in the server folder;
  • Select the picture you want to insert
    • Click on the name of the picture that you want to insert into your web page;
  • Give your picture a caption and/or title (optional)
    • We do not recommend using the Caption box to give your picture a caption. A better solution is to use a text box, containing the image followed by the caption typed on the next line (centre justified);
    • Type a description of the picture in the Title box; this description can be useful to Search Engines such as Google;
  • Click the Insert button to insert the selected picture.

Once the picture has been inserted, you can format it in various ways:

  • Picture size - you can change the picture's size on the screen to something smaller or larger than the original - making it larger will obviously affect the picture quality. To do so, click on the image, and use the handles at one of its corners (preserving the aspect ratio of the picture), or at the top or bottom or side. Please note that the Undo button does not apply to picture resizing;
    N.B. This method of resizing an image using drag handles does not work with some browsers. If you do not see drag handles at the image's corners, you need to set its size by using the Style input box that has been added for this purpose to the File Browser window (the Style box is not shown in the illustration above). Select the image, and click the Image button in the Editor Toolbar. In the Style box, input something of the form width:350px; or width:50%; - you can choose the actual size in pixels or as a percentage. Click the Insert button to add the width specification.
  • Border - if you want a border around the picture, it can be placed in a text box;
  • Padding - this is also best achieved by putting the picture in a text box, and adding margins around the text box;
  • Alignment - a picture on its own line can be left-, right-, or centre-aligned simply by applying the appropriate justification to the row (but note that centre-alignment does not always work). To have text flowing on either side of the image, it can either be put in a text box, or can be given a float_left or float_right style; this is done by clicking the image, and selecting img.float_left or img.float_right in the Style button. See the examples;
  • Link - The image can be used as a link by clicking it and using the normal Link button.

If the width of the picture has been set to more than 700 pixels (or 100% of the window width), it must now be placed in a special HTML container to make it independently horizontally scrollable (see the example below). Note that it must be in a line of text on its own, without text to the left or right:

  • Click on the picture;
  • Click the Create div container button in the Editor Toolbar;
  • In the Stylesheet classes box, enter the single word "panorama";
  • Click the OK button.

 


  1. Joomla can work with most common image file formats. We recommend .JPG or .PNG as suitable for most purposes (.PNG has the added advantage of providing transparency if this is useful); .GIF is also a good choice.