How To Add An Image Into An Article In Joomla

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

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.

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.

Conclusion

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:

FastComet
$1.79 /mo
Starting price
Visit FastComet
Rating based on expert review
  • User Friendly
    4.7
  • Support
    5.0
  • Features
    4.8
  • Reliability
    4.5
  • Pricing
    5.0
Kamatera
$4.00 /mo
Starting price
Visit Kamatera
Rating based on expert review
  • User Friendly
    3.5
  • Support
    3.0
  • Features
    3.9
  • Reliability
    4.0
  • Pricing
    4.3
HostArmada
$2.49 /mo
Starting price
Visit HostArmada
Rating based on expert review
  • User Friendly
    4.5
  • Support
    4.5
  • Features
    4.5
  • Reliability
    4.5
  • Pricing
    4.0

How To Insert A List Into A Joomla Article

This article discusses step by step tips on how to add a list into a Joomla arti
3 min read
Avi Ilinsky
Avi Ilinsky
Hosting Expert

How To Add A “Create Article” Menu Item Type And Create A Module In Joomla 3

This article explains how to add a “Create Article” Menu Item Type so users can
3 min read
Avi Ilinsky
Avi Ilinsky
Hosting Expert
HostAdvice.com provides professional web hosting reviews fully independent of any other entity. Our reviews are unbiased, honest, and apply the same evaluation standards to all those reviewed. While monetary compensation is received from a few of the companies listed on this site, compensation of services and products have no influence on the direction or conclusions of our reviews. Nor does the compensation influence our rankings for certain host companies. This compensation covers account purchasing costs, testing costs and royalties paid to reviewers.
Click to go to the top of the page
Go To Top