1.4 Joomla Site Content

 In Parts 1, 2 and 3 of our series on building a Joomla website, we installed Joomla and created the category folders and the Main Menu for our website. In Part 4, we will add a Welcome article. Before we write our Welcome article, we will make the JCE Editor (which we installed earlier) our default editor. This will give use much more control over the appearance and placement of our images.

Set JCE as the Default Editor
To make sure JCE is set for the default editor, you will need to change the settings in both the User Manager and under Global Configurations. First, go to Users, then User Manager. Then set the Editor for you as JCE:

11

Then SAVE and CLOSE this screen. Next go to the Site, Global Configurations, and set the Default Editor as JCE:

12

Configure the JCE Editor
There are many settings which can simplify the JCE Editor and make it more useful for creating articles. You can configure the JCE Editor by going to Components, then JCE Administration Control Panel. The Control Panel has four tabs. But we will only adjust one: Editor Profiles.

Editor Profiles Tab
Clicking on the Editor Profiles Tab shows that there are three editor profiles included by default with the JCE editor. Only one, called Default is active:

JCE allows you to have different editors for different groups and for different areas on your website. This is useful if folks will be posting articles and comments to the front end of your website and you would like to give them a simpler editor to use. This is important because the default editor has a lot of buttons which may confuse your readers.

To change the settings on the Default editor, select it and click on Edit to bring up the Edit Profile Screen for the Default Profile.

There are four tabs in the Edit Profile screen: Setup, Features, Editor Parameters and Plugin Parameters. Click on the Features TAB.

Scroll Down to the section called Current Editor Layout. The JCE Editor Default Settings comes with quite a few buttons. Many of these tend to confuse people. Thankfully, you can remove these buttons from the Editor making it quicker to find the buttons you actually will need. To remove buttons, simply drag them from the Current Layout down to the Available Buttons. Then click Save.

Then click on Plugin Parameters. Then click on Image Manager. Scroll down to Alignment and set the default alignment for all images to Center.

Then click on Links and scroll up. Set the Target for new links to be Open in a New Window. Then click Save and Close. Now that we have our Editor set up, we are ready to create and post our Welcome Article. 

 Create and Post Your Welcome Article

The Welcome article is an article that appears near the top of your Home page and explains why visitors would benefit from reading your website. It is the first article you should post on your website. But the steps for creating this article are the same as the steps for creating any other article on a Joomla website.

7 Steps for Writing and Posting Joomla Articles with Images

There are 7 steps for writing and posting a Joomla article. These seven steps are done every time you want to add a new article or a new page to your website.

 

#1  Write Your Article as a Libre Writer document
Writer documents are much more secure than MS Word documents (because MS Word documents can have hidden back doors used by hackers to attack both your computer and your website). Libre Office is free to download and use – and is actually much easier to use than MS Word. Libre Office comes automatically with Linux computers. And it can be downloaded for free on Windows computers by going to the following link:

https://www.libreoffice.org/download/download/

I have written detailed instructions on how to use Libre Writer on the following two websites: https://betterwordprocessing.com/

https://learnlinuxandlibreoffice.org/

#2 Use Libre Writer Compress to Optimize the File Size of Every Image in your Article
Like all your other articles and web pages, your Welcome article will consist of a combination of text and images. If the size of any image exceeds a file size exceeds 100 KB, then right click on the image and click Compress to reduce the image and/or file size. Remember that half of your readers will be visually oriented and spend more time looking at images than reading text. So be sure to seek out or create several interesting images for your Welcome article.

#3 Create a Text Only version of your Article

To create this Web version, copy the article and save it AGAIN in the same folder as a new and separate file. Thus, you will have TWO versions of each article. The original version with optimized images can be called 0 Welcome to our Website. The number 0 placed before the file name insures that the document will be shown at the top of its folder in your File Manager. The new version that will have the images removed to become a Text only document can be called w0 Welcome to our Website. The lower case letter w simply means that it is the web version of the article.

Before you start transferring images from the Text only version of your Welcome article, you should make a new folder in the images folder in your File Manager to put these Welcome article images in. The folder can be named 0-welcome.

Then start at the top of the web version of your Welcome article and move the images one by one to the 0-welcome images folder by right clicking on an image and clicking on SAVE. This will bring up your file manager. Navigate to your 0-welcome images folder and save the first image as w01. After you have saved the image, delete the first image and replace it with the text w01. Then repeat this process for all remaining images.

When you are done replacing all of the images with text placeholders, the web version should consists only of text – with placeholders such as w01, w02, indicating where the images should be inserted back in to the text after the text-only version has been pasted into your Joomla New Article Edit screen.

