HOW DO I INSERT AN IMAGE? If the image is already on the website, inserting it on a webpage is simple. If the image is not on the website it is still simple but takes a little longer. For the purpose of this tutorial I will assume the image is on your computer but not on the website.  

Joomla is not a graphics program. Images can be edited to a very limited degree within Joomla, so much the best plan is to get your images right BEFORE you upload them.To upload and insert a single image to appear on a webpage, click the IMAGE button [arrow 8] at the foot of the editing pane. [Slideshows etc are dealt with later.]


This opens a dialogue box with varous options, including one at the bottom of the pane to BROWSE to an image on your own computer for uploading to the website - see next two images, Gi and Gii


Image Gi above shows the INSERT screen; however, you must scroll to the bottom of the window to see the BROWSE button. Use the outer scroll bar - red arrow in Gi ; the inner is to scroll through the folders/directory view. There may be more folders in future, necessitating scrolling. 


If the image you want is not already on the website click the BROWSE button to find and select it/them, then click START UPLOAD. Before uploading, you should have open the target folder where you want your image/s to saved, otherwise all images uploaded to the website will be put in the general IMAGES folder by default. You can use any of the existing folders within IMAGES or create new folders to keep things organized.

The overall WIDTH of images should not exceed 700px on pages with modules [such as this one i.e. the Login box is a 'modules']. For pages without modules [e.g. the Gallery pages] the overall width should not exceed 800px. The resolution of all images should not exceed 72 d.p.i. - monitors can't display more. 

Once uploaded, it or any other image, can be selected for insertion on a webpageBefore clicking INSERT [Gii] there are various display options available but these can mostly be tweaked in edit mode once the image is displayed on the page you want. To edit the image once it is where you want it, click the image to select it then click the EDIT/INSERT IMAGE icon [6 C - looks vaguely like a landscape] and fire away. Options worth considering are, among others; giving it a margin of 5 pixels, aligning it, and, if you don't want text to wrap around the image, in the box labelled CLEAR choose BOTH - see H


Notice when in the EDIT IMAGE [H] at bottom left in FOLDERS the icon for the OPEN folder differs slightly from CLOSED folders; the actual image file you are working with is shown in bold with a faint background highlight; the DETAILS pane shows information about the actual image file you are working with; and the PREVIEW gives an approximation of the effect any changes you make to ALIGNMENT, CLEAR etc will have on the image when displayed.


As with NEW ARTICLES [dealt with on the TEXT page], Slide Shows need implementing from the Back End by an Administrator, but the images can be prepared and uploaded as outlined above by Editors and Authors. At present, all images for Slide Shows are in folders called gallery1, gallery2, gallery3 etc within the GALLERY folder in IMAGES. Images can be deleted or overwritten as necessary.

In oder for a gallery of images to appear on a page, all that is needed is the insertion of the following short piece of code on the page where required, but replace the square brackets with curly ones;


Where galleryX is the name of the folder in which you have uploaded the images to be used in a slide show. All the rest is accomplished by the Joomla gallery plugin.

Note for Administrators: For a gallery or slide show to appear on an uncluttered page, as on the current gallery pages, remove unwanted modules via the Module Manager > Menu Assignment tab.

Apart from slide shows, random image displays, light boxes and all manner of other image, video and other media plugins are available for use with Joomla.