Logo

Creating spaces around images

A common question we receive from Joomla beginners is "will I need to learn HTML code to build a Joomla website?" The answer is "no – but it helps". It is easy to insert an image into an article as demonstrated in lesson 10 of our free Joomla training for beginners course – The Basics.

However when you insert an image and align it to the left or right of text, the characters usually end up pressed against the image which doesn't look good. You can add some spacing in HTML mode if you know how. But it's much easier when you replace the standard Joomla editor with a free extension called JCE. Here is the process:

1. Download JCE

2. Install it as you would any extension. Review lesson 12 - Joomla Extensions - if necessary.

3. Enable JCE. You can make this the default editor for all your users in Global Configuration.

The default editor settings in Global Configuration

Or you can just make it available to you on the My Profile page.

The editor settings in My Profile
 

4. Open an existing article or create a new one and note that the editor now looks different. There are now many more icons available. Select an existing image and click the image icon which is on the last row towards the right. Or to insert a new image, position the cursor at the point where you want the image and click the image icon.

Select an image and then click the image icon in the editor
 

5. From the alignment drop-down, choose either right or left.

6. The next line, labelled Margin, is where you can set spacing around the image. To insert the same amount of spacing around all sides of the image, just enter a number into the Top box and leave "Equal Values" ticked.

How to set uniform spacing around an image

But you probably just want a bit of space on one side of the image. In this case, untick the "Equal values" box and add numbers in the relevant boxes. For example, if your image is aligned to the left, you might enter 10 in the right box. The result will be that the image has 10 pixels of space to the right which gives the text some "breathing room". You may also need to add some space to the bottom.

Alignment and margin settings 

JCE is an excellent extension and provides many more features than the standard Joomla editor.

The idea for this article came from our forum. Anyone is welcome to post in our general forum. And Joomla Pro members have access to an exclusive forum for priority support.

Rate this blog entry:
How to embed a Wufoo form into a Joomla article
How to avoid the Joomla 2.5 upgrade blues

Related Posts

 

Comments 5

Guest - Kaloyan Banev on Friday, 10 February 2012 18:41

I was using JSE in the past, but there were so many errors, incompatibility and stability issues that I've met using it on complicated projects that again I switched on to Tiny MCE which is more than enough and actually can do the same.

0
I was using JSE in the past, but there were so many errors, incompatibility and stability issues that I've met using it on complicated projects that again I switched on to Tiny MCE which is more than enough and actually can do the same.
Margot on Friday, 10 February 2012 19:40

Thanks Richard, great tip. Will get this one immediately.

0
Thanks Richard, great tip. Will get this one immediately.
Guest - dave on Saturday, 11 February 2012 01:47

Thanks , so much for your help and time , it is appreciated !! learning Joomla 2.5 is a lot easier with your help !! Dave

0
Thanks , so much for your help and time , it is appreciated !! learning Joomla 2.5 is a lot easier with your help !! Dave
Guest - hosting joomla on Wednesday, 15 February 2012 07:03

Thanks for the article. I had problems with images but your article is very useful. Keep posting!
Greetings!

0
Thanks for the article. I had problems with images but your article is very useful. Keep posting! Greetings!
Guest - connal on Friday, 16 March 2012 09:22

Great advice as always. Thank you. You need one of those shiny ring things around your head for the help you give joomla initiates like me. Thanks, connal

0
Great advice as always. Thank you. You need one of those shiny ring things around your head for the help you give joomla initiates like me. Thanks, connal
© Copyright 2008-2016 RickSure Pty Ltd • ABN 56 072 121 585 • Privacy PolicyLegals
Build a Joomla Website is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.