Editing articles in Joomla 1.5

Articles can be created and edited using the browser built in editors. Keep the html as simple as you can. Editors have a nasty tendency to insert specific font information etc. and this will come back and bite you if

the site style changes or when you later edit the article. I recommend keeping to a limited set of well known tags - div, p, h1, h2, h3, strong, em, br, img and using a sitewide agreed set of CSS classes (get a list for your site and keep it handy - perusing the css files will generally be too confusing because of layout classes and clutter although a good designer should have created a 'typography.css' file or some such that is focussed on the stuff you are interested in).

Even if you don't know html well, always review the html code produced by your editor before submission. If you can't understand it, it probably should not be there.

Avoid tables for layout like the plague because they will cause all sorts of problems later on.

Editors

There are two in common use..

TinyMCE is the default and comes built into a standard Joomla 1.5 installation. It offers a basic 'what you see is what you get' edit capability and you can click on the html button to directly edit the code.

JoomlaFCK is the alternative. Its preferable if you know HTML because it lays out the html a little better when you use its auto format source option. Apart from that its down to personal preference.

You probably need to contact a site admin to change your default editor.

For serious article development, I strongly recommend that you develop the article offline using a quality html editor.

Dreamweaver is my preferred choice. It costs but offers much superior editing and performance when compared to the competition. With Dreamweaver you can hook up the CSS files and edit a test page looking much the same way as it will appear on the site and then copy out the nicely structured HTML into the html entry of either TinyMCE or JoomlaFCK to 'upload' the article.

If its out of reach, google "html editors" and find one you like.

When editing offline be sure to upload required images and check that their paths are correct. Images should be stored under images/stories in an appropriate subfolder.

Inserting images

Images can be added anywhere within an article's content but there are two problems you always face with them:

Uploading and referencing the image source

All images need to be located on the Internet so that internet users can access them. This means that there must be some URL that will access the image. For example http://paulwhippconsulting.com.au/images/paul_whipp.gif. In practice this means that you either need to know where the image you want to know is already on the Internet.

By the way, the URL just points to the image so to see it you'd need to click on it like a normal link. To display the image within content it needs to be enclosed in an image tag such as <img src="images/stories/key.jpg"> so the browser knows you want it presented as an image.

Image insertion can be expedited using one of the online editors like JoomlaFCK because it allows you to conveniently browse and pick or upload an image at the click of a button - usually article content images are stored under images\stories and its a good idea to keep to that practice when uploading. Once you've done this, you'll probably still want to check out the layout section below to get the image positioned nicely.

Positioning the image in the article

It is very easy to get into a mess when positioning images or text content in an article. Dealing with this fully would fill a book covering CSS (Cascading Style Sheets) in depth. However, for clean and simple presentation you can get away with just a little knowledge and some rules of thumb. Lets assume we're just going to worry about inline images (small things that will be treated as if they were a character or word in the text), images that are floated to the left so that the text flows down their right hand side and images that are floated to the right so that the text flows down their left hand side. This covers most cases. If you want something more complex, my advice is - forget about it. If you can't forget about it, get a book on CSS and start reading. In any event, here's my quick layout guide:

Rule 1: Let CSS do all the positioning work for you.

Ensure your site has some simple layout css for images. Your webmaster or graphics people should sort this out but here is what I use so that images can easily be blocked in with text and floated to the left or right:

 
img.left {
	margin-right: 10px;
	margin-bottom: 10px;
	float: left;
}
img.right {
	margin-left: 10px;
	margin-bottom: 10px;
	float: right;
}

  div.encloseFloats:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

<!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>

  div.encloseFloats {
    zoom: 1;     /* triggers hasLayout */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
<![endif]-->
 

When your image tag is inserted, whether you've done it yourself or used an editor to do it, go to the html code where you can see your 'image tag' -
<img src="images/stories/key.jpg">
Make sure that it is positioned where you want it in the flow of the text. If your goal is to have text appear alongside it (to the right or left), position the image BEFORE the text. This is true whichever side you want the text to appear on. For an inline image, just include it in the flow of the text like this [smiley inline] and remember you can always edit this article to look at the html code if you want to.

Once your image tag is in place, add either class="left" or class ="right" like this -
<img class="left" src="images/stories/key.jpg" />
<img class="right" src="images/stories/clock.jpg" />
to get the desired result.

Adjusting the text flow

Often, you will get irritated by the way that the text flows on the page. It might not break up the way you want it to and there will be an immediate temptation to add in <br /> or <p>&nbsp;</p> (possibly just by hitting the enter key if you have a 'friendly' editor) to move the text down the page and get it to flow how you want it to. This will not work. It might look great in the editor but html is a stream of information presented at all sorts of different widths and on all sorts of different clients so different amounts of text are going to appear on different lines. That is why you need to remember another very important rule:

Rule 2: Let CSS do all the positioning work for you.

If you want the picture to be grouped together with some text, you need to tell the editor that the picture and the text are part of the same 'thing'. Think of this as a 'division' so the tag 'div' will readily come to mind and enclose your image and the related text in a div like this:
<div class="encloseFloats" >
  <img class="left" src="images/stories/key.jpg" />
  <p>I'm to the left of the image but text after the division will be under it.</p>
</div>

Here is how that looks:

I'm to the left of the image but text after the division will be under it.

Notice that this text is now free to appear as a new 'division' or as part of the main content without any issue of it flowing next to the image where its not wanted. If you did want it there, just don't bother using the div. BTW some editors (Dreamweaver) are not smart enough to notice the CSS declaration so always check your article in a real browser to be sure its how you want it.


Comments

Stas Ustimenko 2 years, 6 months ago

I like to use Codelobster: http://codelobster.com/joomla.html

Link | Reply

New Comment

required

required (not published)

optional

Australia: 07 3103 2894

International: +61 410 545 357