More on editing articles

From Joomla! Documentation

Note Please note that the content on this page is currently incomplete. Please treat it as a work in progress.

What is covered

This is 'hands-on' doing some commonly used features in Articles. These include:-

• adding a link to another page
• adding a table
• adding a picture
• adding a READ MORE facility
• breaking an Article into pages

None of them are essential for presenting content but their use can enhance the content of a web site if they are used in the right places.

Who is it written for?

• Everyone. But the tasks require a bit more background knowledge than text formatting, so if you are not very experienced at this sort of thing you may find that you need to follow the instructions carefully.
• There is an indication in each section about where the inexperienced might find problems

As with the tutorial on using the editor and adding articles - you need:-

• access to a Joomla! site
• to be logged in with a username with an appropriate level of permission
• to know where the Article to be edited is located

Adding links to another web page or article

One of the key features of documents on the web that they can have links to other web sites, making any one web page part of a large network which goes beyond text - thus the term hypertext.

There are two main options:-

1. A link within the current site to another article or menu
2. A link to a page on another website, that is to say an external website

1. To link to a menu within the current web site

The menu and article details will vary from site to site.

Using a simple editor

If you have sample data on a localhost web site, link something to the Menu 'More about Joomla!

Open an article for editing

Highlight the words to appear as an underlined link in the finished page

Click the "Insert/edit link" icon (a chain which became active when text is selected)

This opens a dialogue box

Link URL:Paste the URL of the part of the website you want to link.

Target: choose 'Open link in a new window'

Press Update

When the article is saved - check that the link works.

Another editor

Some editors allow for choosing menus and articles within the current web site, as the illustration shows. The initial process is the same:-

Open an article for editing

Highlight the words to appear as an underlined link in the finished page

Click the "Insert/edit link" icon (a chain which became active when text is selected)

This opens a dialogue box. To choose the right menu:-

Click the + next to Menu

Click the + next to Main Menu

Find the menu that you want to link.

Click the + next to that menu

This shows all the options below that menu item.

Highlight the one you want to use

To open it in a new window (rather than in the same page):-

Click Target - there is a list of choices.

Choose Open in New Window

Finally - to insert the link -

Click on the Insert button

2. To link to an external site

You need to know the address of the page you want to link. The best way to do this is:-

Open the page you want to link to.

Copy (Ctrl-c does this) the address in full from the top of the browser screen

In your article:-

Enter the text to be linked if it is not there already. (This is what appears as an underlined link in the finished page.)

Highlight the text to be linked

Click the "Insert/edit link" icon (a chain which becomes active when text is selected - in the bottom row of icons)

This opens the dialogue box

Paste in the address of the destination page in the Link URL box (Ctrl-v)

To open in a new window (rather than in the same page) - this is often helpful for external sites:-

Click Target - there is a list of choices.

Choose Open in New Window

Finally - to insert the link -

Click on the Insert button

Adding and editing tables

A table is useful for presenting tabular information. Some people use them to help layout pages, especially those with illustrations. There is no icon for adding a table on the simplest editors. So you cannot try this using the sample data on localhost.

• Tables are tricky and you need some experience to do this.
• Adding a table may seem cumbersome if you are used to using a word processor or spreadsheet. It uses code (HTML) behind the scenes and is less flexible than a word processor.
• You can copy tables from spreadsheets and word processors but it does not always give a good layout. If you have the experience, you may need to edit the HTML code in order to get a good layout.

The best tip - keep it simple to start with and don't over-use tables for layouts as they slow down the display of the pages

Create a table

Beware - Do not insert a table on the very top line of a page because it upsets the layout and pushes the table off screen to the right of the page!

Before you create a table:-

Write some text (or press Enter) on the first line of the article

Now you can do it:-

Place the cursor where you want the table to be located in the article

Click the create table icon

A dialog box appears to enable you to define some of the characteristics of the table. In the dialogue box:-

Define the number of horizontal rows and vertical columns

