How To Add An Image Into An Article In Joomla

You can easily add image files saved in Joomla’s Media Manager in your articles. This option allows you to use one picture in many articles. A good point to remember about Joomla is that the webpage only exists when a user requests for the page.

As soon as such a request is made, Joomla gathers all the required webpage elements and information from the saved files and create the page in real time. These elements include image files.

This article tells you how to add an image in Joomla through the image button underneath the content editor window and through the content editor window in the Edit Article screen.

Follow this step by step guide to insert images into an article:

A: Uploading Image Through Content Editor Window

Step 1: Login To The Back-end Of Your Joomla Website And Open The Article To Insert The Image.

You can do this through any of the following three ways:

  • Click on Content, and then click on the Article Manager from the drop-down menu that opens. Move your mouse to the Article you want to edit and click on the title of the article to open it in the article editor page. As soon as the page opens, hit on the Edit tab you’ll find in the toolbar and then hit the Image tab underneath the Article content window.
  • Alternatively, you can also insert an image by clicking on the Add New Article tab you’ll find in the Control Panel. This is mostly used when you are creating a new article.
  • Another way to add an image to your Joomla article is to log in to the website front-end. It is possible to add an image from this part of Joomla website if you have the requisite permissions and are checking out the Article you plan to edit. If this is the situation, click the Edit tab to open the editor and insert your image.

Step 2: Decide Where You Want Your Image To Go In The Article

Once you have decided where you want your image to go in the article, click the Image editor button at the base of the screen. This takes you to the next step by opening the screen for you to insert image.

Step 3: Click The Insert Image Tab On The Screen

How To Add An Image Into An Article In Joomla

Clicking the Insert on the page will open insert image screen. You’ll see the insert image screen on the top right corner of the Edit Article screen. Select the image you want to insert and click on the Insert button. You can as well go through the directory by hitting your mouse on the folder icons. You can utilize the drop-down Directory menu to choose a directory fast. To go up to the level of the directory, click the Up button to go up a directory level.

Step 4: Set The Image Properties According To Your Needs

There are a few image properties you can select. This depends on the specific needs you have at each particular time. These include:

Image Description

Image description is the alt feature for the image and a very significant property of the image. It makes it easily accessible and helps it to fulfill web standards.

Image Title

This serves as an alternative caption and as well acts as the title element in HTML.

Image Float

This helps to align the image. The inserted image is commonly not aligned by default.

Image Caption

This is used to provide a caption that commonly shows up underneath the Image.

Caption Class

This feature incorporates the entered class to the figcaption attribute.

Step 5: Click on the “Insert” Tab To Insert The Image

Once you click on the tab, the Insert Image screen will lock and the image will be opened in the editor. If you no longer want the image, you can click on the Cancel tab exit the Insert Image panel.

Step 6: Save The Edit

Once you’ve finished installing your image, hit on the on the Save tab and then on the Close tab.  When you’re taken back to the Article Manager page of the article, you can click on the View Site tab located on the page top to examine your work. Go over to the Privacy Policy page, to see how your image has improved the pages look.

How To Add An Image Into An Article In Joomla

B: Adding Image To Your Joomla Article Through The Insert Image Screen

You may also upload new images with the use of the Upload section of the Insert Image panel. To do this, follow the steps below:

Step 1: Click On The Browse Button

This will open a file browser where can choose the image you want.

Step 2: Choose The Image Files To Upload

When you’ve selected the file browser, click on the open tab to confirm your choice. It is significant to note that the style of the file browser and layout depends on your browser and OS. The chosen files commonly show at the base of the Insert Image panel.

Step 3: Click Start Upload To Begin Uploading Files

When you are done with the upload, a green notice will be sent at the top of the panel.

Step 4: Insert The Image Into The Article

At this point, you can select and insert the image you have uploaded through the A steps above. You can as well incorporate images from an article via the option you can see behind the Image button underneath the Article Text panel you’ve clicked rather than going through the Media Manager every time you plan to upload an image into an article.

If you intend using an image that is from other sources outside your PC like from a Dropbox or Flikr profile, you would need to write down HTML address of the images. Alternatively, you can copy it from your web browser and then enter into a portion for Image URL.


These are all the steps you need to add an image into your Joomla article.  You need to select an appropriate image dimension and size before integrating them into the article on your website. If you make the dimension too big, it will destroy the design of the website rather than improve the design. Large image sizes could as well slow down your pages loading speed and increase the load times which may discourage some users.

Check out these top 3 Joomla hosting services:

Was this article helpful?