Chapter 6
[ 137 ]
7. Let's use the text editor tools to change the basic formang of the text. Select
the subheading Abstract Chaos. Click on the Format drop-down box and select
the pre-dened Heading 3 format as shown in the following screenshot:
In the previous screenshot, the Heading 3 format is applied to an arcle subheading. As the
main arcle tles in Joomla! usually have a Heading 2 format, the Heading 3 format is suited
for the next level (the subheadings within an arcle).
Want more formang control?
The font style of the heading is now set to the Heading 3 format. What
this actually looks like depends on the CSS stylesheet of the template
you're using. In the default Joomla! template we're using, the Heading
3 style is pre-formaed as a blue Arial font. When you install a dierent
template, your headings and all other CSS-dened layout can look
completely dierent. And if you really want to get creave and create
a mouthwatering arcle layout, you'll want to change the template CSS
styles yourself and adapt them to your needs. Don't worry, we'll get to
the ins and outs of templates and styling in Chapter 11.
8. Select the other subheadings and apply the Heading 3 style to those too.
9. Click on Save. To preview the arcle, click on the Preview buon in the toolbar
(that's not the Preview link in the top of the screen!). It looks like this:
Download at Wow! eBook
WWW.WOWEBOOK.COM
Creang Killer Content: Adding and Eding Arcles
[ 138 ]
10. Clicking on this buon displays a pop-up screen:
This preview screen gives you a rough impression of what the arcle will look like.
However, like the site preview link this buon doesn't take you to the frontend. The
quick preview comes in handy when you want to check an arcle that isn't visible
on the frontend (because it isn't published yet or because there is no menu link
poinng to it).

What just happened?
You've created a new arcle in the Ugly Painngs Facts category and formaed some text
using the word processor like interface of the text editor. While preparing your text, you can
set it to be invisible (unpublished); later on, you'll publish the nished text in one click.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Chapter 6
[ 139 ]
Have a go hero – change the formatting
Feel free to play around and explore the dierent text formang opons. Check out how
to apply indenng, bulleted lists, and so on. You may want to select the rst paragraph and
apply bold styling to really make it stand out as the leading paragraph. Applying styles to the
selected text works like you're used to in word processing soware.
Make sure to check out the HTML buon (just below the Paragraph drop-down menu).
Clicking on it opens up a pop-up screen showing the HTML code of the arcle text:
Download at Wow! eBook
WWW.WOWEBOOK.COM
Creang Killer Content: Adding and Eding Arcles
[ 140 ]
This can be parcularly useful if you know your way around HTML; somemes you might
want to directly edit the HTML code or check it for unwanted tags. You can close the HTML
editor window by clicking on Update (to apply changes) or Cancel.
Extending the text editor
Joomla! ships with the text editor you've just used. It's actually an extension
called Tiny MCE. If you would like to have some advanced text eding controls,
you can set Tiny MCE to its "Extended" view. Just navigate to Extensions | Plugin
Manager and click on Editor - TinyMCE 2.0 to edit the sengs.
In the Plugin Parameters secon, select Funconality: Extended. This will add
some useful buons to the editor screen, such as a "Paste from Word" buon
that lets you copy text from a Word document while automacally stripping all

Word formang that's not needed on a web page. The extended text editor
toolbar looks similar to the following screenshot:
If you sll nd Tiny MCE's capabilies too limited, you can easily replace it by
another (free) text editor. A very popular one is Joomla! Content Editor (JCE).
You'll read more about replacing the default text editor in Chapter 10.
Adding images to articles
You've just created an all-text page on painngs that's not really what makes your visually
oriented art loving visitors ck. Let's show them what it's all about and add some images!
Time for action – upload images
Imagine you've been sent some image les by mail and you've copied them to your hard
drive. To add them to an arcle, you'll rst use Joomla!'s Media Manager to upload the
image les to the web server.
1. Navigate to Site | Media Manager. The Media Manager will open the images
folder. However, arcle images are by default stored in a subfolder called stories.
Navigate to this folder by clicking on the stories folder icon.
2. In the Files secon, type the name of the new subfolder. In this example, we've
entered painngs. Click on the Create Folder buon.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Chapter 6
[ 141 ]
3. Click on the icon of the new painngs folder.
4. You'll be shown an empty folder. Add a new image by clicking on the Browse buon
below the Files secon.
5. In the Upload File pop-up screen, select an image from your computer's hard drive,
click on Open, and then click on Start Upload.
6. Repeat Steps 4 and 5 unl you've got about ve pictures. The Files secon of the
Media Manager now shows thumbnails of the uploaded pictures:
What just happened?
You've uploaded a set of pictures ready to be inserted into any arcle. By default, Joomla!

will look for images that you can insert into arcles in the /images/stories directory.
That's why you have to create subfolders in stories if you want to keep dierent groups of
images organized (for example, Painngs, Sta, and Meengs). This way, you won't end up
with all image les piled up in one big default image folder.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Creang Killer Content: Adding and Eding Arcles
[ 142 ]
If you'd like to use another folder as the default base directory, navigate to Site | Global
Conguraon | System. In the Media Sengs secon, change the Path to Image Folder.
For example, entering /images as the default path will make Joomla! look in this folder
when you insert arcle images.
When uploading image les, you'll have noced that Joomla!'s Media Manager
doesn't allow you to upload more than one le at a me. It has some more
limitaons; although you can add and delete les, you can't move them from
one folder to another. Because of this, many Joomla! users prefer to use an FTP
program to upload les and manage the media folders on the web server. There
are also many extensions available that enhance Joomla!'s image management
capabilies (such as the Joomla! Flash Uploader extension). The Joomla! Content
Editor (see Chapter 10) is a powerful replacement for the default text editor,
which also makes uploading and inserng images much easier.
Time for action – inserting and aligning images
Now, let's insert the images you've just uploaded into the arcle text:
1. Navigate to Content | Arcle Manager and open the arcle, Just What is Ugly Art?,
to edit it (by clicking on the arcle tle).
2. Let's place an image in each of the arcle paragraphs. Place the cursor at the
beginning of the rst paragraph below the introducon text, just aer the
rst subheading.
3. Click on the Image buon at the boom of the text editor screen:
4. A pop-up screen opens displaying the contents of the images root directory. In

the top le-hand corner of the pop-up screen, select the appropriate subdirectory:
painngs (another way to select this directory is by clicking on the painngs
folder icon).
Download at Wow! eBook
WWW.WOWEBOOK.COM
Chapter 6
[ 143 ]
5. Select the image you want to insert:
6. In the Image URL box, Joomla! automacally adds the appropriate URL. The other
details you can add or set yourself are as follows:
 In the Image Descripon box type a descripon. This text isn't
displayed, but it informs search engines what the picture is about.
It will also show up when the visitor uses a non-visual web browser.
 In the Title box enter a tle. This is shown only when the web vis-
itor hovers the mouse pointer on the image. Select the Capon
checkbox if you want to have Joomla! display the tle text as a
capon just below the image.
 In the Align drop-down box you can choose how the image will
be aligned: to the le, to the right, or centered. In the upcoming
screenshot, you can see the eects of right and le alignment
of pictures.
7. Place the cursor in another paragraph and repeat Steps 4 to 6. Do this unl every
paragraph of the arcle body text contains a picture.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Creang Killer Content: Adding and Eding Arcles
[ 144 ]
8. Click on Apply and then click on Preview to get a rst impression of the output.
In the pop-up screen, scroll down to see all of the images that have been inser-
ted. In the following example, some are aligned right relave to the text, some

are aligned le:
What just happened?
Adding pictures to arcles is a prey straighorward process. You upload the desired image
les and use the Image buon to tell Joomla! where you want them displayed.
Have a go hero – adjust the image settings
Aer you've inserted an image, you may want to adjust the display sengs. To create some
guer space between the images and the surrounding text, click on the Insert/edit image
icon (a picture of a tree) in the text editor toolbar.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Chapter 6
[ 145 ]
Now you can set a value for Vercal space or Horizontal space (in pixels). This will create
some whitespace around the image, making it stand apart from the arcle text. Click on
Update to apply the changes (yes, you're right; they'd beer label this buon Apply).
The Insert/edit image buon in the editor isn't really suited for inserng
images. Aer clicking on this buon, you can't browse to the image le,
but have to know its exact locaon (URL). That's why there's a separate
Image buon below the text editor screen that's beer equipped for
inserng images.
Changing the way the article displays
The arcle editor screen gives you much more power than just formang text and adding
pictures. You can also control how the arcle should be displayed: as one individual arcle,
split into two parts, or even split in as many parts (subpages), as you like. Let's nd out how
we can enhance arcles with these opons.
One lump or two? Split the article in an intro text and main text
So far, we haven't added any instrucons in our arcle to change the way it displays. Let's
have a look at the frontend to see how it's displayed by default. To see how our new arcle
looks at the frontend, on the frontend Main Menu, click on the Ugly Painngs link.
Download at Wow! eBook

WWW.WOWEBOOK.COM
Creang Killer Content: Adding and Eding Arcles
[ 146 ]
Remember, you created a link to the Ugly Painngs secon in Chapter 5. This menu link
(of the Secon Blog Layout type) displays an overview of anything you add to the given
secon or category. As you've now put some content in this secon, on clicking the Ugly
Painngs menu link you should now see the page shown in the following screenshot:
Oops! Here's the good news, the arcle is visible and it looks just like you've formaed
it. However, there's some bad news too. The full ve paragraph arcle shows up on the
Ugly Painngs secon overview page. This is not how we want our arcle to display, if we
were to add more arcles to this same secon, they would all be fully displayed on a huge
overview page. To get Joomla! to show just a short teaser text here, we'll now split the
arcle, separang the intro text and the full arcle body text.
Download at Wow! eBook
WWW.WOWEBOOK.COM