Our top 7 tips when working with the Joomla editor
1 – The first step to having a more pleasant experience with editing text and images directly in the back end of Joomla is to replace the standard editor with a more robust extension created specifically for this purpose. We like to recommend Joomla Content Editor. It's free, much nicer to use, and accomplishing basic tasks goes much faster. For instance, it's a lot easier to create links, and dealing with uploading and styling images is a snap. This is demonstrated in our Joomla Pro course.
This is what the editor looks like after installing the JCE extension:
2 – Images – resize first before uploading. This reduces both download time and upload time. Set some standard image sizes and file sizes that you will use across your entire website, and then optimize them before you send them off to your server. This will dramatically improve your users' experience by speeding up page download time and rendering your site much faster. The theory is that this actually helps with search engine rankings as well. Faster loading sites rank higher based on equal content. Try to keep your article images less than 100KB when possible.
Let's take a look at the JCE extension.
If you click on the image while you have the article loaded in the JCE editor, you can then click on the image editing icon shown below in red.
This brings up the Image Manager, shown below, that allows you to quickly size and style your images. For those of you that are more comfortable with CSS, there is an Advanced tab that shows the code built for you by the editor. You can also fine tune the CSS on the Advanced tab. This is a great way to get your style code created quickly and then adjust it exactly how you want.
3 – Alignment – Images look good when wrapped around text. This is done using the Alignment option in the Image Manager, shown above. This will create a "float" setting in your CSS code. If you have problems with things not looking good beneath your article, set the Clear setting to both and see if that helps.
4 - If you include a bit of white space so the text isn't too close to the image, your page will feel more open and balanced. White space is a lot more important than people realize sometimes. This is accomplished with the Margin setting, and 10 pixels or so will do. If you leave Equal Values checked, it will place a margin on all sides of the image. If you uncheck this and just enter a value in one box, say Left, the margin will only be applied to that side.
5 – You can also upload images using the editor, rather than using Media Manager.
You'll notice that in the picture above there is a file browser. The JCE extension provides a nice image upload function. This means that you don't have to save a partially created article and close it, so that you can access the media manager because you forgot to upload the image first.
6 – If you've been trying to deal with line breaks within an article, you probably know that you can get a paragraph break by hitting the enter key. But what do you do if you want a single line break? Use Shift + Enter.
7 - Toggle your code. If you're not already, you should get somewhat comfortable at looking at basic HTML and CSS code. You don't have to be a professional coder, but if you can understand the basic tags used to lay out pages, you can use the JCE editor to check the code being used for an article. Then, if something isn't formatted correctly, but you can't see what it is in the WYSIWYG (standard display - What You See Is What You Get) layout, you have a much better chance at understanding why. Sometimes a couple of hidden tags will create a gap that won't delete properly, but if you can see that in the code - problem solved.
We hope these tips make your Joomla life a little easier and your work go a little faster. If you have any tips you'd like to share with your fellow readers, please email them to us and we will consider including these in a future article.
