Joomla 4.x

Joomla 4.x

  • Managing Event Categories (JEvents) (Joomla! 4)

    • How to video:

    Overview

    You can group events into categories in JEvents the same way you can group articles into categories.  Creating categories for similar types of events (such as "Conferences," "Lectures," "Meetings," and "Symposia") allows you to create modules or menu items that display events from one or more categories.

    Creating a Category

    • Log on to your site using the Administrator Login.
    • Go to "Components > JEvents":

      JEvents Add
    • At the JEvents Dashboard, hover the mouse over the left sidebar (or top menu, if the left sidebar does not appear), then select MANAGE CATEGORIES
      • JEvents left sidebar (larger browser sizes):

        JEvents 3.6.x: Manage Categories

      • Top menu (smaller browser sizes):

        JEvents: Manage Categories
    • Click New to create a new category: JEvents 3.6.: Manage Events "NEW" icon
    • Enter a title for your category in the "Title" field (see #1 below)
    • If your category should be a subcategory of an existing JEvents category, select the existing category from the "Parent" dropdown menu (see #2 below)
    • Choose a color for your category (optional):
      • Click Options (see #3 below)
      • Click in “Choose Colour” and use the color picker to select a color
    • When done, click SAVE & CLOSE (see #4 below)
      Creating a new category in JEvents
    • You can now select your new category when creating or editing an event.
    • You can also select your category when creating a JEvents module or menu item.  The module or menu item will only show events from the selected category or categories.

    Deleting a Category

    Before deleting a category, all events within the category must be deleted and emptied from the trash.

    • Video Included: Video Included
  • Modifying Image Properties (Joomla! 4/5)

    • How to video:

    Overview

    Once an image has been added to an article, you can modify the image's properties such as its alternate text ("alt txt"), dimensions, alignment, and borders.

    Procedure

    1. Log into the Administrator interface using your NetID credentials.
    2. Find the article you want to edit and click on its title.
    3. Select the image, then click on the "Insert/Edit Image" icon:

      JCE Editor: "Insert/Edit" Image button
    4. In the "Image Manager" popup window, modify the image properties as follows:
      • Enter a short (less than 150 characters), accurate description of the image in the "Alternate Text" field (see #1 below). 
      • If your image is large, reduce either the first dimension (width in pixels) or the second dimension (height in pixels), and the other dimension will be reduced proportionally, as long as "Proportional" remains checked (see #2 below).
      • Set the "Alignment" to left or right to place the image to the left or the right of the surrounding text (see #3 below).
      • Uncheck "Equalize" to the right of the margin values (see #4 below).
      • Enter margin values to add some space between the images and the text (see #5 below):
        • For a left-aligned image, enter "10" for the right and bottom margins.
        • For a right-aligned image, enter "10" for the left and bottom margins.
      • Click Update to the lower right (see #6 below):

        JCE Editor: Image Manager

    5. When done modifying the images in your article, click Save & Close to the upper left: Save & Close button
    • Video Included: Video Included
  • Module Positions (Joomla!4)

    • How to video:

    Overview

    A module's position refers to its location on the web page.  A module position can usually be identified by its location outside the main content area where articles appear.  Each Joomla! template will have a different list of module positions. 

    SAS-RED module positions

    SAS-RED is the template used for SAS unit websites.  Some of the most commonly used menu positions are:

    Ccommonly used module positions in the SAS-RED template

    • Showcase-a - This position is located directly below the main menu, and spans the width of the page.  Showcase-a typically contains a SmartSlider slideshow or a single image with aspect ratio 3:1.
    • sidebar-b - This position sits to the right of the article area. On the homepage, this position will usually be occupied by a JEvents Latest Events module.  On most other pages, a menu module will appear in sidebar-b.  You can have several modules in the sidebar-b position; they will stack vertically.  If there are no sidebar-b modules on a page, the article area will extend to the right side of the page.
    • Mainbottom positions - Modules in these positions appear below the article area and any sidebar-b modules.  You can have up to four modules in Mainbottom positions; these positions area named (from left to right) Mainbottom-A, Mainbottom-B, Mainbottom-C and Mainbottom-D. These positions work best if you have modules in three or four of them, with each being a custom module containing a square image measuring 460 pixels per side.  The images within the modules should be linked to important pages on the website.  
    • extension positions - These module positions occupy the area below the Mainbottom positions, and essentially serve the same purpose. Use the extension positions if you need a second row of square custom modules below the Mainbottom modules.  The extension positions are named (from left to right) extension-a, extension-b, extension-c and extension-d.
    • Video Included: Video Included
  • Moving a Menu Item (Joomla! 4/5)

    To move a menu item

    Scenario: move "test items" from Playground to Lessons

    Moving a Menu Item

    1. In the Joomla! administrator for your website, go to Menus and select the menu containing the menu item that needs moving.
    2.  mainmenu
    3. Click on the title of the menu item you would like to move:
      movemenu
    4. (Optional) Change the Menu to move your menu item to a different menu (see #1 below).
    5. Change the Parent Item to display your menu item underneath another menu item (see #2 below). 

      movemenu1

    6. When done, click Save & Close at the top.  Your menu item will now be displayed in its new location.

      Menu Item moved
  • News

    • How to video:

    News is displayed on this page in different categories of news items. The first page is called the Newsroom Landing Page, which will have a mix of different news items depending on the tag selected for them.

    Page: https://sas.rutgers.edu/about/news

    News HowToGuides

    • Alumni - This section contains news about primarily Alumni.
    • Faculty – Faculty news items
    • Students – News items about students
    • Research – News items with information about Research
    • Achievements – News items that go across the board but relate to Achievements.
    • Video Included: Video Included
  • Office of Alumni and Events

    • How to video:

    Page: https://sas.rutgers.edu/office-of-alumni-relations-and-events

    Office Of Alumni Events HowToGuides

    This area of the site you can find out about different Alumni Events, how to plan an event (including important checklists) and find School of Arts and Sciences Exhibit Kit details.

    • Contacts
    • Planning an Event
    • School of Arts and Sciences Exhibit Kit
    • News Digest: Submit Upcoming Events
    • Executive Dean’s Event Request

    Additionally, if you would like to request an event with our Executive Dean, please click on this link: https://rutgers.ca1.qualtrics.com/jfe/form/SV_4O2POx9T3DLmhyS

    • Video Included: Video Included
  • Office of Communications and Marketing

    • How to video:

    Page: https://sas.rutgers.edu/office-of-communications-page

    The Office of Communications and Marketing page has information about the Rutgers and SAS Visual Identity and Branding and the News Digest. Please visit this area to answer all your communications questions.

    Office Of Communications Marketing

    Branding / Visual Identity Section

    Page: https://sas.rutgers.edu/office-of-communications-page/branding-and-visual-identity

    Through this page it is possible to download:

    • The new R Logo with School of Arts and Sciences Tagline
    • SAS PowerPoint Templates
    • Stationary Templates
    • Virtual Backgrounds – that can be used for Zoom meetings
    • Business Cards and Swag

    Create new SAS email signature: https://secure.sas.rutgers.edu/apps/email_signature/

    Request a new Signature Logo for your department or unit: https://signaturegenerator.rutgers.edu/

    When requesting a signature logo for your department or unit please ensure you are requesting the Horizontal Option 1 version.

    Submit to News Digest

    Page: https://sas.rutgers.edu/office-of-communications-page/news-digest-upcoming-event

    To submit a news item or event to our News Digest, which is distributed to RU colleagues, faculty, staff, and other community members of the School of Arts and Sciences every Thursday.

    • Video Included: Video Included
  • Overview of JEvents (Joomla! 4/5)

    • How to video:

    Overview

    JEvents is an event management extension for Joomla! that stores calendar-based event information.  The events can be organized by categories, which helps to display them in different groupings.  In fact, events can actually exist in multiple categories in JEvents.   Events can be displayed within a module, or they can be accessed from a menu item.  There are many different types of options for displaying events, including a monthly calendar, a list of events from a category, a list of upcoming events, or a date range of events.

    Accessing JEvents

    You can access JEvents in the Joomla! back-end by going to "Components > JEvents"

    JEvents Add

    Documentation

    These articles provide documentation for working with JEvents:

    • Video Included: Video Included
  • Overview: What is a Module? (Joomla! 4/5)

    • How to video:

    Overview

    A module in Joomla! is a "mini program" that can be displayed in various positions on the website.  Modules can make your site more dynamic and easier to work with if used properly.  You can usually identify an article by its location on the website outside the main content area where articles appear.

    Types of modules

    There are many different types of modules, each with different functionality.  Some modules are included with Joomla!; these are called "core modules."  Other modules come from developers outside the Joomla! Project; these are called "third-party modules."

    Core modules

    Some of the core Joomla! modules documented on this website include:

    Third-party modules

    Some of the third-party modules documented on this website include:

    Properties

    Every module has two very important properties:

    1. Position
    2. Menu Assignment
    • Video Included: Video Included
  • Overview: What is DOCMan? (Joomla! 4/5)

    • How to video:

    Overview

    DOCMan is an extension for Joomla! that allows you to upload documents to your website, so they can then be downloaded by visitors to your site.

    File vs. Document

    DOCMan defines files and documents as different things:

    • A file is the original PDF, Word document, or other file that you upload to DOCman.  Your file is not accessible on the website until it becomes a document.
    • A document is a link to the file you uploaded, with some additional properties that are specified in DOCMan:
      • A title (which may differ from the file name)
      • A category
      • A description (optional)
      • The status, whether published or unpublished

    DOCman: File is uploaded to DOCman; file becomes document; document displayed on website

    DOCman Documentation

    • Video Included: Video Included
  • Overview: Where does Joomla store files? (Joomla! 4/5)

    Overview

    In Joomla!, files such as PDFs and images (jpg, png, etc) are all stored in the "images" directory.  The exception is for files uploaded using a third-party document management extension such as DOCman.  These extensions have their own folder structure within the Joomla! website.

    There are multiple ways to upload these files; follow the appropriate links below.

    Uploading files to the "images" folder

    The Media Manager in Joomla! and JCE Editor Pro both allow you to upload files to the "images" folder.

    Media - for image files (gif, jpg, png, etc).

    JCE Editor File Browser - for PDF files

    Uploading files with third-party extensions

    DOCman, Ignite Gallery, and JEvents are all examples of third-party extensions that allow you to upload files to Joomla!.  The files are stored by the respective components within their own file structures, not the "images" folder.

    DOCman

    Ignite Gallery

    JEvents

  • Overview: Working with Images (Joomla! 4/5)

    • How to video:

    Considerations

    • Always obtain permission before using images from a public website.
    • Before using images of students, obtain emails from the students granting you permission to post their pictures on the website.
    • There are images available to use through SAS Office of Communications and Marketing; they can also schedule a photo shoot for your unit.
    • You can also download images from the Rutgers Photo Gallery.
    • Images in the public domain can be freely used.  There are many available at Wikimedia Commons (check the copyright status of an image to verify whether it is in the public domain).
    • Ideally, you should resize images before uploading them to your website. The maximum width allowed by our current template is 1200px.
    • Images must be on your computer or on a network drive in order for you to add them to the website.

    Documentation

    • Video Included: Video Included
  • People Pages

    • How to video:

    Our people pages on this site can be found within: Leadership and Offices.

    People Pages HowToGuides

    Leadership HowToGuides

    • Video Included: Video Included
  • Placing a Module within Content (Joomla! 4)

    • How to video:

    Overview

    Normally, a module is displayed in a specific module position.  It is also possible to nest (or embed) a module inside of an article.  For example, if you have a Rutgers Course List module displaying a department's list of courses, you can put the module inside of an article to display it along with other article content.

    Procedure

    1. Create the Module first
    2. If the module should only be displayed within an article, make the following changes to the module properties:
      • Leave the "Position" dropdown menu blank (see #1 below), or if a selection has been made, click the "x" to the right of the module position. 
      • Click the "Menu Assignment" tab (see #2 below)
      • 1
      • Change "Module Assignment" to "No Pages"
      • 2
      • Click Save & Close.
    3. Create the Article
    4. Click within the article text area to place the cursor where you want the module to appear.
    5. Click the Module button below the text area.  If you see two Module buttons, click the second one (it looks like it has multiple windows in its icon):
      3
    6. Enter part or all of the module's title in the "Search in module title and note" field, then press [Enter] or click the search icon.  In the below example, the first arrow indicates that we're searching for a module with "web link" in its title:
      4
    7. In the "ID" column, click the button with the number inside it to the left of your module's title (this is the module's ID number).  In the above example, the bottom arrow indicates that we are clicking the button with the number "309," which is the ID number of the "Faculty Listing" module.

      Although you can also click on the module title itself, we recommend clicking the module's ID number instead. This is because the module's ID number will not change and will be unique, while your module's title may change, and two or more modules may have the same title.
    8. The embedded module will not actually appear while you are still editing the article; instead, you will see the ID number of the module inside braces.

      Embed code for module displayed within article area
    9. Save & Close the article.
    10. When you view the article on the front end, the output of the module will be displayed within the article.  In this example, the article "Faculty" displays some text, then the listing of articles generated by the embedded "Articles  - Category" module:

      Article with embedded "Articles - Category" module
    • Video Included: Video Included
  • Random Image Module (Joomla! 4)

    • How to video:

    Overview

    This module will display a single image from a Media folder.  If there are multiple images in the folder, the module will display a different image each time the page is visited.  This adds variety to the site without creating a complex slideshow.

    The module works best when all the images in the folder are resized and cropped to the same size.

    You can assign a link to all the images displayed in the module, so that when someone clicks on the image, they will be taken to a specific page on the website.  The link will be the same for all images.

    This module is not a substitute for an actual photo gallery or slide show.

    Recommended uses are for study abroad pages, or for displaying different images of artwork on the home page of a website.

    Procedure

    Upload Images to the Media Folder

    1. In the Joomla! Administrator Control Panel, select Media

      5
    2. Click Create New Folder(see #1 below).
    3. Enter a name for your folder (see #2 below).  Do not use spaces, or any special characters other than a dash (-), in the name of the folder.
    4. Click Create(see #3 below).
    5. Select your new folder from the list of folders 

      7

    6. Upload images into the folder following the documentation: How to Add an Image to Media

    Create Random Image Module

    1. In the Joomla! back-end (Control Panel), navigate to Extensions > Site Modules, then click the New Button to create a new module:

      Create new module

    2. For "Select a Module Type," select Random Image:Create new module type: "Random Image Module"
    3. Enter a title for your module in the "Title:" field.
    4. For "Image Folder," enter the name of the Media folder containing your images.  This should start with "images/" followed by the name of your folder.
    5. If you would like the images to be linked to another page or website, enter the URL of that location in the "Link" field.
    6. For "Width (px)", enter the width of the images in pixels.
    7. For "Height (px)", enter the height of the images in pixels.Configure Random Image Module options
    8. For "Position" (found to the right), select the position where the module should appear on the website. See the article "Module Position" for more information.
    9. Unless the module should appear on every page of the site, assign the module to one or more menu items.
    10. Click "Save & Close" to the upper left to save your new module: Save & Close button

     

    • Video Included: Video Included
  • Re-ordering Articles (Joomla! 4/5)

    • How to video:

    To manually re-order articles:

    1. Filter for the category of articles to be reordered:
      1. Go to Content -> Articles and click the Filter Options button.
      2. In the "Select Category" dropdown that appears, select the name of the category of articles that need sorting. 
    2. To the upper right, find the filter that displays the number of articles (found below the Options button; see below) and change it from "20" to "All":

      Article number filter
    3. At the top of the leftmost column, there is an icon that looks like up/down arrowheads. Hover over it and you'll see this text:  
                Ordering   
                Select to sort by this column
    4. Notice that below it is a column full of icons that look like three, light gray stacked boxes.
    5. Click the double arrow icon at top of column and the stacked boxes should turn black indicating sorting is active.
    6. Drag each stack of boxes (which correspond to individual articles) up or down so that the corresponding articles are in the correct order.
    7. After doing this, you will need to refresh the front-end of the website in your browser to see the change.

    ordering2

    • Video Included: Video Included
  • Removing a Repeating Event (JEvents) (Joomla! 4/5)

    • How to video:

    Overview

    If your department has a repeating JEvent on your calendar, you can remove or edit a single instance of the event, or remove all repetitions of a repeating event.

    Procedure

    • Navigate to "Components > JEvents"

      JEvents Add

    • 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):
        JEvents Control Panel: Manage Events
      • Top menu (smaller browser sizes):

        JEvents 3.6.x: Manage Events icon (top menu)
    •  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):

      JEvents 3.6.x: Show past events

    {slider Removing Specific Instances of a Repeating Event}

    • Find the repeating event you wish to remove/edit. You may need to enter some part of the title into the search bar for this.
    • Click on the 3 lined icon under the title "repeats"
      JEvents: Repeating Event icon

    • Click the checkbox (or checkboxes) for the repeating instance (or instances) of the event you would like to delete (see #1 below).
    • To delete, click the DELETE button (see #2 below).

      JEvents 3.6.x: Delete a repetition of a repeating event

    • The repetitions of the event you deleted will no longer appear on your calendar.

    {slider Removing all Repetitions of an Event}

    • Find the repeating event you would like to edit and click on its Title:

      JEvents 3.6.x: Select a repeating event

    • Once the event opens, select the tab labeled "Calendar" (see #1 below).
    • Under "Repeat type", select "No Repeat" (see #2 below).
    • To enact this change, click "Save & Close" (see #3 below).

      JEvents: 3.6.x: Delete all repetitions of an event

    • All repetitions of your event will disappear from the calendar, except for the original occurrence.


    {/sliders}

    • Video Included: Video Included
  • Removing Text Formatting (Joomla! 4/5)

    • How to video:

    When pasting text over from Microsoft Word or another source text may have formatting that may not seem visually appealing on your website. In order to keep the text but remove the unwanted formatting:

    1. Open the article for editing.
    2. Highlight the undesirably formatted text.
    3. Click on the eraser icon that appears in the top row of the editor toolbar.  This will remove styling such as color, background, bold, italics.

      removeformatting

    4. Save and close your article.
    5. Check the text from the front end. Be sure to clear your browser's cache or changes may not show.
    6. If formatting has not been removed, there may be some styling left in the HTML code.  We can assist clearing this out by way of an SAS-IT REQUEST.

    Related:  If you wish to add any additional styling you can look at this documentation for more information: Editing Articles (Joomla! back-end) - Define Headings, Styles

    • Video Included: Video Included
  • Reordering Articles in Latest News Enhanced (Joomla! 4/5)

    Overview

    The Latest News Enhanced extension can display articles using either modules or menu items.  This procedure discusses how to configure article ordering for both options.

    Configuration

    Module

    1. Go to Extensions > Modules.
    2. Click Search Tools.
    3. Change "- Select Type -" to "Latest News Enhanced."
    4. Click the title of the module to be configured. (If there are many Latest News Enhanced modules, changing "- Select Status -" to "Published" may help narrow down the list.
    5. Click the Item Selection tab.
    6. Scroll down the page and look for "Order" (see #1 below).
    7. From the selection box, choose the ordering needed (see #2 below; refer to the options under Ordering Options below).
    8. Save & Close the module (see #3 below).

    LNE

    Component (menu item)

    1. Go to Menus > Main Menu.
    2. Find the menu item to be configured and click on it.  This will match the title of the menu item as it appears in the horizontal "Main Menu." 
    3. Click the "Item Selection" tab. 
    4. Scroll to bottom of the page and look for "Order".
    5. In the drop down selection box, choose the ordering needed (refer to the options under Ordering Options below).
    6. Save & Close the menu item.

     

    LNE

    Ordering Options

    • Console Desc: articles will appear in reverse order from their order in Content > Articles
    • Console Asc: articles will appear in the same order they appear in Content > Articles
    • Recently Created First: articles will be sorted based on their Created Date (newest at top)
    • Recently Created Last: articles will be sorted based on their Created Date (oldest at top)
    • Recently Published First: articles will be sorted based on their Start Publishing date (newest at top)
    • Recently Published Last: articles will be sorted based on their Start Publishing date (oldest at top)
    • Recently Modified First: articles will be sorted based on their Modified Date (newest at top)
    • Recently Modified Last: articles will be sorted based on their Modified Date (oldest at top)
    • Finishing Date Desc: articles will be sorted based on their Finish Publishing date (newest at top)
    • Finishing Date Asc: articles will be sorted based on their Created Date (oldest at top)
    • Recently Created or Modified First: articles will be sorted based on their Created Date or Modified Date, whichever comes later (newest at top)
    • Recently Created or Modified Last: articles will be sorted based on their Created Date or Modified Date, whichever comes later (oldest at top)
    • Random: articles will be shown in random order
    • Popular (Hits): articles will be sorted based on their hits
    • Title Desc: order by alphabetically by article title (descending)
    • Title Asc: order by alphabetically by article title (ascending)
  • Resetting pictures displayed by Latest News Enhanced (Joomla! 4)

    Overview

    This document explains how how to refresh pictures in Latest News Enhanced pages by clearing the Joomla! Cache.

    When images are updated or added to articles being displayed by Latest News Enhanced, the new images won't appear until the Joomla! cache is cleared.

    Procedure

    1. Log on to your site using the Administrator Login.
    2. Select Clear Cache from the System menu:

      clear cache
    3. Check the box to the left of any of the following entries under "Cache Group:"
      • com_latestnewsenhanced
      • com_latestnewsenhancedpro
      • mod_latestnewsenhanced
      • mod_latestnewsenhancedpro
    4. Click Delete:
      clear cache 2
    5. This will clear cached LNE images.
    6. Reload the original browser windows displaying the Latest News Enhanced images; any updated images should now be visible.
    7. Log out from the Administrator Login by clicking the dropdown arrow above the Joomla! logo in the upper right corner of the Administrator page (see #1 below), then clicking Logout(see #2 below):

      logout