Joomla 4.x

Overview

We recommend that videos that are not 'promotional videos' be uploaded to KALTURA

How to upload to Kaltura

Login to Kaltura / Create an Account

1. Visit: https://kaltura.rutgers.edu
2. Create an account with your rutgers id

Upload Video

1. click on Create --> upload Video

 Upload Screen:

Adjust Video Properties

Publish Settings

• Select Rutgers New Brunswick - School of Arts and Sciences Channel
• Select to Publish 

Collaboration Settings

• Add yourself as a collaborator / editor

• Add the SAS-IT group as the MEDIA OWNER
  • -type in the box: sas-web1, you will then see SAS-IT as an option to select.

Save all changes

Upload Thumbnail

• The thumbnail can be created anywhere, the image should be the 'size of a video'
• It should include either the Rutgers Logo or the School of Arts and Sciences Logo
• Click here for some sample layouts
• Thumbnail size: 1920 x 1080
• Use this template to create a Thumbnail: https://go.rutgers.edu/SAS-VIDEO-THUMBNAIL

Select the video link

• Copy the video link (this will be used when you create your ticket)

Submit Ticket to Web Development Group

• Create a ticket to the web development group
• Include:
  • Video Name
  • Video Link in Kaltura
  • Page you want to embed the video on
  • The Web team will then embed the video

 Embed Video to Joomla Article

• To embed the video directly into a Joomla Article, please click on the link below:
• Embed Video to Joomla

.

1. Click on the SHARE Option, then click on the EMBED TAB

 2. Click on EMBED LINK

3. Select EMBED Settings

• Choose Player --> R-NB - School of Arts and Sciences Branded Player
• Max embed size: 1280x720

4. Go to the Article to PASTE the embed code into the article on the website.

7. Paste the embed code from Kaltura into the location in the code where the video should be embedded.

8. Save & Close the article. 

Overview

Kaltura gives you many options that you can work with.

Create your own Channel

• A Channel can be shared with the public (as long as the channel is set for public viewing)
• A channel can be Rutgers dedicated only
• Rutgers staff/Faculty/students can subscribe to a channel

Create your own Playlist

A playlist can be created within a channel

• if you want a playlist of videos organized by YEAR
• A playlist can be linked to  or embedded within a website or emailed

How to Create a Playlist

How to Work with a Playlist

The SAS Joomla! template meets Rutgers University identity standards and School of Arts and Sciences identity standards.  Banners with the Rutgers School of Arts and Sciences logotype and modules with departmental contact information will appear on every page of the website. 

In addition to identity features, the SAS Joomla! template provides the following:

• A responsive layout that adjusts content for different devices and screen sizes
• A standard navigation and structure that provides easy access to departmental/unit information
• A high level of compliance with Accessibility Standards

Other features of our websites include:

• Course listings that update automatically
• Easy to maintain faculty listings
• Image slideshows
• Calendars and/or lists of events
• News and/or announcements

Please visit: https://webtraining.sas.rutgers.edu/ to see a live demo of the SAS Joomla! template or look below.

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