Enter a Width (This will present the table in the editor in a helpful way, so that you can see the cells. If you do not enter a width - the cells are squashed together and are hard to populate.

Fine tune the rest - such as adding a 1 for the thickness of the borders. (A zero does not show any borders)

Click create

If you have entered a width, the result on the screen is an empty table. Otherwise the rows and columns only expand when text or data is added.

Look at the icons along the top of the editor - those that allow you to do things to tables will have become active.

Getting a table to look as you wish usually is a case of trial and error. (While you are editing you will probably need to use the undo icon (little round arrow) - (or control Z on your keyboard)

Editing the table's properties

Highlight the table

Select the Insert/Edit icon

Make changes to such things as border widths.

Look under the Advanced Tab. You can change the border and background colours here.

Change rows, columns or cells

There are icons on the editor for doing most of the formatting you may need. You can make text appear to the right, centre or left or to the top, bottom or centre of the cell - just as you can using a word processor

Position the cursor in the row or cell you wish to change

Click on the "table row properties" or "table cell properties" icon as appropriate

Change the settings in the dialogue box

Click update

To add a row

Position the cursor in one of the cells

Click either the "insert row before" icon or the "insert row after" icon as appropriate

To delete a row

Position the cursor in one of the cells

Click the "delete row" icon

To add a column

Position the cursor in one of the cells

Click either the "insert column before" icon or the "insert column after" icon as appropriate

To delete a column

Position the cursor in one of the cells

Click the "delete column" button

To merge cells

Highlight the cells to be merged using the mouse

Click the "merge cells" button

To split cells

Highlight the cell to be unmerged

Click the "split merged table cells" button

Links to more about tables

• http://docs.joomla.org/Inserting_a_table_into_an_Article

• http://docs.joomla.org/Modifying_a_table_in_an_Article

Adding pictures

Many articles benefit from having pictures in them. It is worth a try - even if you do not have a lot of experience with websites. The maion problem is likely to be manipulating the picture itself which some people find much harder than the mechanics of uploading and inserting it.

There are distinct stages in getting pictures into articles:-

1. Preparing a suitable image
2. Uploading the image to the website
3. Inserting it into an article.

You have to prepare the image but the editor does the upload and insert for you. The detail depend upon how your website has been set up.

1. Preparing a suitable image

Your picture is likely to be on your own computer, where you can edit it and give it a suitable name.

• The image should be a file in a standard format - such as jpeg
• Give the image a short name without spaces. (The computer-way is to use capitals - eg LondonVisit)

2. Uploading the picture

There is a bit more complexity in inserting a picture than in writing the text. The picture has to be on the web server (where the web site is hosted) in order to be inserted in the article. The good news is that this is done using the editor. There will be a place for you to put the picture files on the web site you are using and you need to know where this is located in order to insert an image.

Open the Article for editing

Position the cursor where you want the image to start vertically on the page. If you are using a cell in a table, then place the cursor in the cell.

Click on the Image button below the Edit Article screen (not on the icon in the tool bar, which does not let you see images on your own comuter)

The Insert Image screen will open. The dialogue box hovers over the edit screen.

The top part of the screen defines where the pictures will go on the server.

Click on the folder on the server where you want the picture will go

Upload the picture

Find the image on your computer

Click on the Browse button.

This opens the File upload window which lets you find the folder where your image is located.

Find the picture file that you want to use on your computer

Click Open

This puts the location into the Upload box. To copy it to the server:-

Click the Start Upload button

The file should now be amongst the image files at the top section of the screen.

Highlight the image you want to use

This fills in the Image URL

Image Description: Give the image a description (needed for those who are visually impaired and have the information converted to speech).

Align: This can be set to the left or right of the text.

Image Title: Give it a title.

It is now ready to be inserted

3 Insert the picture

Click the Insert button at the top right of the dialogue box

The picture should be inserted on the page according to your instructions. It is likely to look a little strange in the editor edit.

Save the article

Check that it looks OK

A common problem is that the picture is the wrong size and sometimes much too large. You can resize it on the screen.

Position the cursor over the small square 'toggle' in one corner and drag it to make it smaller or larger. There is a bit of a knack in doing this!

You can repeat re-sizing again but may need to Save and then Edit again.

Using the Insert/Edit icon on the toolbar.

Alter Dimensions. Be careful because you need to keep the relationship between the height and width of the image. With a very large picture v- it can be usefulto put a decimal place.

It is often necessary to fiddle around to get it the right size and in the right place.

click on the Insert/edit image button (a green box - actually an oak tree - in the tool bar) to make changes.

To remove a picture from a page

Open the Article for editing

Select (highlight) the picture

Press delete on your keyboard.

The picture will remain on the server.

Links to more about adding images

• http://docs.joomla.org/Adding_an_image_to_an_article

Splitting a long article

It is sometimes useful to enable the article to be read in full following a summary or a few 'taster' lines - with a Read More button after the first few lines. Sometimes a long article is split into pages. There are two features to do this in the editor:-

1. Read More ..
2. Pagination

Read More ..

There are some pages where a short extract gives enough information for readers to be aware of the content of the article. If they wish to read more detail, they can choose to see the whole feature. In these cases, the Read More facility is very useful.

Open the article for editing

Make sure that the 'taster' text gives a good idea of the content of the rest of the article

place the cursor at the end of the taster text

There is an icon called Read More underneath the Editor screen.

Click the icon

A dotted line is inserted into the article.

Save the article

Only the taster text is displayed. At the end of it there is a READ MORE button. Click on this to show the rest of the article.

To delete the Read More feature

Find the position of the Read More - a dotted line on the screen

Highlight it

Press the Delete button on your keyboard

Pagination

It is sometimes useful to split a long article into shorter sections. This also creates a table of contents, with the entries being the Page Titles that you enter for each page. You do have to decide on how long each page is to be but there is an option to view the whole article in the index. So this can be a very useful thing to do for some articles.

Insert a page break

Open the article in the editor

Position the cursor where you want a page break

There is an icon at the bottom of the Editor part of the editing page

Click on the Pagebreak icon

A small dialogue box appears above the editor. The Page Title is likely to be the name of the heading or main content of the next part of the article. If you do not enter anything - this becomes the page number by default.

Enter the name of the page

Click Insert

To delete a page break

Find the break in the article - it is marked by a grey image across the article

Place the mouse cursor in the image

Press Delete on the keyboard

---

--Lorna Scammell December 2010