What is an article in Joomla?
Technically, an article consists of
- a title (headline) and an alias (in the url)
- the text (a mixture of text, images, and other media)
- a category where the article belongs to
- an author and an alias for the author
- access permissions
- a language the article is written in
- meta data for search engines and other robots
and a lot of options how, where, to whom and when the article is displayed. You already wrote an article in the last chapter and this was not complicated. Just a title is necessary, all the other fields have a default value or are optional. Let’s go through this list :)
It’s a little, but an important part.
- It needs to be crisp and short to attracts readers and it’s handy for you because the title appear in lists of articles on the website and as lists of articles in the control panel.
- the title appears as the page title on top of your browser window and it can contain the site name too. You can configure this behaviour in System → Global Settings → Site → SEO settings → Include Site Name in Page Titles
- it can appear in the URL of that page (I) and it’s up to you how to setup the URL System → Global Settings → Site → SEO settings
In Joomla, the text of your article contains a part that is displayed in lists (teaser) and the rest of the article. This rest can be structured by page breaks, so that a long text results in 10 pages each with a table of content. But step by step :) When you create an article you will do this with the help of an editor. Joomla uses a rich text editor (TinyMCE). That means, it is not necessary for you as the author to learn HTML tags. The editor looks like a text processor window on your PC (e.g. Word, LibreOffice) and it is easy to understand the icons (Figure 1).
Figure 1: Rich text editor
If you hover over an icon with your mouse, there appears a tooltip with the description of the function the editor performs when the icon is clicked on
It is possible to install different editors, for example the Joomla Content Editor and it is also possible not to use any editor. Joomla itself comes with two editors and you can configure the default editor in System → Global Configuration → Site → Default Editor.
The default settings allow your users to choose between the available editors by themselves in their user account. You can disable this feature in Users → Users Manager → Options → Frontend User Parameters.
Paste from Word
The worst case of editing happens, when people paste from programs like Microsoft Word. Even if the situation gets better there is still NO REAL WAY to get the same formats on a website that is based on HTML by pasting from a text processor like Microsoft Word that is based on binary formats or complicated XML. The editor offers a “Clean up messy code” icon but it will not clean up logical errors or differences in the markup. Keep that in mind when you talk to your users :)
At the bottom of the editor window you’ll find a button called images. It offers a dialog to choose existing images from your inbuilt joomla image library and it allows you to add images to this library by uploading them.
- You can manage your library under Content → Media Manager
- You can upload more than one file by enabling the flash uploader (Content → Media Manager → Options → Enable Flash Uploader)
- Remember that images that you publish are visually resized if Protostar or some other template based on Twitter Bootstrap is active. The size of the files is not reduced. This means you have to take care of pictures taken by cameras otherwise they will destroy the layout of the page they appear on or increase its loading time. Although, there are certain Joomla extensions intended to change size and dimensions of uploaded images automatically, the best way in my opinion is to resize and optimize them with the help of a graphics editor.
After you have inserted an image from the library, you can configure (add attributes to) that image by clicking the image icon on top of the rich text editor (Figure 2)
References to other articles
The button Article at the bottom of the editor window allows to link from an article to another article which is quite useful.
Articles will appear in lists and on an article details page. On lists, the text should be limited to avoid confusion. With the help of the Read More button below the editor you limit the article text. Set the cursor in your text where the Read More break should appear and click the Read More button (Figure 3)
Figure 3: Read more link
Embed a YouTube video
This is not only about YouTube videos but it is a good example for text filters. If you try to embed a YouTube video with the typical code
<iframe width="560" height="315" src="http://www.youtube.com/embed/rX372ZwXOEM" frameborder="0" allowfullscreen></iframe>
you notice that it is filtered by the editor and by Joomla. This is not a bug! It’s a feature :) For security reasons
- Joomla uses-so called text filters (System → Global Configuration → Text Filters) to filter the following tags: <applet>, <body>, <bgsound>, <base>, <basefont>, <embed>, <frame>, <frameset>, <head>, <html>, <id>, <iframe>, <ilayer>, <layer>, <link>, <meta>, <name>, <object>, <script>, <style>, <title>, and <xml>.
- TinyMCE filters some tags too: <applet>, <object> and <iframe>
Unfortunately, we need to insert an <iframe> tag to embed videos from YouTube. So, how can the problem be solved? One solution could be to trust your authors and create a custom blacklist (System → Global Configuration → Text Filters) for the authors group (Figure 4) and then tell TinyMCE the <iframe> is not evil anymore (Extensions → Plug-in Manager → Editor-TinyMCE → Edit → Basic Options → Prohibited Elements) by deleting the word iframe in the prohibited elements.
Figure 4: Custom Black List for the author group
After you have changed these filter mechanisms, it is possible to copy and paste the embed code into your article. Keep in mind that you need to switch the editor to the HTML view by clicking the HTML icon. Afterwards, a popup window with the HTML code of the article appears. Now paste the embed code where the video should appear (Figure 5).
Figure 5: Inserting the iframe code into the article
Click the update button and you already can see the video inside the editor window. After saving the article the video will appear on your website (Figure 6).
Figure 6: Inserting the iframe code into the article
Now you can embed code from several platforms like Twitter, Facebook and Flickr.
Using macros in a text
It is possible to use so called macros in your text. A macro is an expression or command that is replaced with something different (e.g the embed code of your YouTube video). Theoretically, we could write in our article text (not in the HTML) something like this
[youtube = http://www.youtube.com/watch?v=rX372ZwXOEM]
and some magic could replace this with the appropriate embed code
<iframe width="560" height="315" src="/http://www.youtube.com/embed/rX372ZwXOEM" frameborder="0" allowfullscreen></iframe>
The only problem is that this transformation is not a part of the Joomla core package. If you want to use macros, you need to install additional extensions, mostly so called plug ins.
Content in a module?
When we created an article, we used the content component of Joomla. Another possibility to create content can be a module. A module is a content element that can be positioned on your website. A menu, for example, needs a module to be displayed. The Login box is also a module. You can create as many modules with predefined functions as you need and position them in the predefined area in the template. Joomla comes with 24 pre-installed modules. You can see them with descriptions under Extensions → Module Manager → New (Figure 7).
Figure 7: Available Modules
It is possible to create a module that contains HTML text like an article (Custom HTML module). And it is also possible to upload e.g. a background image for each module and to publish the module time based. It is not intended that custom HTML content in modules is created by “normal” authors. Content creation in modules is more a “Manager” or “Administrator” task.
Try out the Custom HTML module. Create one, add some content and choose a position (Figure 8).
Figure 8: Custom HTML module in control panel
You can use the rich text editor and all the features that are available to write, format and enhance article text. You can even configure on which page the module should appear (tab Menu Assignment) and when it should appear (time based publishing). After saving, your custom HTML module appears on your site (Figure 9).
Figure 9: Custom HTML module on website
If more than one module is located at the same position it is necessary to bring them into the desired order. Just drag the modules in the module manager to the desired place (Figure 10).
Figure 10: Sorting of modules