Front End Images

How do I upload an image? At the foot of the WYSIWYG editing pane there is a link called IMAGE - see screenshot. When clicked it opens a new window [NOT shown] below which are two buttons; one to BROWSE to an image on your own computer the other to START UPLOAD. Once uploaded it can then be inserted into an article. Size matters! For the majority of pages, such as this one, the overall image width should not exceed 600px. In all cases use 72 d.p.i. - monitors can't display more. Upload ALL images [other than those for random display - see below] into public_html/images/stories - don't blame me! it's Joomla! If you don't put them within ‘stories’ you won't easily be able to browse to them when editing. New folders within images/stories can be created if you wish.


How do I insert an image in an article? Easily! Say you want to change the image graffiti01.jpg on the Graffiti page to graffiti02.jpg Both are already in images/stories/joomla. Once you have the Graffiti page open in edit mode, one way to change the image would be to click the image in the editing window to select it, then delete it. Click the IMAGE link at bottom left of the editing window - see screenshot. Find the image called graffiti02, click on it to select it, then click the INSERT button at top right. Job done! The image should now display in the editing window. If it doesn't - job not done! Once the image displays in the editing window you can further edit it, position it etc. To do so, click the image [to select it] then click the 'edit image' icon above the editing window - see screenshot.

Can I have a slide-show? Certainly! There is a slight caveat now however. Unless you know what you are doing, it will probably be best to write your article/s, upload your images then contact an ADMINISTRATOR to implement the slideshow.

What about clickable thumbnails in an article? Piece of cake. See the Ice House for example. To achieve something similar just type {:multithumb} at the head of the page on which you want the thumbnails to appear. N.B. it does not need to be in blue but you MUST leave out the first : included here to prevent the code executing on this page. The images will not be resized until viewed in a browser, so the effect is not immediately apparent in the editor. The {:multithumb} command will affect ALL the images on that page. The caption below the thumbnails is taken from the 'image description'. Once the image is positioned in the article, select it then click EDIT IMAGE - see screenshot at top - and enter whatever text you want to appear below each thumbnail in the IMAGE DESCRIPTION box on the GENERAL tab. You can have an array of thumbnails - see Prideaux Parameter settings can be overridden e.g. {:multithumb popup_type=slimbox full_width=400}.

How do I get a random image at the head of the page? Your image/s MUST be EXACTLY 940 x 200 pixels and 72 d.p.i. in jpeg format and no bigger than about 50 KB. Name them what you want but avoid naming any ‘header01.jpg’ to ‘header30.jpg’ unless you want to overwrite what are already there. N.B. Upload to images/random-imgs NOT in stories. They should be relevant to the website!