How to/Web Development/Joomla/Versions/Joomla 4.x

How to/Web Development/Joomla/Versions/Joomla 4.x

  • About the SAS Website Template (Joomla! 4)

    • How to video:

    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.

    Screenshot 2023 03 24 at 12.15.08 PM 

     

     

    • Video Included: Video Included
  • Adding an image to an article (Joomla 4)

    • How to video:

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

      Screen Shot 2023 02 28 at 3.23.20 PM
    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:

      Image Manager: Select folder, Upload new image
    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):

      Upload image

    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:

      Image Manager: Select image
    8. Set the image properties (dimensions, border, margins, etc) as needed:

      Image Manager: Image properties
    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:

      Adding image caption
    11. Click Insertwhen all properties have been set.
    12. Save & Close the article.

     

    • Video Included: Video Included
  • Adding an Image to Media (Joomla 4)

    • How to video:

    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):
      Screen Shot 2023 02 28 at 3.57.25 PM
    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):Media Folder Selection
    4. Once you have selected the folder where you want to upload the image, click the Upload button to the upper left: Screen Shot 2023 02 28 at 3.59.53 PM
    5. Click the Choose Files button below the Thumbnail View and Detail View buttons:       Choose Files button
    6. Use the File Upload window to browse to your image file.  When you find the image, click once on the image, then click Open:Media: File upload dialog box 
    7. Click the Start Upload button to the right of the Browse button to upload your image: Media Manager: "Start Upload" button
    8. 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:Media: "Upload Complete" message
    9. You can now insert your image into an article.
    • Video Included: Video Included
  • Adding Menu Modules (Joomla! 4)

    • How to video:

    Overview

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

    Example of a right side menu module that displays the same menu items as a dropdown menu item list from the Main Menu

    Procedure

    1. In the Joomla! control panel (back end), navigate to Extensions > Modules, then click the New button to create a new module:



    2. For "Select a Module Type," select "Menu"
    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 "Select Menu," select the menu to be displayed
      • For "Start Level," select "2."  This will display the dropdown menu item list corresponding to the menu assignment (selected later in this procedure)
      • For "Show Title," click Show
      • For "Position," select "sidebar-b" (this is the right side of the web page)
      Configure Module Options
    5. Click the "Menu Assignment" tab:
      "Menu Assignment" tab
    6. Change "Module Assignment" to "Only on the pages selected"
    7. For "Menu Selection," click the "None" link shown after "Select: All,"
    8. 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 "People" dropdown list, check off the menu items under "People:"
      Selecting the menu items under "People" on the "Menu Assignment" tab
    • Video Included: Video Included
  • Checklist for SAS Academic Websites (Joomla! 4)

    • How to video:

    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,
    Kara Donaldson, 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.

    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
      The most recent departmental learning goals we have on file for you can be found here.
    • 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.

    • Video Included: Video Included
  • Configure Menu Item to Display Articles in Article Order (Joomla! 4)

    • How to video:

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

      Category Blog menu item: "Blog Layout" tab
    6. Click Save & Close to the upper left: Save & Close

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

      Category List Menu item: "List Layouts" Tab
    6. Click Save & Close to the upper left: Save & Close
    • Video Included: Video Included
  • Create a Branded YouTube Channel and Videos (Joomla! 4)

    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: 2048 x 1152 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.” (https://support.google.com/youtube/answer/2972003?hl=en&co=GENIE.Platform%3DDesktop#zippy=%2Cchange-your-banner-image )
        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: https://www.youtube.com/watch?v=bVPjcLL9jGM
    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. https://communications.rutgers.edu/services-resources/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

          youtube getting started 1

        3. Click “Upload video” from the dropdown menu

          youtube getting started 2

        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.

          youtube getting started 3

          youtube getting started 4

      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: https://sasit.rutgers.edu/how-to-guides/web-development-documentation/web-development/116-joomla-3-x/video/358-displaying-youtube-video-within-an-article-or-module-joomla-3-x#displaying-a-video-within-a-custom-module
      2. If the video is attached to a “course,” etc, reach out to the SAS IT webdevelopment team for assistance through the Rutgers IT Help request system.
      3. Upload a gallery of videos
  • Creating an "Articles - Newsflash" module to display content (Joomla!4)

    • How to video:

    Overview

    An "Articles - Newsflash" module can display text from one or more articles.  The ordering can be set to random, so that each time you visit the page where the module is displayed, it will show content from a different article.

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

      Creating a new module
    2. For "Select a Module Type," select "Articles - Newsflash"
      Screenshot 2023 03 21 at 2.30.10 PM
    3. Enter the name of the module in the "Title" field.
    4. Under "Position," click the dropdown menu, and select the desired module position.  For example, to display the module to the right of the content area, select "Sidebar-b [sidebar-b]"
    5. Configure the options for the module:
      • For "Category," select the category or categories whose articles will be displayed (see #1 below)
      • Change "Show Images" to "Yes" if images from the articles should be displayed in the module (see #2 below)
      • For "'Read more...' Link", click "Show" if you would like to display a "Read more" link that links to the full article (see #3 below)
      • For "Number of Articles," enter the number of articles to be displayed by the module (see #4 below)
      • For "Order Results," select how the articles should be ordered (see #5 below).  The options are:
        • Published Date
        • Created Date
        • Modified Date
        • Ordering (i.e. article ordering)
        • Hits (number of hits)
        • Random

      • Screenshot 2023 03 21 at 2.31.59 PM
    6. By default, Joomla! will assign the new module to all pages.  To display the module only on selected pages, follow the documentation for Assigning a Module to one or more menu items.
    7. When done, click Save & Close to the upper left: Screenshot 2023 03 21 at 2.37.46 PM
    • Video Included: Video Included
  • Creating an RU Courses Module (Joomla! 4)

    • How to video:

    Overview

    The RU Courses module displays the course schedule for a specific subject, or courses by course ID number.

    Below is a sample display of the RU Courses Module:

    Sample of the RU Courses Module

    Procedure

    1) Create a new RU Courses Module.

    • Go to Extensions --> Modules and click New.
    • From the list of choices of module types, select "Rutgers Course List".

    Select a Module Type: Rutgers Course List

    2) Configure the new module.

    • Enter a "Title" for the module - for example, "Undergraduate Courses" (see #1 below).
    • Select the subject from the "Subject" dropdown menu (see #2 below).
    • Select "Undergraduate" or "Graduate" for "Course Level" (see #3 below).
    • If additional courses from other subjects should be displayed, enter the course numbers, separated by commas, in the "Additional Course Listings" (see #4 below).
      • Enter the additional courses with the format schoolnumber:subject:course or schoolnumber:subject:course:section; for example:
        • 01:350:101
        • 01:350:101:01
    • Click the Menu Assignment tab (see #5 below) and set Module Assignment to "No pages".

      Rutgers Course List: module configuration

    • (Optional) To make additional changes, click the "Module" tab, then change "Override global settings" to "Use custom settings for this module (more options will show when this is selected)." 

      Overriding global settings in the RU Courses module
    • You can then show (by checking) or hide (by unchecking) the following options:
      • Show Section Notes
      • Show Section Subtitles
      • Show Section Comments
      • Show Index Numbers
      • Show CORE Codes & PreReqs
      • Hide Fall Semester
      • Hide Winter Semester
      • Hide Spring Semester
      • Hide Summer Semester
    • When done, click Save & Close.

    3) Create a new Joomla! article to embed the module.

    This article only needs a short line of code to display the module.

    • Create an article in the Joomla! back-end or the front-end.
    • To embed the module, 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):

      Click the "Module" button below the text area
    • 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 "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 below example, the arrow indicates that we are clicking the button with the number "1252," which corresponds to the module with title "Undergraduate Course List."

      Click the Module ID number
    • Once selected, "Insert Module" window will close and you will see a bit of text between curly braces, similar to the following:

      { module 1252 }

      This code embeds the module so that it displays in the article:
      Module embed code within article content area
    • Save & Close the article.

     

    Related:  Upload a syllabus so that it appears as a link in the RU Courses module

    • Video Included: Video Included
  • Creating Anchor Links (Joomla! 3.x)

    This procedure explains how to create anchor links within articles on web sites using Joomla! 3.x.  Anchor links allow you to link to specific text on a page.


    • Type a name for the anchor.  Names for anchors must begin with a letter, cannot contain spaces, and must be unique within articles.
      "Create anchor" dialog box
    • Click Insert.  You will see an anchor icon in front of the text you selected.
    • To create a link from somewhere within the same article:
      • Highlight the text that will be linked to the anchor.
      • Click the Insert/Edit link button on the editing toolbar:

        "Insert/Edit link" button
      • At the bottom of the Link pop-up window, click the Article Anchors dropdown menu (see #1 below).
      • Select the anchor name you entered earlier (see #2 below).
      • Click Insert (see #3 below).

        Insert anchor link
    • To create a link from another article:
      • Save the current article:
        • If you are in the front-end editor, click the Save button to the upper left.
        • If you are in the Joomla! Administrator, click the Save & Close button to the upper left: "Save & Close" button
      • Select the second article to edit following steps 1-3 of Editing Articles or create a new article.
      • Highlight the text that will be linked to the anchor link you created earlier.
      • Click the Insert/Edit link button on the editing toolbar: 

        "Insert/Edit link" button
      • A Link popup window will appear.
      • Under Links, click Content.
      • Click the top-level category that contains the article you want to link to (see #1 below).
      • If your article is in a subcategory, click the arrow to the left of the subcategory containing the article containing your anchor link.  (If the article is in a category several levels down, you may need to repeat this step until you find the article).
      • You should see the anchor link you created listed below the article - click on it (see #2 below).

      • Click Insert (see #3 below).

        Linking to an anchor in a separate article
    • If you are editing the article from the front end of the web site, click the Save button to the upper left to save your changes and close the article.
    • If you are working in the Joomla! Administrator, to save your changes and continue editing the article, click the Save button to the upper left: "Save" button
    • If you are working in the Joomla! Administrator, when you are done editing the article, click the Save & Close button to the upper left: Save & Close button
  • Creating Anchor Links (Joomla! 4.)

    This procedure explains how to create anchor links within articles on web sites using Joomla! 3.x.  Anchor links allow you to link to specific text on a page.


    • Type a name for the anchor.  Names for anchors must begin with a letter, cannot contain spaces, and must be unique within articles.
      "Create anchor" dialog box
    • Click Insert.  You will see an anchor icon in front of the text you selected.
    • To create a link from somewhere within the same article:
      • Highlight the text that will be linked to the anchor.
      • Click the Insert/Edit link button on the editing toolbar:

        "Insert/Edit link" button
      • At the bottom of the Link pop-up window, click the Article Anchors dropdown menu (see #1 below).
      • Select the anchor name you entered earlier (see #2 below).
      • Click Insert (see #3 below).

        Insert anchor link
    • To create a link from another article:
      • Save the current article:
        • If you are in the front-end editor, click the Save button to the upper left.
        • If you are in the Joomla! Administrator, click the Save & Close button to the upper left: "Save & Close" button
      • Select the second article to edit following steps 1-3 of Editing Articles or create a new article.
      • Highlight the text that will be linked to the anchor link you created earlier.
      • Click the Insert/Edit link button on the editing toolbar: 

        "Insert/Edit link" button
      • A Link popup window will appear.
      • Under Links, click Content.
      • Click the top-level category that contains the article you want to link to (see #1 below).
      • If your article is in a subcategory, click the arrow to the left of the subcategory containing the article containing your anchor link.  (If the article is in a category several levels down, you may need to repeat this step until you find the article).
      • You should see the anchor link you created listed below the article - click on it (see #2 below).

      • Click Insert (see #3 below).

        Linking to an anchor in a separate article
    • If you are editing the article from the front end of the web site, click the Save button to the upper left to save your changes and close the article.
    • If you are working in the Joomla! Administrator, to save your changes and continue editing the article, click the Save button to the upper left: "Save" button
    • If you are working in the Joomla! Administrator, when you are done editing the article, click the Save & Close button to the upper left: Save & Close button
  • Creating Anchor Links (Joomla! 4.x)

    This procedure explains how to create anchor links within articles on web sites using Joomla! 3.x.  Anchor links allow you to link to specific text on a page.


    • Type a name for the anchor.  Names for anchors must begin with a letter, cannot contain spaces, and must be unique within articles.
      "Create anchor" dialog box
    • Click Insert.  You will see an anchor icon in front of the text you selected.
    • To create a link from somewhere within the same article:
      • Highlight the text that will be linked to the anchor.
      • Click the Insert/Edit link button on the editing toolbar:

        "Insert/Edit link" button
      • At the bottom of the Link pop-up window, click the Article Anchors dropdown menu (see #1 below).
      • Select the anchor name you entered earlier (see #2 below).
      • Click Insert (see #3 below).

        Insert anchor link
    • To create a link from another article:
      • Save the current article:
        • If you are in the front-end editor, click the Save button to the upper left.
        • If you are in the Joomla! Administrator, click the Save & Close button to the upper left: "Save & Close" button
      • Select the second article to edit following steps 1-3 of Editing Articles or create a new article.
      • Highlight the text that will be linked to the anchor link you created earlier.
      • Click the Insert/Edit link button on the editing toolbar: 

        "Insert/Edit link" button
      • A Link popup window will appear.
      • Under Links, click Content.
      • Click the top-level category that contains the article you want to link to (see #1 below).
      • If your article is in a subcategory, click the arrow to the left of the subcategory containing the article containing your anchor link.  (If the article is in a category several levels down, you may need to repeat this step until you find the article).
      • You should see the anchor link you created listed below the article - click on it (see #2 below).

      • Click Insert (see #3 below).

        Linking to an anchor in a separate article
    • If you are editing the article from the front end of the web site, click the Save button to the upper left to save your changes and close the article.
    • If you are working in the Joomla! Administrator, to save your changes and continue editing the article, click the Save button to the upper left: "Save" button
    • If you are working in the Joomla! Administrator, when you are done editing the article, click the Save & Close button to the upper left: Save & Close button
  • Creating Links in Articles (Joomla! 4.x)

    • How to video:

    This procedure explains how to create links within an article on web sites using Joomla! 3.x.


    Internal links (links to pages on the same website as the current page)

    1. Select an article to edit following steps 1-3 of Editing Articles (Joomla! 3.x).
    2. Highlight the text that will be linked to a second article.
    3. Click the Insert/Edit link button on the editing toolbar: 

      Insert/Edit Link icon
    4. A Link popup window will appear.
    5. Under Links, click Content (see #1 below).
    6. Click the arrow to the left of the top-level category that contains the article you want to link to (see #2 below).
    7. If your article is in a subcategory, click the arrow to the left of the subcategory containing the article.  (If the article is in a category several levels down, you may need to repeat this step until you find the article).
    8. Click once on the name of the article you want to link to.
    9. Click Insert to the bottom of the Link popup window (see #3 below).

      Link one article to another article
    10. Click Save & Close to save the article: Save & Close

    External links (links to pages not on the same website as the current page)

    The procedure is similar to the one demonstrated above.

    • With external links, the target website page can be pasted directly into the URL field in the Link pop-up window. Make sure you include the http:// or https:// prefix of the URL. (See #1 below).
    • Be sure to set the Target to "Open in new window" for links to external websites (See #2 below).Creating an external link

     

    To create a link that appears as a button:

    1. Select the link.
    2. Click on the Styles dropdown menu (to the right of "Format" or "Paragraph" on the editor toolbar).
    3. Then select or type "button".
    4. Your link will look like a button (similar to the picture at the bottom).

    Creating a link as a button / Sample display as a button

    • Video Included: Video Included
  • Displaying a Video Within an Article or Module (Joomla! 4)

    • How to video:

    Uploading the Video

    This procedure assumes the video has already been uploaded to YouTube.  You will need the URL for the video in order to proceed. 

    Displaying the Video

    Displaying a Video within an Article

    • Select an article to edit following steps 1-3 of Editing Articles (Joomla! 4.x), or create a new article.
    • Click somewhere within the Contenttext box and type or paste the YouTube URL for the video you want to display.
    • If the URL is shown as a hyperlink, highlight it, then click the Unlink button (see #1 below)
    • Enter the code "{ youtube }" (without spaces or quotation marks) before the YouTube URL (see #2 below)
    • Enter the code "{ /youtube }" (without spaces or quotation marks) after the YouTube URL (see #3 below)

      Embedding a YouTube video using AllVideos
    • If you are editing the article from the front end of the web site, click the Save button to save your changes.
    • If you are working in the Joomla! Administrator, to save your changes and continue editing the article, click the Save button to the upper left:  Save button
    • If you are working in the Joomla! Administrator, when you are done editing the article, click the Save & Close button to the upper left: Save & Close button

    Displaying a Video within a Custom Module

    • Log on to your site using the Administrator Login URL.
    • Click on "Extensions > Modules":

      Youtube Link2

    • Click on the Title of a "Custom" module to edit it, or follow steps 1 through 8 of Adding a Custom Module (Joomla! 4.x) to create a new Custom HTML module.
    • Click somewhere within the Module text box and type or paste the YouTube URL for the video you want to display.
    • If the URL is shown as a hyperlink, highlight it, then click the Unlink button (see #1 below)
    • Enter the code "{ youtube }" (without spaces or quotation marks) before the YouTube URL (see #2 below)
    • Enter the code "{ /youtube }" (without spaces or quotation marks) after the YouTube URL (see #3 below)
      Embedding a video within a module using AllVideos
    • Click the Options tab below the title of your module, and change Prepare Content to "Yes" (see #2 below).

      Custom module options: Prepare COontent
    • Click Save & Close to the upper left of the web page: Save & Close button
    • Your module will display the video as embedded content.

    Advanced Options: Set height and width of embedded video

    You can add parameters (separated by pipes: "|") after the video URL or video ID to control the width and height of the embedded video. 

    { youtube }VideoID|560|315{ /youtube }    (Note:  Remove spaces surrounding "youtube" and "/youtube".)

    • 560 = width of embedded video will be 560px
    • 315 = height of embedded video will be 315px

    You can also use percentages in place of pixel values:

    e.g. { youtube }VideoID|100%|400{ /youtube }    Note:  Remove spaces surrounding "youtube" and "/youtube".

    • 100% = width of embedded video will be 100% of the available space
    • 400 = height of embedded video will be 400px

    Sample Video Display

    Once you have embedded the video in your article or module, it will look something like this:

    • Video Included: Video Included
  • Edit Courses - Back End (Joomla! 4)

    • How to video:

    This is 'general' information on how you can edit Courses on your website.  If you need further assistance specific to your site, please create a REQUEST so we can assist you.

    1. Login to the back end of your site by using the sites link with /administrator added onto it for example https://amerstudies.rutgers.edu/administrator/

    blogin

    2. Click on Content on the top bar and a menu should pop up where you should click on categories.

    edit backend

    3. Look for the Category that says Course Descriptions and click on the green button with a number in it on the right side.

    green

    4. Choose the course you would like to update.

    choose

    5. Edit Content Tab

    • This contains the TITLE for the article, which is displayed on the website
    • Description content (which may contain detailed information about the article)

    content1

    6. Course Fields Tab

    • This tab contains specifics about the course
    • Each department may have decided to store different details about the course
    • To determine what is needed, check this tab on a course that already exists

    course1

     7. Publishing Tab

    • Here you can change all publishing options.
    • Check a similar course to check how it should be used.

    pub1

    • Video Included: Video Included
  • Edit Courses - Front End (Joomla! 4)

    • How to video:

    This is 'general' information on how you can edit Courses on your website.  If you need further assistance specific to your site, please create a REQUEST so we can assist you.

     1. Login into the front end of the website via the button at the bottom of the website

    .edit frontend

    2. Once logged in scroll down to the User Menu on the left side and click on Edit Course Descriptions. (This may differ depending on your site)

    • If your site does not display a 'user menu' when logged in, please create a REQUEST requesting that we create one for you, and what content you would like to easily edit on the front end.

    course

    3. Click on the Edit button for whichever course you are looking to edit.  edit

    4. Content Tab

    • This contains the TITLE for the article, which is displayed on the website
    • Description content (which may contain detailed information about the article)

    content

    5. Course Fields Tab

    • This tab contains specifics about the course
    • Each department may have decided to store different details about the course
    • To determine what is needed, check this tab on a course that already exists

    coursefields

    4. Publishing Tab

    • This tab contains information about the CATEGORY (which should not be altered)
    • Tags, the tags may vary by department depending on how the information is displayed
    • Check a similar course to determine what tags could be used
    • This also shows if the course is PUBLISHED or NOT PUBLISHED (not published will not appear on the website)

    pub

    • Video Included: Video Included
  • Edit News - Back End (Joomla! 4)

    • How to video:

    This is 'general' information on how you can edit News Items on your website.  If you need further assistance specific to your site, please create a REQUEST so we can assist you.

     1. Login to the back end of your website.

    login backend

    2. Click on categories under content

    .edit backend

    3. Find the news section and click on the specific green button for your news type.edit news

    4. Pick the article you would like to edit.edit news 1

    5. Use the content section to fill out information.edit news 2

    6. Use the images and links sections to choose any options.edit news 3

    7. Use the publishing option to choose any options.edit news 4

    • Video Included: Video Included
  • Edit News - Front End (Joomla! 4)

    • How to video:

    This is 'general' information on how you can edit News Items on your website.  If you need further assistance specific to your site, please create a REQUEST so we can assist you.

    1. Log in to the front end of your website.

    edit frontend

    2. Go to your News section

    news

    3. Choose the news article you want to edit.

    edit news front

    4. Hit the edit button on the rightedit news front 1

    5. Click on content to fill out the information.edit news front 3

    6. Click on publishing to choose the right options.edit news front 2

    • Video Included: Video Included
  • Edit People - Back End (Joomla! 4)

    • How to video:

    This is 'general' information on how you can edit People (Faculty, Staff, Other) on your website.  If you need further assistance specific to your site, please create a REQUEST so we can assist you.

     1. Login at your site's link plus /administrator.

    login backend

    2. Click on Content then Categories

    edit backend

    3. Find the Staff tab and click on the green button on the right side.

    edit people

    4. Choose the person that you would like to edit.edit people 1

    5. Use the content section to fill any necessary information for the person.edit people 2

    6. Use the People Fields Tab to fill the separate sections.edit people 3

    7. Use the publishing tab to fill any extra options.edit people 4

    • Video Included: Video Included
  • Editing a Community Builder profile (Joomla 4)

    How to edit your profile:

    1. Click the Login link located at the "footer" or bottom of the page:

      Login link in Footer menu

    2. Login using your Rutgers NetID and password:

      Rutgers CAS login

    3. Look for a link called "CB Profile Edit," "Edit Profile," "Edit My Profile," or something similar, on either the footer menu or the sidebar (right-side) menu (usually labelled User Menu).  The text and location of the menu item will vary depending on your website's configuration. If you cannot find the link, please submit a REQUEST.  Once you find the link, click on it.  

      Sidebar menu link example:

      Sidebar menu "Edit profile" link

      Footer menu link example:

      Footer menu "Edit profile" link

    4. Edit your profile by entering text in text fields or text boxes, and by selecting items from checkboxes or dropdown menus:

      Community Builder: Edit your details

    5. There may be several tabs containing additional fields you can edit (a group of tabs is shown by area #1 below).  After you make the changes to the fields listed under one tab, click another tab (for example, "Person Details 4" shown by #2 below) to continue editing your profile:

      Community Builder: "Edit your details" page with tabs
    6. When done, click Update at the bottom (#3 above) to save your profile.
    7. Logout from the website by clicking the Logout link in the Footer menu at the bottom of the website:

      Logout link in Footer menu

    Note: If you need to edit someone else's profile you will have to do so through the Administrative Control Panel. If you do not have access you will have to submit a confidential REQUEST requesting your login credentials.

Page 1 of 2