Joomla 4.x

Joomla 4.x

  • Account Cleanup (Joomla! 4)

    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. Select Batchfrom the Actionsdropdown menu. 
    7. For "Select Group," select "Public"
    8. For "Select Action," select "Move to Group"
    9. Click Process.
  • Adding a Caption to an Image (Joomla 4)

    • How to video:

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

    Screen Shot 2023 02 28 at 3.13.05 PM

     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.
    • Video Included: Video Included
  • Adding an Event (JEvents) (Joomla! 4)

    • How to video:

    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"

      JEvents Add

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

        JEvents 3.6.x: Manage Events icon (top menu)
    4. Click the "New" button: JEvents "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).

      JEvents 3.6.x: Create an event

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

      JEvents: Set event date and time

     

    • Video Included: Video Included
  • Adding Images to Events using JEvents File Uploader Tool (Joomla! 4)

    • How to video:

    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:
      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)
    • 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):

      JEvents: Show past events

    • Scroll to the bottom of the Create an Event page (or Edit Event page, if you are editing an existing event)
    • Under “Upload Image,” click Choose File (see #1 below)
    • Browse to the image location on your computer and click "Open" (or "Select" or "Upload", depending on your browser and version).
    • Under “Image Title,” enter a title for your image (see #2 below)

      JEvents 3.6.x: Add image to event

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

      JEvents 3.6.x: Sample event with image
    • Video Included: Video Included
  • Adding PDFs to events using JEvents file uploader tool (Joomla! 4)

    • How to video:

    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"
      Where to find upload button in JEvent

    • Click on Choose File and select the PDF flyer from your computer system.
    • Click on Upload
    • Once you see the name of the flyer in the textbox, you can Save & Close out of the Event.
      Name of File

    • You can now view the event PDF as a link from your event on the front-end.
      Frontend

    • Video Included: Video Included
  • Adding Read More (to show Intro Text in Category Blog) (Joomla! 4)

    • How to video:

    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.

    Comparison of Category Blog without "Read More" in articles and with "Read More" in articles
    Left Side: Category - Blog without "Read More". Right Side: Category - Blog with "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).

      readmore 1

    4. A horizontal line will appear within the article where you placed the cursor (see below):
      readmore 2
    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).
      Example of an article shown in a Category Blog, with Intro Tet shown above the Read More button
    6. Save & Close the article.
    • Video Included: Video Included
  • Adding Videos to Ignite Gallery - Youtube/Vimeo (Joomla! 4)

    • How to video:

    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: https://sasit.rutgers.edu/how-to-guides/web-development-documentation/web-development/116-joomla-3-x/video/699-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 press the submit button.
      ig video
    2. After pressing the submit button, you can scroll down to the bottom of the page and see your video uploaded into Ignite Gallery.
      ig video1
    3. You can click on the title of 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.
      ig video2

    Previous steps:

    Next step:

    • Video Included: Video Included
  • Adding Videos to Ignite Gallery (Kaltura) (Joomla! 4)

    • How to video:

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

    Also review more details about videos with SAS: https://sasit.rutgers.edu/how-to-guides/web-development-documentation/web-development/116-joomla-3-x/video/699-video-hosting-options-at-rutgers

    1. Take a screen shot of the video to be added to the gallery, and crop it to display a still image from the video.  This will be used as the thumbnail for the video.
    2. Upload the image into the gallery.
    3. Click on Edit for the thumbnail image that you uploaded into the gallery:

      ig kaltura 0
    4. Go to where the video is hosted, and copy the URL of the video:

      Ignite Gallery: Copy the URL of the video
    5. Paste the URL for the video into the media code:

      ig kaltura

    6. Click Save & Close.
    7. You can now see the image as a thumbnail with the rest of the images: 

      Ignite Gallery: Video image appears in gallery as thumbnail

    8. When you click on it, you will be taken to the lightbox, and you can play the video:

      Ignite Gallery: Video plays in lightbox


    Previous steps:

    Next step:

    • Video Included: Video Included
  • Alternative Text (Alt Text) (Joomla! 4)

    • How to video:

    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 Insert/Edit Image button in the WYSIWYG editor:

      Joomla! 4 JCE Editor - "Insert image" button

    3. Enter a short description of the image in the "Alternate Text" field (see #1 below):

      Joomla! 4 JCE Editor: Image Manager "Alternate Text" field

    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.
    • Video Included: Video Included
  • Article Versions (Joomla! 4)

    • How to video:

    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:

    version 1

    Joomla! Front End Editor

    The Versions button is below the article editing area:version 2

    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):

      version 3
    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):

      Compare article versions
    4. A "Compare View" popup window will appear, showing you the differences between the versions:

      version 5

    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):

      version 6


    4. The "No" in the "Keep Forever" column will change to "Yes".

     

    • Video Included: Video Included
  • Basic Editing (back-end) (Joomla! 4)

    • How to video:

    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:

    backend 1
    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.

     backend 2

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

    • Video Included: Video Included
  • Basic Editing (front-end) (Joomla! 4)

    • How to video:

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


    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:Edit icon
    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.

     frontend1

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

    • Video Included: Video Included
  • Changing an Article's Category (Joomla! back-end) (Joomla! 4)

    • How to video:

    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.

    Screen Shot 2023 02 14 at 4.01.53 PM

    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.

    Screen Shot 2023 02 14 at 4.12.03 PM

    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.

    • Video Included: Video Included
  • Clearing the Joomla! Cache (Joomla! 4)

    • How to video:

    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:

      clearcache
    3. Click the Delete All button at the top:
      deleteall
    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):
      step1step2
    • Video Included: Video Included
  • Copying an Existing Article (Joomla! 4)

    • How to video:

    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.

    Screen Shot 2023 02 14 at 4.01.53 PM

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

    Screen Shot 2023 02 14 at 4.24.28 PM

    • Video Included: Video Included
  • Copying and Pasting from Excel to a Joomla Article (Joomla! 4)

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

      copypaste3
    • 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):

      copypaste2
    • To save your changes and continue editing the article, click the Save button to the upper left: Save button
    • When you are done editing the article, click the Save & Close button to the upper left: Save & Close button

    Table Formatting

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

     

  • Copying and Pasting Text from MS Word (Joomla! 4)

    • How to video:

    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:copypaste1

    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):copypaste2

    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: Save button

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

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

      copypaste3
    • 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):

      copypaste2
    • To save your changes and continue editing the article, click the Save button to the upper left: Save button
    • When you are done editing the article, click the Save & Close button to the upper left: Save & Close button
    • Video Included: Video Included
  • Creating a "JEvents - Latest Events Module" (Joomla! 4)

    • How to video:

    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:

     

    Procedure

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

    1. Go to Components > Modules:

      JEvents Module
    2. Select the New button from the top left of the page: New button
    3. Select "JEvents - Latest Events Module" as the type of module from the list:JEvents Module 1
    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.JEvents Module 2
    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).JEvents Module 3
    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.JEvents Latest Events Module options

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

     

    • Video Included: Video Included
  • Creating a Button Link (Joomla! 4)

    • How to video:

    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.

    Screenshot 2020 04 28 15.46.37

    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. 

    Capture

    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

    link add button class

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

    • Video Included: Video Included
  • Creating a Category (Joomla! back-end) (Joomla 4)

    • How to video:

    Categories can be thought of as folders that hold your articles. Categories can contain not only articles, but also additional categories (called subcategories). A category that contains subcategories is said to be the "parent" of those subcategories

    Create Category

    1. From the Joomla! Home Dashboard, click on Article Categories under "Site", and then click on the New button once on the "Articles: Categories" page 

    or

    2. Hover over the Categories item under the "Content" tab on the left; then click on the plus sign item that appears next to Categories

    Create Category

    Category Page Details

    • Enter a title for your category in the "Title" field
    • Enter an optional Category Description in the text area under "Description"
    • If the category should be a subcategory of another category, select the other category from the Parent dropdown menu to the right.
    • When completed working with the category, click Save & Close

    Create Category2

    • Video Included: Video Included

Page 1 of 4