Joomla! 1.7 Editor Workshop

Date: December 15, 2011; 2pm
Location: Wright-Riemann Labs 231

Instructors for this workshop:

Jason Pappas
Unit Computing Manager
This email address is being protected from spambots. You need JavaScript enabled to view it.

Eddie Konczal
Unit Computing Manager, Douglass Campus
This email address is being protected from spambots. You need JavaScript enabled to view it.

Once you arrive:

Q: What is the SAS Content Management System?

A: The SAS Content Management System is a web-based system that allows you to update your department's web site without having to edit HTML or use web design software (such as Dreamweaver or Contribute). It is based on the Joomla! open source content management software. Visit www.joomla.org and help.joomla.org for more information on Joomla!

Before we start, let's look at: Joomla!: The Big Picture:

http://sandbox17.sas.rutgers.edu/component/docman/doc_download/128-joomla-the-big-picture?Itemid=34

In terms of content, the article is the basic building block of your Joomla! web site.  It can be thought of as an individual web page or unit of text.  An article can contain formatted text, images, embedded video, and links to other articles or external web sites.

Logging in to the Editor Interface:

HANDS ON: Everyone should log on to the Front-end Editor by clicking the "Login" link on the "Quick Links" menu on the home page.

Editing your first article:

As "authors" you can only edit articles over which you have authorship.  The EPS web site has been set up so that each of you are authors of your own faculty article.

Click on the People item on the Main Menu (at the top under the Rutgers banner). Then click on the category where your personal page appears (e.g. Faculty, Graduate Students, Staff, etc.).

Click on your name. You will see an edit icon to the far right: Edit

Click on the edit icon to open the "Editor" mode and modify your article.

At the top of the Editor page you will see the "Title" of your article.  Below this are two buttons, "Save" and "Cancel". 

Below Save and Cancel is the editing toolbar (sometimes called the WYSIWYG toolbar):

 

 The functionality of each icon is displayed as you hover the mouse cursor over it.

HANDS ON: Add or change some of the text within your article.  Then, experiment with the various buttons on the editor toobar to change the look of your article.

Note: hitting [Enter] at the end of a line will start a new paragraph; hitting [Shift]+[Enter] adds a line break.

Creating a link to your email address:

 Creating a link to your department's web site:

 Creating a link to another article:

Adding and Displaying Images

For this exercise, you will first need to download an image to your desktop.

Now that you have an image, you are ready to upload it and add it to your article:

  1. Go back to the browser window where your article is.
  2. Click the Edit icon (Edit) to the right of your article's title
  3. Click once within the text area to select the place where the image will appear
  4. Click the "Image" button below the text area
  5. Click on the "Stories" folder
  6. Click the folder name corresponding to your area (e.g. Faculty, Graduate Students, etc.). If a suitable folder does not exist, select the folder "temp".
  7. Click on your folder name.
  8. Click the "Browse" button at the bottom under "Upload files (Maximum Size: 10 MB)"
  9. When the "File Upload" window appears, click "Desktop" on the left
  10. Click on the filename of the image you downloaded to the desktop and click "Open"
  11. Click "Start Upload"
  12. Click once on your image
  13. Change "Align" to either "Left" or "Right"
  14. Enter a title for the image to the right of "
  15. Change "Caption" to "Yes,"  then click "Insert" in the upper right
  16. Your picture will appear in the article. The Caption will appear when the mouse cursor hovers over the image.

Resizing the image:

If the image you uploaded appears too large on the web site, you can easily resize it:

Adding Documents:

The DOCman component for Joomla! allows you to upload and link to documents on your web site.

For this exercise, you will first need to download a PDF file to your desktop.

Now you are ready to upload the document and link to it within your article.

Cleanup:

Q&A Session

Review:

Review today's agenda: http://geology.rutgers.edu/joomla-editor-workshop

Hands-on editing an article: http://docs.joomla.org/Hands-on_editing_an_article:_Joomla!_1.6