articles

articles

  • 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 an article [Joomla 3.x]

    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.

     

  • Adding Read More (to show Intro Text in Category Blog)

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

      Click within article, then click "Read More" button

    4. A horizontal line will appear within the article where you placed the cursor (see below):
      "Read More" separator line
    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.
  • 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
  • Article Versions

    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 workorder 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, to the right:

    Versions button: Joomla! back end

    Joomla! Front End Editor

    The Versions button is below the article editing area:

    Versions button: Joomla! front end

    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 "Item Version History" popup window (see #2 below):

      Restoring a version
    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:

      compare view

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

      Versions: Keep a version forever


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

     

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

    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:

    Selecting article title in back end
    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.

     Editing article in Joomla! back end

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

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

    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 to edit your article: or 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.

     Article editing via front end

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

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

    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.

    New Article 1

    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.

    Adding New Article 5

    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.

  • 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
  • Checking responsiveness (mobile friendliness) of content

    Web browsers include "developer tools" to assist with creating and troubleshooting web content.  These tools are free but are not visible by default.

    To enable developer tools from a browser's menu options follow instructions below.

    • Firefox:Menu  Web Developer ➤ Toggle Tools, or Tools ➤ Web Developer ➤ Toggle Tools
    • Chrome: More tools ➤ Developer tools
    • Safari: Develop ➤ Show Web Inspector. If you can't see the Develop menu, go to Safari ➤ Preferences ➤ Advanced, and check the Show Develop menu in menu bar checkbox. 
    • Opera: Developer ➤ Developer tools

    When the developer tools appear (under a menu bar at the bottom of the web page), click the “Toggle device toolbar” icon to the left of Chrome’s Developer Tools Menu:

    toggle

    or “Responsive Design Mode” to the right of Firefox’s Web Developer Tools menu:

    responsive

    A responsive site will be readable without the need to swipe left and right:

    readable

    A non-responsive site will have very small text, and/or will require you to swipe left and right as well as up and down to view content:

    nonresponsive

  • Copying an Existing Article

    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.

    New Article 1

    3. Find the article you want to copy, then click on its title.

    4 Click "Save as Copy" 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).

    Copy an existing article

  • 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

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

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

      "Paste" popup window
    • 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 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

    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:

    Paste as plain text

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

    Paste as plain text popup window

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

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

      "Paste" popup window
    • 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
  • 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 Category (Joomla! back-end)

    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! Control Panel, click on Categories under "Content" to the left, and then click on the New button once on the categories page 

    or

    2. Hover over the Categories item under the "Content" tab at the top; then click on the Add New Category 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

Page 1 of 4