The academics section provides information which is mostly pulled from the Advising and Academic Services site (https://sasundergrad.rutgers.edu). The landing page for academics includes buttons to various departments and pages with important information about our Academic offerings with the School of Arts and Sciences.

• Majors & Minors
• Dual Degrees
• Areas of Study
• SAS Divisions
• Advising and Resources
• Core Curriculum
• Centers and Institutes

To view and disable Joomla! users:

1. Log into the back end "Administrator" interface of your website.
2. Navigate to Users ---> Manage.
3. Click the Filter Options button to reveal filters that can be used to search for users by state (enabled or disabled) or by group. 
4. Once a user is found, check the box to the left of their name. (Please keep in mind that some users may be SAS-IT staff. When in doubt, submit an SAS-IT REQUEST.)
5. Select Blockfrom the Actionsdropdown menu. 
6. Check the box to the left of the user's name.
7. Select Batchfrom the Actionsdropdown menu. 
8. For "Select Group," select "Public"
9. For "Select Action," select "Move to Group"
10. Click Process.

To create a caption

1. Select an image or media placeholder in the editor
2. The Insert / Edit Caption button will become enabled. Click the button to open the Captions dialog.
3. Some fields will be filled with some of the image properties
   1. The Text field in the Text tab will be filled with the image alt or title attribute value
   2. The Alignment in the Container tab will be selected based on the image's alignment.
   3. The Margin fields in the Container tab will be filled with the image's margin styles, if any.
4. Set the Text and Container options as required. A preview of the caption will be displayed in the Preview section of the dialog.
5. Click the Insert button to create the caption.

The caption text can be edited as normal in the editor. For example in the animation below, after the caption has been created, the caption text is selected and an italic format is applied.

 To edit a caption

1. Click on the image that has the caption in the editor.
2. The Insert / Edit Caption button will become enabled. Click the button to open the Captions dialog.
3. Edit the caption properties as required.
4. Click on the Update button to update the caption and close the dialog.

To delete a caption

1. Click on the image that has the caption in the editor.
2. The Delete Caption button will become enabled. Click the button to delete the caption.

The procedure explains how to add a "Custom" module in Joomla! using the Administrator interface. A "Custom" module is a block of formatted text that can be configured to appear when one or more menu items are accessed.

A custom module allows you to add custom text and/or an image and place it in a position on the website.

Create a new Module

1. In the Joomla! back-end (Control Panel), navigate to Extensions > Site Modules, then click the New Button to create a new module
   
2. For "Select a Module Type," select Custom:
   
3. Enter the name of your module in the "Title *" field (see #1 below).
4. (Optional) click "Hide" under "Show title" selection to the right if the module title should not be shown (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]" (see #3 below).
6. Under the formatting toolbars, enter the text that you would like to appear in the module.  You can format the text using the buttons on the editor toolbars (see #4 below).
7. Click the "Menu Assignment" menu to specify which menu items will display your module (see #5 below).
8. If the new module should appear on all pages, leave "On all pages" selected. If not, go to the next section, "Assigning the module to specific menu items."
   

Assigning the Module to specific menu items

If the module should appear only when one or more specific menu items are accessed, do the following:

• On the "Menu Assignment" tab, click the dropdown box to the right of Module Assignment and select "Only on the pages selected" (see #1 below).
• For Menu Selection, click None to the right of "Assign to Menu Items" (see #2 below).
• 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

JEvents is a third-party extension for Joomla! that allows you to add event information in either a calendar or list format.  As you create events, they will appear on your website in JEvents menu items or modules that have been configured to display events from the appropriate categories.

Procedure

1. Login to the Joomla! Administrator back-end.
2. Click on "Components > JEvents"
   
   
   
   
3. At the JEvents Dashboard, hover the mouse over the left sidebar (or top menu, if the left sidebar does not appear), then select Manage Events.
   .
   1. JEvents left sidebar (larger browser sizes):
      
      
   2. Top menu (smaller browser sizes):
      
      
4. Click the "New" button:
5. Enter a title for the event in the "Title" field (see #1 below).
6. If your website has more than one calendar, select the appropriate one from the "Events calendar" dropdown menu (see #2 below).
7. For Categories,select one or more categories that should display your event (see #3 below).
8. Enter a short description of your event in the "Description" text box.  Note that you can format your description the same way you would format an article (see #4 below).
9. Enter the location of your event in the "Location" field (found under the "Description" text box).
   
   
   
   
10. Click on the "Calendar" tab under the "JEvents" logo (see #1 below).
11. Click the mini-calendar icon below "Start date" and select a start date for your event (see #2 below).
12. Type a Start Time in the Start Time field and select "am" or "pm" (see #3 below).
13. If the event will span more than one day, click the mini-calendar icon below "End date" and select an end date for your event.
    
14. Type an End Time in the End Time field and select "am" or "pm" (see #4 below).
15. Click "Save & Close" (see #5 below).
    
    

1. Log into the Administrator interface using your NetID credentials.
2. Find the article you want to edit and click on its title.
3. Choose where you would like your image placed, then click the Insert/Edit Image button from the WYSIWYG editor:
   
   
4. Navigate to the folder where the image is located (or, for a new image, where it should be saved) using the "Folders" pane to the lower left.  If you are adding a new image, click the Upload button to the right:
   
   
5. If you clicked Upload, choose the Browse button at the bottom of the "Upload" window and navigate to the location of the image on your computer (see #1 below).  Alternately, you can drag and drop images to the 'Drop files here' area (see #2 below):
   
   
   
   
6. You may upload multiple images by holding the [Shift] key as you select the images.  Click Upload (see #3 above) when you have finished selecting images.
7. Back at the Image Manager window, select the image to be added to the article:
   
   
8. Set the image properties (dimensions, border, margins, etc) as needed:
   
   
9. Alternate Text:  Be sure to add some descriptive text to the Alternate Text (alt text) field.  It is an important feature for accessibility. This is used to enable screen readers to portray the image as text.
10. Image Caption:  To add an image caption, click the "Advanced" tab, add the caption text to the "Title" field, and add the word "caption" to the classes field:
    
    
11. Click Insertwhen all properties have been set.
12. Save & Close the article.

This procedure describes how to add images to Media on Joomla! 3.x web sites.

1. Login to your web site using the Administrator Interface.
2. In the Joomla! Administrator , click on Media to the left (found under CONTENT; see #1 below).  If you are not at the Control Panel, you can select Media from the center console  menu (see #2 below):
   
3. Click on the folder where you want to add the image.  You can either select from the small folder icons on the left (see #1 below), or the larger folder icons to the right (see #2 below):
4. Once you have selected the folder where you want to upload the image, click the Upload button to the upper left: 
5. Use the File Upload window to browse to your image file.  When you find the image, click once on the image, then click Open: 
6. If the upload was successful, you will see the message Item Uploaded above the gallery of images, and your image should now appear in the gallery:
7. You can now insert your image into an article.

This procedure describes how to add images to Media on Joomla! 3.x web sites.

1. Login to your web site using the Administrator Interface.
2. In the Joomla! Administrator , click on Media to the left (found under CONTENT; see #1 below).  If you are not at the Control Panel, you can select Media from the center console  menu (see #2 below):
   
3. Click on the folder where you want to add the image.  You can either select from the small folder icons on the left (see #1 below), or the larger folder icons to the right (see #2 below):
4. Once you have selected the folder where you want to upload the image, click the Upload button to the upper left: 
5. Use the File Upload window to browse to your image file.  When you find the image, click once on the image, then click Open: 
6. If the upload was successful, you will see the message Upload Complete above the gallery of images, and your image should now appear in the gallery. 
7. You can now insert your image into an article.

This feature requires an up-to-date version of the JEvents plugin "JEvents - File and Image uploads for Event Descriptions". If you find that you cannot add an image to your event, please SUBMIT REQUEST to request us to install or update this JEvents plugin for your website.

• Click on "Components > JEvents:
  
• At the JEvents Dashboard, hover the mouse over the left sidebar (or top menu, if the left sidebar does not appear), then select Manage Events.
  
  • JEvents left sidebar (larger browser sizes):
    
    
  • Top menu (smaller browser sizes):
    
    
• Either click the title of an existing event to add or Add a New Event.
• If the event you're looking for doesn't appear, click SEARCH (see #1 below), then change " - Hide Past Events - " to "Show Past Events" (see #2 below):
  
  
  
  
• Scroll to the bottom of the Create an Event page (or Edit Event page, if you are editing an existing event)
• To the right of “Upload Image,” click SELECT IMAGE:
  
  
  
  
• Browse to the image location on your computer and click "Open" (or "Select" or "Upload", depending on your browser and version).
• To the right of “Image Title,” enter a title for your image:
  
  
• Scroll back to the top of the page, then enter the remaining details for your event on the COMMON and CALENDAR tabs.
• When done, click SAVE & CLOSE.
• You can now view the event with the image on the front-end.
  
  

Overview

It is useful to display left side menu modules on your site pages. These modules remain visible after a dropdown menu item on the Main Menu is clicked.

Procedure

1. In the Joomla! control panel (back end), navigate to Extensions > Site Modules, then click the New button to create a new module. 
2. For "Select a Module Type," select "Accordeon Menu CK"
3. Enter a title for the module in the "Title" field. For example, if you want to display a menu of the dropdown menu items under "People" on the Main Menu, enter "People" for the title.
4. Configure Module Options:
   • For "Show Title," click Show (see #1 below)
   • For "Position," select "sidebar-left" (this is the left side of the web page) (see #2 below)
   
5. Click the "Menu Assignment" tab:
   
   1. Change "Module Assignment" to "Only on the pages selected"
   2. For "Menu Selection," click the "None" link shown after "Assign to Menu Items"
   3. Select the menu items corresponding to the dropdown menu item list where this module should be displayed.  For example, if you are creating a menu module for the "Test Menu" dropdown list, check off the menu items under "Test Menu Item:"
      
6.  Click the "Source" tab
   1. Select Menu = select the "Main Menu"
   2. Base Item = "Current"
   3. Start Level = "2"
7.  Click the "Effects" tab
   1. Enable Link redirect on parent item = "Yes" 
8. Click the "Styles" tab

   1. Style > click "Select", then select "SAS - Left Side Menu"

9. Click Save & Close to the upper left

This feature requires an up-to-date version of the JEvents plugin. If you find that you cannot add a flyer to your event, please SUBMIT REQUEST to request us to update your JEvents plugin for your department.

• Navigate to "Components > JEvents > Manage Events"
• Either click the title of an existing event to add or Add a New Event.
• Navigate to the section of the event labeled "Standard File 1"
  
  
  
• Click on "Select File" and select the PDF flyer from your computer system, then click "Open".
• Click on UPLOAD
• Enter a name for the flyer in the "File Title" field:
  
  
  
  
• When done adding all other event details, you can Save & Close the Event.
• You can now view the event PDF as a link from your event on the front-end.
  
  
  

Overview

If your article has a significant amount of text, and you want to display multiple articles on the same page using a Category Blog, you can break up the article by inserting a "Read More" separator line within the article.  Anything above the "Read More" line will be displayed as "teaser text" on the ‘blog view’, and the entire article will be displayed once you click Read More.

Procedure

1. Find the article you want to edit.
2. Click inside the article to place the cursor where the Read More link should appear - for example, at the beginning of the second paragraph within the article (see #1 below).
3. Click the Read More button below the content area (see #2 below).
   
   

   

4. A horizontal line will appear within the article where you placed the cursor (see below):
   
5. The text above this line is considered the "Intro Text" (or "teaser text") and will appear when the article is shown via a Category Blog menu item (see #1 below).  The text below the horizontal line will initially be hidden in the Category Blog, but will appear once the Read More button is clicked (see #2 below).
   
6. Save & Close the article.

Overview

There is now an easier way to upload YouTube videos and thumbnails onto your Joomla site!  Please note, this will not work with Kaltura Videos

Recommended: Your video should be uploaded to the Rutgers YouTube Channel before proceeding.

Also review more details about videos with SAS: Video Hosting Options at Rutgers

Procedure

1. In the file upload menu of Ignite Gallery now there is a field to upload a YouTube/Vimeo URL instead of uploading a file directly. Once you have typed in your URL click Submit.
   
2. After pressing the Submit button, you can scroll down to the bottom of the page and see your video uploaded into Ignite Gallery.
   
3. You can click on the "Edit" link in the "Description" column for the new entry to make edits from here. You will see that Joomla! automatically selects the thumbnail from the YouTube video. If you would like to change the thumbnail you can upload your own image. You can change how the image is cropped among other things.
   

Previous steps:

• Displaying Galleries with Menu Items
• Displaying Galleries within Articles

Next step:

• Managing Galleries from the Front End

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