This Joomla Tip is about inserting pictures into your web page items.  It is assumed that you are using Joomla.

When you create or edit an item in Joomla the editor allows you to place an image placeholder anywhere you want on the page using the "insert image" button that is below the edit window.  The actual image won't show up in the editor, just a tag that looks like this:  {__mosimage__} only without the underscores.

Images that you can place on your web pages have to be in the \images\stories directory on your web site or in any sub-directory one level below the \images\stories directory (e.g. \images\stories\mypix).  You cannot use second level sub-directories (e.g. \images\stories\mypix\my-subpix).  That won't work in the current Joomla.

If you are uploading pictures using Joomla's upload facility, make sure you put the pictures in either the \images\stories directory or one directory down from there.  Anything else won't work.

For details on how to place an image on your web page ...

To place an image placeholder while editing an item:

• Open the item you want to edit.
• Place your cursor at the spot in the text where you want the image.
• Click on the 'insert image' button and notice the new {___mosimage__} tag where the cursor is.

Ok. Now you have a place for an image to be.  So what image will you put there.  Here's how to set which image goes in that placeholder when the live page is displayed.

• Click on the Images tab on the right side of your window.  Notice the Gallery Images list, the Content Images list (probably empty) and the Sub-folder drop-down list box below the Gallery Images list.
• Select an image in the Gallery Images list or, if necessary, first select the appropriate sub-directory using the Sub-folder selector.  You can select multiple images by holding the control key or shift key just as you can in Windows.
• Once you've selected the image(s) you want, click on the '>>' button.  This will copy those image names over to the 'Content Images' list.
• Now, save your page (or Apply changes) to see the picture added to your content on the live page (you have to go look at the live web site to see the changes).

Once you understand the above steps you may notice that there are several attributes that you can set for images.  While on the Image tab in the editor there are several configuration options in the bottom of that section.  These boxes let you set attributes for images.  You might need to experiment a bit with these options to get the effect you really want.

Image Size

A word about image size and your Joomla template.  Most Joomla templates are set to be either 800 pixels (px) or 1024 px wide.  Some use a variable width.  You need to understand your template limits in order to upload and use pictures that are an appropriate size.  Using a picture that is too big may cause the template to display thing oddly.

Each template is different, but you can generally assume that a template is 800 px wide.  The left menu section is typically around 150 px to 160 px wide, as is the right section that displays things like Newsflashes by default.  That leaves a center area for you and your pictures that is around 480 to 500 px wide.  If you don't use the right section then you can go to around 640 px wide.  Image height is up to you based on the affect you want in most cases.