#4 Add Images to the Images folder in the Media Manager
Before your Welcome article images can be added back to your Welcome article, they first need to be loaded to the Joomla media manager. So log into your Joomla control panel and click on Content, Media. Then click on CREATE NEW FOLDER. Name the folder 0-welcome. Then click CREATE FOLDER.

Then click on the 0-welcome folder to open it. It is important to open the correct folder before you upload images. If you don’t, the images will wind up in the top folder with no way to move them to another folder other than to delete them and try again.

There are no images in this 0-welcome folder. To add images to this folder, click on the green icon called Upload. This screen will allow you to add up to 20 images at a time. Click on BROWSE. This will open the File Manager on your computer.  Navigate to the 0-welcome images folder which should be in the images folder in your website folder. Click on the first image w01 to select it. Then hold down the Shift key on your key board and click on up to 19 more images to also select them. This would be images w01 to w20.

When all of the images for this folder have been added (or the first 20 if there are more than 20 images), click on START UPLOAD. Repeat this process until all of the images for your Welcome article have been uploaded. Once you have loaded your images for your Welcome article, you are ready to add the Welcome Article to your website. 

#5: Post Text Only Version of Article with the Article Manager
Click on Content, Articles, New to bring up the New Article Edit screen.  Give your article a Title, such as Welcome to our Website! For Category, leave the Welcome article as Uncategorized. For Featured Article, change the setting from No to YES. This will place the Welcome Article on the Front Page of your website – meaning visitors can see it without clicking on a Menu Item.

Then copy and paste the text from the w0 Welcome to our Website document into the Editor workspace with the JCE Editor. Put your cursor in this Joomla Article Window and right click on Paste. This brings up the JCE Editor Paste window. Put your cursor in this window and press Control +V on your home computer keyboard. This will paste the text into the Window. Then click on INSERT to paste the text into the workspace.

#6 Save the Text Only Version of your Article.
After the text is in, but before adding images, it is a good idea to click SAVE. This is because only a limited about of information can be transmitted to the server with any given request. Now that we have posted our article into the Article Manager, it is time to insert the images back in.

#7 Re-insert Images into Web Article
Finally, reinsert the images back into the workspace one by one. Before we transfer the W01 image back to our web article, we need to first delete the placeholder text W01, leaving our cursor where this image placeholder was. See the red circle below.

09

Click on the IMAGE icon in the JCE editor. It is the blue button with a picture on it. This brings up the images folder in your Media Manager. Click on folders to open them. Find the 0-welcome images folder and open it. Click on the w01 Image you to insert to select it. Our Welcome Article has four images. Select the first one (W01). Then click Insert.

This will place the image in the correct place inside the article. If your web browser is giving you trouble by putting the image somewhere it does not belong, try switching to a different web browser. Repeat this process of pasting in the text only version and then adding back images for every article.

TIP: Only add 10 images at a time. If you have more than 10 images, add 10 then click on the SAVE button, then add 10 more.

Then save and close your new article. Then visit your new Welcome article on the Home page of your website to make sure it appears OK.

10r

 

Set JCE as the Default Editor
To make sure JCE is set for the default editor, you will need to change the settings in both the User Manager and under Global Configurations. First, go to Users, then User Manager. Then set the Editor for you as JCE:

18

Then SAVE and CLOSE this screen. Next go to the Site, Global Configurations, and set the Default Editor as JCE:

19

Configure the JCE Editor
There are many settings which can simplify the JCE Editor and make it more useful for creating articles. You can configure the JCE Editor by going to Components, then JCE Administration Control Panel. The Control Panel has four tabs. But we will only adjust one: Editor Profiles.

Editor Profiles Tab
Clicking on the Editor Profiles Tab shows that there are three editor profiles included by default with the JCE editor. Only one, called Default is active:

JCE allows you to have different editors for different groups and for different areas on your website. This is useful if folks will be posting articles and comments to the front end of your website and you would like to give them a simpler editor to use. This is important because the default editor has a lot of buttons which may confuse your readers.

To change the settings on the Default editor, select it and click on Edit to bring up the Edit Profile Screen for the Default Profile.

There are four tabs in the Edit Profile screen: Setup, Features, Editor Parameters and Plugin Parameters. Click on the Features TAB.

Scroll Down to the section called Current Editor Layout. The JCE Editor Default Settings comes with quite a few buttons. Many of these tend to confuse people. Thankfully, you can remove these buttons from the Editor making it quicker to find the buttons you actually will need. To remove buttons, simply drag them from the Current Layout down to the Available Buttons.


Congratulations! You have finished building the basic structure of your Joomla website!

What’s Next?
Now that we have built the foundation of our business website, we are ready to configure Phoca Cart. That is the topic of our next article.