Joomla 4.x

Alternative text ("alt txt") provides the textual equivalent of an image to the web page. The description you write should be short and concise, but accurately describe the image content. Implementing alternative text allows screen readers to describe an image that would otherwise be skipped over to those with visual or other cognitive impairments. For this reason it is required that all images must implement proper alternative text.

To add alternative text to an image follow this procedure:

1. Find the article containing the image that needs "alt txt" and click on its title.
2. Click once on the image inside the article's Content area, then click the Insert image button in the WYSIWYG editor:
   
   
   
   
3. Enter a short description of the image in the "Alternate Text" field (see #1 below):
   
   
   
   
4. Click Update to the lower right of the "Image Manager" window (see #2 above)
5. Save the article. It is okay that you do not see the alternative text; it will only show up if disable images in your browser.

Page: https://sas.rutgers.edu/alumni

The Alumni section of the site is dedicated for our School of Arts and Sciences Alumni. It includes upcoming events for Alumni and the Scarlet Speakers Series of events. The main page includes important links that can be found as you scroll down the page.

• Upcoming Events
• Scarlet Speakers Series
• Rutgers Alumni Association for the School of Arts and Sciences
• Rutgers University Alumni Association
• Career Success
• Office of Alumni Contacts
• Rutgers Today
• Alumni Stories

It is possible to store, restore and compare changes that you have made in an article using Joomla!'s "Versions" feature.  Prior to using Versions, this functionality must be enabled.  If you do not see the Versions button when editing an article, please create a REQUEST and we can turn it on for you.

Once Versions are turned on, Joomla! does not automatically save versions.  You need to click the Save button before editing your article to create a version of the article that can be restored.  Every time you click Save, a new version will be saved (up to a maximum number, which is set at 10 by default).

Finding the Versions button

Joomla! Administrator (back end)

The Versions button is in the row of buttons above the article editor:

Joomla! Front End Editor

The Versions button is below the article editing area:

Restoring an article version

1. When editing an article, click the Versions button (see above for the location of the button)
2. Click the check box corresponding to the date and time that the version of the article you want to restore was saved (see #1 below)
3. Click the Restore button, which should be the first button in the row of buttons at the top of the "Versions" popup window (see #2 below):
   
   
4. The article will be restored to the version you selected.

Comparing article versions

1. When editing an article, click the Versions button.
2. Click the check boxes for the article versions you would like to compare (see #1 below)
3. Click the Compare button (see #2 below):
   
   
4. A "Compare View" popup window will appear, showing you the differences between the versions:
   
   

Setting a version to be kept forever

 If there is a version of an article that you want to save forever, you can do the following:

1. When editing an article, click the Versions button.
2. Click the check boxes for the article version you would like to keep forever (see #1 below)
3. Click the Keep On/Off button (see #2 below):
   
   
   
   
   
4. The "No" in the "Keep Forever" column will change to "Yes".

Overview

By default, Joomla! assigns a new module to all pages, which may not always be appropriate.  This procedure explains how to restrict the display of a module to one or more menu items using the Administrator interface.  The module will only appear when the selected menu items are accessed. 

Assigning the Module to specific menu items

1. In the Joomla! back-end (Control Panel), navigate to Extensions > Site Modules
2. Click the title of the module
3. Click the "Menu Assignment" tab
4. Click the dropdown box to the right of Module Assignment and select "Only on the pages selected" (see #1 below).
5. For Menu Selection, click None to the right of "Assign to Menu Items" (see #2 below).
6. Click the check boxes for any menu items that should display the module when clicked (see #3 below).

Saving the Module

• To save changes and continue editing the module, click the Savebutton to the upper left of the web page. 
• When you are done editing the module, click "Save & Close" to the upper left to save your new module. 

Overview

It is helpful to use banners / sliders on the top of main landing pages of the websites to add some color and nice formatting to the overall view of the site.

What is a landing page?

A landing page is a page that does not have a left sidebar.  This can be the home page of a site, or another page that does not need any left side menus and the content is all focused on that page.

Sample Landing Page

Both of these samples do not have left side bars.  A single image can be used, or you can create a slider with smart slider 3.  If you want text to be displayed, use a 'plain image' and use smartlslider 3 to layer the text over the image.

Example with text overlay:

Link to Sample page with Text Overlay

Example with a static image:

Link to Sample page with Static Image

Sample Interior Page

An interior page is a page that has a left sidebar on the website.  For this type of page it is better to use an image that is 2x1 ration (800 x 400), and is displayed in the 'content' section of the page.  This will make it easier for the user to access the content and the left sidebar that is displayed.

Example with image ABOVE the title:

This example uses a Custom Module to display the image.  Using a module is a little more work, especially if each page you want to use a different image, that means that multiple modules need to be created.  It is also a little more difficult to edit when the image needs to be changed.

Link to Sample Page with MODULE Image

Example with image BELOW the title:

To add an image BELOW the title, it is an image that is added within the content of the article.  This image can be around 800 x 400.  When adding the image, it is best to set the width = 100%, this way it will be responsive and fill the space properly.  This is very easy to edit for each page.

Link to Sample Page with Image in Content

The procedure explains how to edit articles from the back-end administrator interface in Joomla! 3.x

1. Log on to your site using the Administrator Login URL for your web site.
2. Find the article you wish to edit.
3. Click the title of the article to edit it:


4. Modify the text in the text area (see #1 below) under the formatting (WYSIWYG) toolbars as required.
5. Use the icons on the formatting toolbars (see #2 below) to format your text.  The function of each button on the toolbar will be displayed as you position the mouse cursor over it.  You can also find a guide to the functionality of all the editing buttons here.

6. When copying and pasting text from other applications, use either the Paste clipboard or the Paste as Plain Text clipboard.
7. When you're done editing your article, save it by clicking the Save & Closebutton to the upper left (see #3 above).
8. To cancel any changes you have made and close the article, click the Closebutton (see #4 above).

The procedure explains how to edit articles using the Editor interface in Joomla!

1. Log on to your site using the Editor Login URL for your web site.
2. Browse to the article you wish to edit.
3. Click the Edit icon or link to edit your article:
4. Modify the text in the text area (see #1 below) under the formatting (WYSIWYG) toolbars as required.
5. Use the icons on the formatting toolbars (see #2 below) to format your text.  The function of each button on the toolbar will be displayed as you position the mouse cursor over it.  You can also find a guide to the functionality of all the editing buttons here.

6. When copying and pasting text from other applications, use either the Paste clipboard or the Paste as Plain Text clipboard.
7. When you're done editing your article, save it by clicking the Savebutton to the upper right (see #3 above).
8. To cancel any changes you have made and close the article, click the Cancel button (see #4 above).

Instructions on how to change the category of an article through the Joomla adminstrator back-end:

1. Log in to the Administrator back-end.

2. Locate Article by clicking on Content then Articles.

3. Click on the title of the article you wish to edit.

4. On the right of the page you will see the article's category. To change the article, click on the Category dropdown menu to the right of the text areat. Select the most appropriate category. If there is no appropriate category, you can close the article, create your category, and then return to edit the article.

5. Once you are satisfied with your updates, click on Save to save your changes and continue editing the article, or Save & Close to save the article and close the article editing page.

Overview

Rutgers School of Arts and Sciences websites created by SAS IT ensure that our school websites meet all federal, university, and school policies and regulations such as those set by the Americans With Disability Act and all others that set usability requirements and security standards. It provides a coherent standardization of look, navigation, and technological functions with flexibility to meet the needs of the unit, school, and the unit’s various constituents.

In order to serve our students well, the departmental websites include a standardized section for undergraduate education information. The goal of the undergraduate website navigation is to allow students and academic advisors to move between department websites with ease, knowing where they will find the information they need.

The Office of Communications and Undergraduate Education are available to help you develop new content and images for the website. If you need assistance, please contact:

Susan Lawrence, Vice Dean for Undergraduate Education,
Kareem Mumford, Associate Dean of Communications,

SAS Undergraduate Rubric

This document will help develop an undergraduate section for degree-granting program websites.  For quick reference, see the list under "Undergraduate Menu" below.

• RU_SAS_Undergrad Web pages for Department Website.docx

Undergraduate Menu

Mandatory pages for undergraduate sections of SAS websites:

• About Us or Why (major or department title)?
  Departments should choose one of these titles for their undergraduate program landing page.
• Prospective Students
  This page should include information for prospective majors and minors. We recommend identifying program alumni or current students to feature on this page. You can send alumni and students a questionnaire (see Prospective Students Questionnaires below).
• Learning Goals
• Major(s)
  This is mandatory only if the department/program offers a minor.
• Minor(s)
  This is mandatory only if the department/program offers a minor.
• Certificates
  This is mandatory only if the department/program offers a certificate(s).
• Course Schedule
  We provide a utility (RU Course List module) that automatically pulls course information from the Rutgers Schedule of Classes.
• Course Synopses (preferred) OR Syllabi
  Individual synopses or syllabi should be listed for each course to give prospective students an idea of what to expect. 
  • Enhanced course description pages (or "synopses") are preferred. They should be more detailed than generic catalog descriptions. For an example, see the sample Courses Description/Synopses page.
  • Any syllabus files posted to the website should include a note to convey they are samples only and not the official course syllabus. Students enrolled in a course should refer to the official syllabus which is located in the course LMS (Canvas or Sakai).
• Advising
  Indicate how students can get advising in your department.

Optional pages for undergraduate sections of SAS websites:

• Honors
• Transfer Students
  Include any special information about policies on accepting winter and summer courses taken elsewhere.
• Nontraditional Students
• Careers
• Any additional menu items would follow "Careers"

Prospective Students Questionnaires

This page should include information for prospective Rutgers students and majors and minors. We recommend identifying program alumni or current students to feature on this page. You can send alumni and students a questionnaire. There are four sections to this page: the student and young alum feature; the benefits of choosing this field of study; featured student/alum, usually a story from SAS Communications; and three to four fun bullet points about the field. See content sheet and Prospective Students Questionnaires below.

• Prospective_Student_Page_Content.pdf
• Alumni: Department Website Prospective Student Page ALUM Profiles.docx
• Current students: Department Website Prospective Student Page STUDENT Profiles.docx

This document explains how to clear the Joomla! cache on web sites that have caching enabled.  On these sites, it is necessary to clear the cache before the latest edits to the site can be seen.

1. Log on to your site using the Administrator Login.
2. Select Clear Cache from the System menu:
   
   
3. Click the Delete All button at the top:
   
4. All items will be cleared from the Cache Group listing, and the latest changes to the web site should now be visible.
5. Log out from the Administrator Login by clicking the User Menu dropdown in the upper right corner of the Administrator page (see Step 1 below), then clicking Log out(see Step 2 below):
   

Configure a Category Blog menu item to display articles in Article Order:

1. Log on to your site using the Administrator Login.
2. Go to Menus > Main Menu (or whichever menu you created the menu item in).
   
3. Click on the title of the Category Blog menu item to be reconfigured.
4. Click the Blog Layout tab (see #1 below).
5. Change Article Order to "Article Order" (see #2 below).
   
   
6. Click Save & Close to the upper left. 

Configure a Category List menu item to display articles in Article Order:

1. Log on to your site using the Administrator Login.
2. Go to Menus > Main Menu (or whichever menu you created the menu item in).
   
3. Click on the title of the Category List menu item to be reconfigured.
4. Click the List Layouts tab (see #1 below).
5. Change Article Order to "Article Order" (see #2 below).
   
   
6. Click Save & Close to the upper left. 

Page: https://sas.rutgers.edu/contact-us

This page includes all contact information for the General Dean’s office as well as sections for Students, Administration and Staff links, General buttons for Rutgers and Transportation details.

This procedure describes how to create a new article as a copy of an existing article.  This is especially useful when you would like to preserve the formatting of the original article.

1. Log in to the Administrator back-end.
2. Locate the article to be copied by clicking on Content then Articles.
3. Find the article you want to copy, then click on its title.
4. Click "Save as Copy" from the "Save & Close" dropdown menu at the top (see #1 below).
5. Change the title of the article (see #2 below).
6. Delete the existing Alias; a new one will be generated from the new title (see #3 below).
7. Edit the article text as needed (see #4 below).
8. Change the status on the right to "Published" (see #5 below).
9. Click "Save & Close" at the top (see #6 below).

Overview

The procedure explains how to copy and paste table data from Excel into an Article using the Joomla! Administrator interface (Joomla! 3.x). If you're copying text from a document or another website it may retain the styles applied to it. This could create formatting issues within the new article. These instructions show you how to copy and paste the content as plain text as well as clear any pre-existing formatting.

Paste without Microsoft Formatting

If you paste content directly from Microsoft Excel, it can cause formatting issues ranging from barely noticeable, to your entire page not displaying at all!  To safely paste from Excel you must:

• Copy only the rows and columns from the Excel file that are needed in the Joomla page.
• Click somewhere inside the text box of your article to select a place where the text will be pasted.
• In the Article : Edit Article window, click the first Clipboard icon on the editing toolbar - see below. (On older versions of the editor, there will be a single clipboard with a drop-down menu; select the first option, "Paste," from the dropdown menu).
  
  
• Type "Ctrl+V" to paste the text into the Paste popup window (see #1 below).
• The text will be pasted, but without Excel formatting that can hinder the display of the article.
• Click Insert in the lower right corner (see #2 below):
  
  
• To save your changes and continue editing the article, click the Save button to the upper left. 
• When you are done editing the article, click the Save & Close button to the upper left. 

Table Formatting

Next you may want to add some styling so that the table resizes on small screens.  To do this, follow instructions for "Tables: Creating and Modifying" starting at the "Make a table Responsive"step.

If you paste content directly from Microsoft Word, it can cause formatting issues ranging from barely noticeable, to your entire page not displaying at all! However, it is possible to copy safely from Microsoft Word. It will save you time versus pasting it into Notepad (or somewhere else) to strip all of that formatting away before placing it in Joomla!.

Paste as Plain Text

Before you start, you can either create an article from the front end or the back end, or find an existing article to edit from the front end or the back end.

1. Copy the text from Word

2. To copy and paste text only, without any formatting, right click in the text box, then click the Paste as Plain Textbutton:

3. Type "Ctrl+V" to paste the text into the Paste As Plain Text popup window (see #1 below) and then click Insert in the lower right corner (see #2 below):

4. Your text will be pasted into the article without any formatting. 

5. To save your changes and continue editing the article, click the Save button to the upper left.

6. When you are done editing the article, click the Save & Close button to the upper left.

Paste with formatting

• Copy the text from Word.
• Click somewhere inside the text box of your article to select a place where the Word text will be pasted.
• In the Article : Edit Article window, click the first Clipboard icon on the editing toolbar - see #1 below. (On older versions of the editor, there will be a single clipboard with a dropdown menu; select the first option, "Paste," from the dropdown menu).
  
  
• Type "Ctrl+V" to paste the text into the Paste popup window (see #1 below).
• The text will be pasted, but without Word formatting that can mess up your article.
• Click Insert in the lower right corner (see #2 below):
  
  
• To save your changes and continue editing the article, click the Save button to the upper left.
• When you are done editing the article, click the Save & Close button to the upper left.

How to Get Started on YouTube

PDF

1. Create Your Channel
   1. Have on hand the following to create the channel:
      1. A name for your channel which must include the word “Rutgers” written out fully (not RU) for example “Rutgers Department Name”
      2. A jpg image to be the banner image which goes across the top of your channel page. From google: “Your banner image must meet the following criteria: Minimum dimension for upload: 2560 x 1440 px with an aspect ratio of 16:9. At the minimum dimension, the safe area for text and logos: 1235 x 338 px. Larger images may get cropped on certain views or devices.” (See: "Manage your channel branding" )
      3. A short description of your image
      4. A Gmail account: we recommend a task account such as departmentyoutube@gmail. Save this information so it can be accessed by other administrators.
      5. A jpg image for your profile picture. The square welcome image from the homepage of your website is a good option.
   2. Follow the instructions here: How to Create a YouTube Channel for Beginners (Step-by-Step Tutorial)
2. Prepare Videos to Upload
   1. Obtain permissions ahead of time
      1. If someone is the speaker, interviewee, or featured guest in your video, be sure to get their permission before posting your video. See: Model Release and HIPAA Authorization Forms
      2. If it is an event of equal discussion of all participants, then inform them that the event will be recorded. In that case a few sentences on the Zoom registration page and in their registration email, for example: “We will be recording our zoom seminars. By registering for the event, you are acknowledging that you are aware the session will be filmed and that you are welcome to keep your camera off if you so choose.”
      3. For the guests, announce at the beginning of the event that it is being recorded and, if virtual, they are welcome to keep their camera off.
   2. Brand video in postproduction: All videos should have an outro slide that includes the Rutgers School of Arts and Sciences logo and an intro slide that includes the title of the video, the name of the featured speaker, the date, etc., and any other pertinent intro information is also recommended—intro slide can also be used as the thumbnail image on YouTube. Examples of intro slides and the outro slide for download are available here: go.rutgers.edu/SASGettheWordOut
3. Upload Videos
   1. Begin the upload process:
      1. Login to YouTube
      2. Click the create content button at the top right of the YouTube window
         
         
         
         
      3. Click “Upload video” from the dropdown menu
         
         
         
         
      4. Drag and drop your video file into the “Upload videos” panel, or click the “select files” button and locate your video file on your computer, select it and click the “Open” button.
         
         
         
         
         
         
   2. Add all the necessary information about your video
      1. Title
      2. Description of what goes on in the video
      3. Set the thumbnail image for the video by either clicking the button to upload your own custom thumbnail image, or select one of the default options.
      4. Optional: add the video to a playlist if it is part of a series. This will allow all videos in a series to be collected in one place.
      5. Set the Audience level (whether or not the video is made for children or needs an age restriction)
      6. Once everything is ready, click the “Save” button to complete the process and YouTube should provide the url to your video.
4. Embed Your Videos on Your Website
   1. Upload individual videos
      1. In the back end of the article where you want to embed a video, type the following code (without any spaces): { youtube}{/youtube}
      2. Then copy and paste the url for the youtube video in between the two sets of brackets, for example, something like this (without any spaces): { youtube} https://youtube.urlexample-blah-blah {/youtube}
      3. This is all it takes to get the video on your website, but for more detailed instructions on how to customize the size of your video frame and other tips check out the instructions here: Displaying a Video Within an Article or Module
   2. If the video is attached to a “course,” etc, reach out to the SAS IT Web Development team for assistance through the Rutgers IT Help request system.
      • https://ithelp.sas.rutgers.edu/
   3. Upload a gallery of videos
      • SAS IT has documentation for creating a collection of videos using Ignite Gallery. Please refer to these pages and reach out to SAS IT through the request system above for more assistance.
        • Adding Videos to Ignite Gallery - Youtube/Vimeo
          
          
        • Adding Videos to Ignite Gallery (Kaltura)

Overview

You can display a list of documents from the same category within a "DOCman - Documents" module. When new documents are added to the category, the module will automatically update the list.

Procedure

1. In the Joomla! back-end (Control Panel), navigate to Extensions > Site Modules, then click the New Button to create a new module:
   
2. Select DOCMan - Documents from the list that appears under "Select a Module Type:"
   
3. Enter a Title for your module (see #1 below).
4. Click within the Categories field and select your DOCMan category (see #2 below).
5. For "Position," click the dropdown menu, and select the desired module position.  For example, to display the module to the left of the content area, select "Sidebar-left [sidebar-left ]". Read more about Module Positions here.
6. Click the "Menu Assignment" menu to specify which menu items will display your module (see #3 below).
   
   • If the new module should appear on all pages, leave "On all pages" selected. If not, refer to Assigning a Module to one or more menu items.
7. Click Save & Close to the upper left (see #4 below).

Overview

JEvents is a Joomla! component that lets you create events and display them in a variety of ways. We commonly use the component to display future and past events. If you haven't already set up JEvents Categories and added Events, please do that before making the module:

• Managing Event Categories
• Adding an Event (JEvents)

Procedure

This is how to set up a module to display upcoming events:

1. Go to Components > Modules:
   
   
2. Select the New button from the top left of the page:
3. Select "JEvents - Latest Events Module" as the type of module from the list:
4.  Give the module a title and a position. Usually, this module works best in the "Sidebar B (sidebar-b)" position.  See a list of commonly used module positions here.
5. Unless the module should appear on all pages of the website, assign it to specific pages as follows:
   1. Click the "Menu Assignment" tab
   2. Click the dropdown box to the right of Module Assignment and select "Only on the pages selected" (see #1 below).
   3. For Menu Selection, click "None" to the right of Select (see #2 below).
   4. Click the check boxes for any menu items that should display the module when clicked (see #3 below).
6. Click the Module tab.  Under JEvents - Latest Events Module on the left are options you can change, depending on how you want your events to be displayed:
   
   1. Select categories – leave blank for all: Select which categories you want to display, or leave it blank if you want to show events from all categories.
   2. Maximum Events to display:enter the maximum number of events to be displayed.
   3. Display events from the next ? days: Enter a number for how many days into the future to display the events.
   4. Past Events Only: change this to "Future Events Only" to only display future events.
   5. When done, click Save & Close.

If you have any questions you may SUBMIT A REQUEST and we will help you with the configuration.

Adding links to your article

To add links to any article, select the text you want to create into a link, then click on the Insert/Edit link in the tool menu.

In the link tab in the popup, enter the link you want the button to redirect the person to. You can also change the text of the link if you prefer. 

Making the link into a button

1. Click on the Advanced tab of the popup 
2. Under Classes, choose the button type you prefer
3. Click Update

When done, click Save & Close to save your article.