translogo Joomla Specialist Nottingham

Call:  0115 9621218

JCE for Joomla - Inserting Images

JCE for Joomla - Inserting Images

Before you begin it’s very important that you prepare the image you want to use on the site. You will need to ‘size and optimize’ the image before use. Do not, under any circumstances, try to upload and insert and image direct from your digital camera. It will be far too large, both in terms of file size and of dimensions.

You can find some links to free image programs that will allow you to do this on my Resources page.

Once you have your image ready, login to the backend of your site and go to the Content > Media Manager link in the toolbar.

Joomla media manager


Choose where you want your image to go. In my case I’ve already created a folder called ‘jce’ so I’m going to click the folder ‘jce’ to open it.

media manager folders


Click the Green Upload button in the top left corner and browse to where you have saved the image on your computer.

media manager upload button


You can select multiple images. Click Open and then Start Upload. Your images will be uploaded into the correct folder in the Media Manager.

You can also use JCE to upload your image from within the article you are editing.

Open or create the article where you want your image to appear.

Place your curser roughly where you want to image and click the small ‘image’ too in the toolbar. In this case I’m going to click the ‘jce’ folder to open it then choose the file ‘dylan.jpg’.

browse for image


Alternatively you could click the ‘Upload’ button and browse for the image on your computer.

Click the name of the image so that it appears in the URL line and fill in the Alternate Text box. This Alternate Text is very important for your search engine optimisation and for users who use screen readers. It helps to identify what the image is about to the search engines and to users. It’s a good place to put an appropriate keyword.

Next I’m going to choose ‘right’ from the alignment box and enter 20 in the margin boxes – this gives the image some room so it doesn’t line up too close to the text. You can have the same or different values to top, right, bottom and left. You could also set a border if you want to. Click insert and save your article.

Image aligned right


From the front end the page now looks like this:

frontend image aligned right


You’ll notice the image is nicely placed and has a small margin around it.

If you return to your editor and click the image to select it, then click the Image tool in the toolbar, you will be able to change the settings.

If you choose ‘Centre’ for your alignment, the Clear selection will be greyed out. Your image will appear in the centre in its own paragraph with no text wrapping. You can also choose align left.

image centred

Get In Touch

Joomla Specialist Nottingham

Tel:  0115 9621218

Mb:  07775 510326

12 Redhill Lodge Drive, Redhill,  Nottingham NG5 8JH

LJN Web Design Logo