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.

Creating an image

  • 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 to the right) 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;
  • Set the location of the image (if required)
    • Click the Image Float button, and select where you want the picture to appear on the screen (view the examples to understand how this works):
      • Not Set (the default) places the image on its own vertically, with surrounding text above and below. It is possible (but not easy) to put the image on its own in a paragraph, and to have the paragraph left, centre or right aligned;
      • Left puts the image at the left margin of the screen, with surrounding text to the right of the image (if the image's width allows);
      • Center puts the image horizontally in the centre of the screen, with text to the left and right (if the image's width allows);
      • Right puts the image at the right margin, with text to the left if possible.
  • Click the Insert button to insert the selected picture.

Other image formatting

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, and it also does not allow the size to be set to a fraction of the window size. In either of these cases, it is unfortunately necessary to view and edit the raw HTML code, as follows:
    • First, click the Source button in the Editor Toolbar;
    • This changes what is displayed to a 'raw' HTML version of the page text, which is the form that a browser understands;
    • In this HTML code, you need to find the <img ...> tag for the image; either look for the image file name or for the text just before or just after the image (using the Source button to switch between WYSIWYG and HTML views of the page can help, and using CTRL-F allows you to search for a bit of text);
    • The <img> tag that defines the image will look something like <img alt="" class="pull-right" src="/images/stories/myimage.jpg" />. You need to add a style definition to this, to specify how it is to be displayed, for example adding style="width:40%;" will specify that the image should occupy exactly 40% of the width of the page window. The order of attributes in the <img> tag does not actually matter, but a sensible place to put the style attribute is at the end, just before the / character. The <img> tag would therefore change to something like <img alt="" class="pull-right" src="/images/stories/myimage.jpg" style="width:40%;" />;
    • It is possible at the same time to add margins round the image, for example with style="width:40%; margin-left=10px;".
  • 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;
  • Link - The image can be used as a link by clicking it and using the normal Link button.

Altering an image

To alter the properties of an image that you have already put on a page, point at the image, right click, and select Image Properties. This will display the Image control window (as displayed above), and allow you to change the location, caption, etc.

Images can be deleted or cut and pasted just like text.

Images in calendar pages

There seems to be an incompatibility between our chosen Editor and the chosen Calendar extension, which makes it impossible to add (or alter) an image to a Calendar event page. The solution is to close the event page, open a normal article page (perhaps using New Article), create the image in that article, close the article page without saving, reopen the Calendar event page, and paste the image.

Displaying wide images

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.