Joomla! Documentation™

Introduction

How best to add images to an article depends on which version of Joomla and which editor are in use. This article has illustrations for Joomla 4, with notes on differences in Joomla 3, and TinyMCE the Joomla default editor. To get started, open an article for editing:

• Select Content → Articles in the Administrator menu.
• Select the title of the article you wish to edit

After inserting the article text, place the cursor at the location where the image should appear.

Adding a local image

If the image is located in the images folder of your Joomla installation you should insert the image using the CMS Content → Media button In the TinyMCE edit toolbar (In Joomla 3: Select the Image button):

In the popup window, navigate to the image you want to use and click to select it. On selection a form will appear prompting for additional data. In Joomla 4 the form is to the left. In joomla 3 the form is at the bottom (scroll down):

Set the image properties as required. In most cases you should certainly fill out the Image Description (Alt Text) field. The other fields are used to customise the image appearance with your own css.

• Image Description: This becomes the alt attribute for the image, an important feature for accessibility and compliance with web standards.
• Image Title: Used for the optional caption and also becomes the title attribute in HTML.
• Image Float: Sets the image alignment. By default, the align attribute is Not Set.
• Caption: Enables the caption which displays the Image Title below the image.
• Caption Class: Applies the entered class to the figcaption element.

Select the Insert Media button to insert the image. The Insert Image screen will close and the image will be displayed in the editor. Or select the Cancel button to leave the Insert Image screen.

Adding a remote image

If the image you wish to use is not in the images folder of your Joomla installation a slightly different procedure is needed.

• Select Insert → Image from the TinyMCE toolbar to open a dialog box. In Jooml 3, use the Image icon and the same dialog as used for local images.
• Insert the image url in the Source field.
• Fill out the other fields as required.
• Advanced provides some formatting options applied as in-line styles. Experiment with 1rem, 2, groove. (This feature is incomplete)

Uploading images using the Insert Image screen

You may also upload new images using the Upload section of the Insert Image screen.

1. Click the Browse button to open a file browser.
2. Select the image files you wish to upload. Click Open in the file browser to confirm the selection. Note: The file browser style and layout depends on the browser and operating system you are using.
3. The selected file(s) appear at the bottom of the Insert Image screen. Click Start Upload to begin uploading files.
   • When the upload is complete a green notice will appear at the top of the screen.
4. You may now select and insert the uploaded image as before.