How to insert an image into a content item

Tuesday, 03 January 2006

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
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
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.


Related articles(beta):



Give us some social love (it really works now)!

Reddit! Del.icio.us! StumbleUpon! Yahoo! Swik!



Comments (4)
RSS comments
1. celebritycheats04-09-2008 06:37

whenever i insert image it show in big size instead of small and there is no function of onclick event.

2. Insert Multiple Image05-11-2007 05:55

It is possible. Just add some picture, then insert {_mosimage_} equal to the number of picture you want to insert.

3. Inserting Images in Joomla20-09-2007 12:43

Is it possible in Joomla to insert more than 1 image against a Content Item? If it is can you explain how?

4. Size is matter09-08-2007 12:30

And how to set width and height of image in this way? i didnt able to do it, so my image always inserted with html code.

Write Comment
  • Please keep the topic of messages relevant to the subject of the article.
  • Please don't use comments to plug your web site. Links are rel='nofollow'-ed
  • Please refresh the page if you're having trouble with the security image code
Name:
E-mail
Homepage
Title:
Comment:

:) :grin ;) 8) :p
:roll :eek :upset :zzz :sigh
:? :cry :( :x
Code:* Code

Last Updated ( Thursday, 18 September 2008 )
 

Europe freelancer directory

Newsletter

Subscribe to TeachMeJoomla's newsletter
Name:
Email:


Auto tags

joomla insert image

joomla mosimage

joomla images

mosimage joomla

insert image joomla

joomla image

insert image in joomla

how to insert image in Joomla

images joomla

images in joomla

joomla insert images

joomla insert picture

inserting images in joomla

image joomla

insert picture joomla

how to insert images in joomla

joomla {mosimage}

{mosimage} Joomla

insert images joomla

joomla insert image in article

joomla inserting images

how to insert image joomla