Adding Images to Articles
The little image icon in the text editor is included and supported by the editor itself. Some editors (like TinyMCE pictured above) have very basic image insertion tools. Generally, this tool is used to modify an image that has already been inserted into an article by way of the Image button located below the main text field.
The Image button located below the main text field is the primary method most users insert images into their article. It gives you immediate access to the media folder as well as an upload option. You can set the image alignment, title, description, and caption using this option.
Fields under Images and links are used to set images in a place pre-determined by the template. This could be in conjunction with an extension or within the template's built-in parameters itself.
The Images and Links area of the article editing screen gives you the ability to add images in a way that is supported natively by various templates and modules.
To insert an image into one of these preset fields, simply click the Select button and choose your desired image from the media library that appears in the popup. You can alternatively upload a new image by scrolling down within that popup and using the upload tool.
Alt Text allows you to add text that appears in place of the image in cases where the image is unable to render. For instance, a blind visitor using a braille display may only be able to read what appears in this field.
The Caption is whatever you would like to appear as a caption on the article.
The Joomla media management tool gives you the ability to access files in your media directories, as well as upload new ones. You can access this popup by hitting the Image button under the text editor of your new article page.
The top portion of this tool gives you basic navigation and selection controls . You can use this to quickly select your image or media file of choice. Once you have done this, hit Insert to add the selected image to your article.
If you wish to use an image hosted separately from your site, or define the image's settings beyond the defaults, you can do so using the bottom portion(s) of the utility (pictured below).
The lower portion of the utility gives you control over how the selected image appears in your article. It also allows you to set an external URL for instances where an image you need to insert is purposely hosted elsewhere.
You can also set the item description, caption, alignment, and image title.
If you have not yet added your new image to the media library, you can do so using the upload tool at the bottom of this popup.
The integrated image tool built in to TinyMCE is very simple, though it does offer several useful features for refining how your image looks when placed in the inline editor.
For example, you can set the Dimensions , Border , the Vertical and Horizontal Space between your image and the surrounding text, configure image alignment, and set an image description which appears when you move your mouse over the image.
Once you have made your desired changes, hit Update to lock them in.