Tutorials, reviews, case studies and other tips to help website owners and website developers master the Joomla content management system.
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.
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.
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.
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.
JCE is an excellent extension and provides many more features than the standard Joomla editor.