TeachMeJoomla

How to insert an image into a content item

If you don't have the time to read Anna's tips, I've written about some of the common tasks in separate articles(such as this one).

Important notice!

You need to upload the images before you insert them in content.

Joomla only allows inserting images from the /images/stories folder and one-level subfolders (e.g images/stories/yourfolder)!

If you create subfolders in images/stories, remember to copy the /images/stories/index.html into those subfolders. This prevents unwanted directory listing (and bulk image downloading) is someone tries to directly access your uploaded images.

(it is possible, but not recommended to insert images through HTML tags)

You may upload the images using Joomla's Media manager, The Joomla XPlorer component, or a ftp client. The important thing is to place images in images/stories. Note that your images/stories MUST be set to world-writable permissions (777).

Joomla media manager

Once you're done with uploading go to the next step.

Login to your Joomla administration, and open a content item for editing. You'll notice the "images" tab on the right. Click this tab and select the images you want to display in content.(see picture for details). Note that you must click "Apply" after setting image parameters(such as border or caption).

Joomla Images editor tab

Inserting images in content items it's fairly simple. Joomla uses the "mosimage" text enclosed in curly braces as a placeholder for images. So, when you write an article, just insert the {_mosimage_} code(without the underlines) in the place you want an image to appear. Save your content item, and check it out in frontend.

(I wrote the underlines so that Joomla does not interpret my tip as an mosimage code(tag))

You may write this code in article introtext of `fulltext`.

When displaying content in frontend, Joomla automatically replacest those mosimage codes with the actual images. First code gets replaced by first image, the second mosimage code occurence gets replaced with the second image, and so on. This very article is a living example.

Deleting a content item does NOT delete any images it may contain.

Why does image publishing work like this?

As you may know, joomla features extensions called "mambots", which alter content items just before display. This is done automatically, you only need to enable the mambot in administration backend.

The default mosimage mambot simply replaces {_mosimage_} codes with HTML code which in order to display your images in frontend. Note that the mambot does not modify your content items, it modifies on-the-fly the way content displays on your site, each time an article is viewed.

When editing a content item, you see the mosimage code, but when viewing it in the frontend, you get the image. Images names are stored in the "images" field of the mos_content database table.

Using mosimage codes for placing images in content makes easy controlling image display sitewide. An advanced image mambot such as MosThumb can automatically generate thumbnails from images, and link them to a popup window.