Uncategorised

Test as Super User

Try to link to article within people category - Link Browser > this works

Try to link to article within people category - Article button: Staff > this works

Test as administrator

Try to link to article within people category - Link Browser > redirects to home page!

Try to link to article within people category - Article button: Carl C. Swisher III > redirects to home page!

Test 2 as admin (conflicting JCE profile membership for admins has been removed)

Try to link to article within people category - Link Browser > redirects to home page!

Try to link to article within people category - Article button: Carl C. Swisher III > redirects to home page!

Test 3 as admin (now using standardized JCE profile membership for admins has been removed)

Try to link to article within people category - Link Browser

Try to link to article within people category - Article button: Carl C. Swisher III

Test 4 as admin (after creating hidden menu item for people)

Try to link to article within people category - Link Browser

Try to link to article within people category - Article button: Carl C. Swisher III

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". 

  • "Save" will save any changes you make to your article.
  • "Cancel" closes the article and discards any changes
  • It is important to close the editor mode using one of these two buttons.  Do not exit by closing your browser or clicking the "Back" button in your browser.  Otherwise, your article will become locked and an administrator will have to unlock it.

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.

  • First row: Help, New Document, Undo, Redo, Bold, Italics, Underline, Strikethrough, Alignment buttons, formats, styles
  • Second row: Cut, Copy, Paste, Find, Find/Replace, Indent, Outdent, Ordered List, Unordered list, remove formatting, Cleanup HTML, Custom Character, Horizontal line, Subscript, Superscript, Change Case, Insert non-breaking space,Visual Control characters on/off
  • Third row: Toggle fullscreen mode, Preview, Print, Toggle Guidelines/Invisible elements, Edit CSS styles, Citation, Abbreviation, Acronym, Deletion, Insertion, Insert/Edit Attributes, Insert/Edit Anchor, Unlink, Insert/Edit Link, Insert/Edit Image, Toggle Spellchecker, Insert Read More, Insert/Edit Page Break

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:

  • Type your name somewhere in the article.
  • Highlight your name and click the "Insert/Edit Link icon": inserteditlink
  • Click on the "E-mail" icon to the far right of the URL field; it looks like an envelope with a green plus: create email
  • In the "Create Email Address" window, enter your email address in the "To:" field.
  • Click OK, then click Insert.

 Creating a link to your department's web site:

  • Enter your department's name in the text box
  • Highlight your department's name and click the "Insert/Edit Link icon": inserteditlink
  • Enter your web site URL in the URL field - must start with "http://"
  • Click Insert, then click Save

 Creating a link to another article:

  • Click the edit icon to the right of your name.

  • Enter the following text in your article: "About the Department"

  • Highlight the text: ""About the Department"

  • Click the "Insert/Edit" Link button: inserteditlink
  • Under "Link Browser," click on "Content"
  • Under "Content" click on "Uncategorised"
  • Under "Uncategorised," click once on the item named "About EPS / about-eps"
  • Click Insert.
  • Click the "Save" button under the article title.
  • In your article, you can follow the link you just created to the "About EPS" article.

Adding and Displaying Images

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

  • Launch a new browser window by typing [Ctrl]+N
  • Go to your department's web site, or to any site where you can download an image (when adding images to your web page, make sure you have permissions to use the image).
  • Download a picture by right-clicking on it and selecting "Save Image As..." or "Save Picture As...", then select "Desktop" on left, then click Save.

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:

  • Highlight your image
  • Click "Insert/Edit image" (located to the right of '"Insert/Edit Link") to open the Image Manager window: inserteditimage
  • Note the dimensions (width x height) listed under "Details" to the lower right of the Image Manager window.
  • To the upper left, after "Dimensions", enter a smaller pixel value than the current width in the first field (width value)
  • Leave the second field blank and "Proportional" checked; Joomla! will adjust the height accordingly
  • Click "Update," then click "Yes" to Confirm
  • The image will be adjusted to the pixel width you entered.
  • Click Save.
  • Your image will be resized accordingly.

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.

  • Launch a new browser window by typing [Ctrl]+N
  • Go to http://sandbox17.sas.rutgers.edu and click on Departmental Services Downloads
  • Click on Adobe PDF Documents
  • Under "Joomla!: The Big Picture" click "Download"
  • Click "Save File," then click "OK."
  • Click "Desktop" on the left
  • Click "Save"
  • Close the new browser window.
  • Right-click on the file on your desktop and select "Rename"
  • Change the name of the file to [yourname].pdf

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

  • Go back to the browser window where your article is.
  • Click the edit icon (Edit) to the right of your name.
  • Click within your article where you want your document link to appear.
  • Type the text "My PDF File"
  • Highlight the text "My PDF File" and click the "Insert/Edit Link" icon: inserteditlink
  • Click on the "Browse" icon to the right of the URL field (it looks like a document with a green plus to the lower right): browse
  • In the "File Browser" pop-up window, click "Stories" under "Folders" on the left
  • Under "Stories," click the folder name corresponding to your position (e.g. Faculty, Graduate Students, etc.). If a suitable folder does not exist, select the folder "temp".
  • Click on your folder name.
  • Click on the "Upload" button to the far right (it looks like a page with a blue arrow pointing upward): upload
  • Drag and drop the [yourname].pdf file from your desktop to the "Drop files here" pop-up window.
    • Alternately, you can click the Browse button in the "Upload" pop-up window and browse to your desktop to select the PDF file.
  • Click the "Upload" button at the bottom to upload your PDF file and return to the File Browser window.
  • Click the "Upload" button at the bottom.
  • Click on the name of the file you just uploaded in the "File Browser" pop-up window.
  • Click "Insert" to the lower right.
  • Click "Insert" again.
  • A link to the document will appear in your article.
  • Click the Save button below your article title.

Cleanup:

  • Click the edit icon (Edit) to the right of your name.
  • Delete any text, links, and images that you do not want to remain in your article.
  • Click the Save button below your article title.

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

You are here: Home Home Page Uncategorised