Difference between revisions of "Articles: Edit"

Latest revision as of 12:01, 1 December 2020

Description

This screen is used for editing a new or existing Article, usually using a Wysiwyg editor. The default editor is TinyMCE but if other editors are installed the default editor may be set to something else for the site as a whole or for individual users.

Most parameters have suitable defaults but you might wish to set a specific Category or provide article-specific Metadata.

How to Access

To add a new article, starting from the Administrator menu:

• Select Home Dashboard → Site panel → Articles + button. Or...
• Select Content → Articles + button. Or...
• Select Content → Articles. Then...
  • Select the New button in the Toolbar.

To edit an existing article, starting from the Articles list:

• Select an article Title in the list of Articles.

Screenshot

• The Articles: New and Articles: Edit screens have similar toolbar buttons.
• The Articles: New does not have the Save as Copy or Versions toolbar buttons.

Form Fields

• Title. The Title for this item. This may or may not display on the page, depending on the parameter values you choose.

• Alias. The internal name of the item, also used in the URL when Site Global Configuration SEO Setting is activated. Normally, you can leave this blank and Joomla! will fill in a default value. The default value is the Title or Name in lower case and with dashes instead of spaces. You may enter the Alias manually. The Alias should consist of lowercase letters and hyphens (-). No blank spaces or underscores are allowed. Non-Latin characters can be allowed in the alias if you set the Unicode Aliases option to Yes in the Site Global Configuration SEO settings. If this option is set to No and the title includes non-Latin characters, the Alias will default to the current date and time (for example "2012-12-31-17-54-38").

Content Tab

• Article Text. This is where you enter the contents of the article. The editor you use depends on the settings for your site and your user. Joomla core includes three editor options: TinyMCE (the default), Code Mirror, and None.

Contact: This button opens a modal window that allows you to easily create a link to any contact on the current site. The link is created using the Contacts title as the link text. The modal window is the same as for selecting a contact for a Single Contact Menu Item. 

To create a link to the desired contact:
* Place the cursor at the point in the article where you want the linked contact title to be inserted.
* Click on the Contact button to open the modal window.
* Click on the title to select the desired contact in the modal window. You can use the filters and search to help find the desired contact.
* A link with the contacts title will be inserted at the current cursor location.
* If needed, you can edit the link text.

Right Panel

• Status. The published status of this item.
  • Published: Item is visible in the front end of the site.
  • Unpublished: Item is will not be visible to guests in the front end of the site. It may be visible to logged in users who have edit state permission for the item.
  • Archived: Item will no longer show on blog or list menu items.
  • Trashed: Item is deleted from the site but still in the database. It can be permanently deleted from the database with the Empty Trash function in Article Manager.

• Category. Select the Category for this Article from the drop-down list box.

• Featured. Yes/No. Select Yes if item will be shown in the Featured menu item. Select No otherwise.

• Access. Select the viewing access level for this item from the list box. The access levels that display will depend on the what has been set up for this site in Users→Access Levels. Note that access levels are separate from ACL permissions. Access levels control what a user can see. ACL permissions control what actions a user can perform.

• Language. Select the language for this item. If you are not using the multi-language feature of Joomla, keep the default of 'All'.

• Tags. Assign tags to content items. You may select a tag from the pre-defined list or enter a new tag by typing the name in the field and pressing enter.

• Version Note. Optional field to identify this version of the item in the item's Version History window.

Images and Links Tab

This section lets you display images and links in your articles using standardized layouts.
Note: This can be hidden by a user with Admin permissions in the Article Manager Options.

• Intro Image. Click the Select button to select an image to be displayed in a fixed location in the Intro Text of an article. This will open a modal window that allows you to select an image from your images folder. See Editor Buttons for more information on working with images. After you have selected an image, you can hover the mouse on the "Preview" text to see a preview of the image.
• Image Description (Alt Text). Set the alt attribute for this image. A few descriptive words for screen readers.
• No Description. Check in the rare instance of a purely Decorative Image - no description required. Note that if the Image Description is empty and the No Description checkbox is unchecked then the image will fail to meet accessibility criteria. If an image description is present this check box has no effect.
• Image Class. Set if you wish to apply your own custom class to the image.
• Caption. Create a caption for the this image.

• Full Article Image. Click the Select button to select an image to be displayed in a fixed location in the Full Text of an article. This will open a modal window that allows you to select an image from your images folder. See Editor Buttons for more information on working with images. After you have selected an image, you can hover the mouse on the "Preview" text to see a preview of the image.
• Image Description (Alt Text). Set the alt attribute for this image. A few descriptive words for screen readers.
• No Description. Check in the rare instance of a purely Decorative Image - no description required. Note that if the Image Description is empty and the No Description checkbox is unchecked then the image will fail to meet accessibility criteria. If an image description is present this check box has no effect.
• Image Class. Set if you wish to apply your own custom class to the image.
• Caption. Enter an optional caption for the this image.

• Link A. The URL for the first link to be displayed in a fixed location in the article text. This must be a full URL, not relative. For example, it normally would start with "http://".
• Link A Text. The text used for Link A. If blank, the URL will be displayed.
• URL Target Window. Sets the default value for the target for the first Link in the article. Choices are:
  • Open in parent window: Opens the in the main browser window, replacing the current Joomla article.
  • Open in new window: Opens the link in a new browser window.
  • Open in pop up: Opens the link in a pop-up browser window (without full navigation controls).
  • Modal: Opens the link in a modal pop-up window.

• Link B. The URL for the second link to be displayed in a fixed location in the article text. This must be a full URL, not relative. For example, For example, it normally would start with "http://".
• Link B Text. The text used for Link B. If blank, the URL will be displayed.
• URL Target Window. The target for the URL. Same options as Link A.

• Link C The URL for the third link to be displayed in a fixed location in the article text. This must be a full URL, not relative. For example, For example, it normally would start with "http://".
• Link C Text The text used for Link C. If blank, the URL will be displayed.
• URL Target Window. The target for the URL. Same options as Link A.

Options Tab

Note: This tab can be hidden by users with Admin Permission for the Articles list. This is a set of options you can use to control how this article will show in the Featured or Category blog layout. Joomla allows you to set these options at the following levels:

1. In Articles→Options
2. When you set up a Category Blog or Featured Articles menu item.
3. When you create the article here.

When you create the blog menu item, you can set each of these options as follows:

• Use Global: Uses the setting from Articles→Options
• Yes/No or Hide/Show: Use the setting in that menu item.
• Use Article Settings: Use the setting set here for the specific article. This allows you to show different articles with different options in the same blog page. For example, one article might show the author and a different article might not show the author.

The following Article Options can be set:

• Layout. Use a layout from the supplied component view or overrides in the templates.

• Show Title. (Use Global/Hide/Show). Whether or not to show the Article's Title.

• Linked Titles. (Use Global/No/Yes). If the Article's Title is shown, whether to show it as a link to the article.

• Tags. Enter one or more optional tags for this item. You can select existing tags by entering in the first few letters. You may also create new tags by entering them here. Tags allow you to see lists of related items across content types (for example, articles, contacts, and categories).

• Show Intro Text. (Use Global/Hide/Show). If set to Show, the Intro Text of the article will show when you drill down to the article. If set to Hide, only the part of the article after the "Read More" break will show.

• Position of Article Info. (Use Global/Use Article Settings/Above/Below/Split). Puts the article information block above or below the text or splits it into two separate blocks. One block is above and the other is below.

• Article Info Title. (Use Global/Hide/Show). Displays the 'Article Info' title on top of the article information block.

• Show Category. (Use Global/Hide/Show). Whether or not to show the Article's Category.

• Link Category. (Use Global/No/Yes). If the Article's Category is shown, whether to show it as a link to a Category layout (list or blog) for that Category.

• Show Parent. (Use Global/Hide/Show). Whether or not to show the Article's Parent Category.

• Link Parent. (Use Global/No/Yes). If the Article's Parent Category is shown, whether to show it as a link to a Category layout (list or blog) for that Category.

• Show Associations. Multilingual only. If set to Show, the associated articles flags or URL Language Code will be displayed.

• Show Author. (Use Global/Hide/Show) Whether to show the author of the Article.

• Link Author. (Use Global/No/Yes). If the Article's author is shown, whether to show it as a link to a Contact layout for that author. Note that the author must be set up as a Contact in Contact Manager: Edit.

• Show Create Date. (Use Global/Hide/Show). Whether or not to show the Article's create date.

• Show Modify Date. (Use Global/Hide/Show). Whether or not to show the Article's modify date.

• Show Publish Date. (Use Global/Hide/Show). Whether or not to show the Article's start publishing date.

• Show Navigation. (Use Global/Hide/Show). Whether or not to show a navigation link (for example, Next or Previous article) when you drill down to the article.

• Show Icons. (Use Global/Hide/Show). If set to Show, Print and Email will use icons instead of text.

• Show Print. (Use Global/Hide/Show). Show or Hide the Print Article button.

• Show Email. (Use Global/Hide/Show). Show or Hide the Email Article button.

• Show Voting. (Use Global/Hide/Show). Whether or not to show the a voting icon for the article.

• Show Hits. (Use Global/Hide/Show). Show or Hide the number of times the article has been hit (displayed by a user).

• Show Unauthorised Links. (Use Global/No/Yes). If Yes, the Intro Text for restricted articles will show. Clicking on the "Read More" link will require users to log in to view the full article content.

• Positioning of the Links. (Use Global/Above/Below). If Above, links are shown above the content. Otherwise they are shown below the content.

• Read More Text. Optional field that allows you to customize the text that shows for a "read more" link. The default wording for English is "Read more".

• Browser Page Title: Optional text for the "Browser page title" element to be used when the article is viewed with a non-article menu item. If blank, the article's title is used instead.

Fields Tab

Note: This slider can be hidden by users with Admin Permission for the Articles list. This section shows the custom fields which are defined for this article. Tutorial: Adding custom fields.

Publishing Tab

Note: This tab can be hidden by users with Admin Permission for the Articles list.

This section allows you to enter parameters and metadata for this Article. Metadata is information about the Article that is not displayed but is available to Search Engines and other systems to classify the Article. This gives you more control over how the content will be analyzed by these programs. All of these entries are optional. Metadata is shown inside HTML meta elements.

These entries are optional. Joomla! automatically creates default entries for these values.

• Start Publishing. Date and time to start publishing. Use this field if you want to enter content ahead of time and then have it published automatically at a future time.

• Finish Publishing. Date and time to finish publishing. Use this field if you want to have content automatically changed to Unpublished state at a future time (for example, when it is no longer applicable).

• Created Date. This field defaults to the current time when the Article was created. You can enter in a different date and time or click on the calendar icon to find the desired date.

• Created By. Name of the Joomla! User who created this item. This will default to the currently logged-in user. If you want to change this to a different user, click the Select User button to select a different user.

• Created by Alias. This optional field allows you to enter in an alias for this Author for this Article. This allows you to display a different Author name for this Article.

• Modified Date: (Informative only) Date of last modification.

• Modified By: (Informative only) Username who performed the last modification.

• Revision. (Informative only) Number of revisions to this item.

• Hits. The number of times an item has been viewed.

• ID. This is a unique identification number for this item assigned automatically by Joomla!. It is used to identify the item internally, and you cannot change this number. When creating a new item, this field displays 0 until you save the new entry, at which point a new ID is assigned to it.

• Meta Description: An optional paragraph to be used as the description of the page in the HTML output. This will generally display in the results of search engines. If entered, this creates an HTML meta element with a name attribute of "description" and a content attribute equal to the entered text.

• Meta Keywords: Optional entry for keywords. Must be entered separated by commas (for example, "cats, dogs, pets") and may be entered in upper or lower case. (For example, "CATS" will match "cats" or "Cats"). Keywords can be used in several ways:
  • To help Search Engines and other systems classify the content of the Article.
  • In combination with Banner tags, to display specific Banners based on the Article content. For example, say you have one Banner with an ad for dog products and another Banner for cat products. You can have your dog Banner display when a User is viewing a dog-related Article and your cat Banner display for a cat-related Article. To do this, you would:
    • Add the keywords 'dog' and 'cat' to the appropriate Articles.
    • Add the Tags 'dog' and 'cat' to the appropriate Banners in the Banner Manager New/Edit screen.
    • Set the Banner module Parameter 'Search By Tags' to 'Yes' in the Banner Module Edit screen.
  • For articles only, in combination with the Related Articles module, to display Articles that share at least one keyword in common. For example, if the current Article displayed has the keywords "cats, dogs, monkeys", any other Articles with at least one of these keywords will show in the Related Articles module.

• Key Reference: Used to store information referring to an external resource.

• Robots: The instructions for web "robots" that browse to this page.
  • Use Global: Use the value set in the Component→Options for this component.
  • Index, Follow: Index this page and follow the links on this page.
  • No index, Follow: Do not index this page, but still follow the links on the page. For example, you might do this for a site map page where you want the links to be indexed but you don't want this page to show in search engines.
  • Index, No follow: Index this page, but do not follow any links on the page. For example, you might want to do this for an events calendar, where you want the page to show in search engines but you do not want to index each event.
  • No index, no follow: Do not index this page or follow any links on the page.

• Author: Optional entry for an Author name within the metadata. If entered, this creates an HTML meta element with the name attribute of "author" and the content attribute as entered here.

• Rights. Describe what rights others have to use this content.

• External Reference. An optional reference used to link to external data sources. If entered, this creates an HTML meta element with a name attribute of "xreference" and a content attribute equal to the entered text.

Configure Edit Screen Tab

Note: This tab by default is only visible to those with Admin permissions for the Articles list. On some installations you may need to save the Content Options in order for these options to work.

• Show Publishing Options. (Use Global/No/Yes). If No, the Publishing Options tab in this screen (Articles: Add/Edit Screen) will not show. This means that back-end users will not be able to edit the fields Created by, Created by alias, Created Date, Start Publishing, or Finish Publishing. These fields will always be set to their default values.
• Show Article Options. (Use Global/No/Yes). If No, the Article Options tab in this screen (Articles: Add/Edit Screen) will not show. This means that back-end users will not be able to edit the fields in this tab. These fields will always be set to their default values.
• Administrator Images and Links. (Use Global/No/Yes). If Yes, the Images and Links will show in this screen (Articles: Add/Edit Screen).
• Frontend Images and Links. (Use Global/No/Yes). If Yes, the Images and Links fields will show in the Front End article editor screen. These fields allow users to optionally enter two images and three links in an easy-to-use form in the front end. When used with a single-article override, this can allow the site administrator to create a simple form for users to create standard article layouts.

Permissions Tab

Joomla lets you set permissions for articles at four levels, as follows.

1. Globally, using Global Configuration.
2. For all articles, using Articles→Options.
3. For all articles in a category, using Category.
4. For an individual article, using this screen.

This is where you can enter permissions for this one article. The screen shows as follows.

To change the permissions for this article, do the following.

1. Select the Group by clicking its title.
2. Find the desired Action. Possible Actions are:

   Delete. Users can delete this article.

   Edit. Users can edit this article.

   Edit State. User can change the published state and related information for this article.

3. Select the desired permission for the action you wish to change. Possible settings are:

   Inherited. Inherited for users in this Group from the Global Configuration, Articles Options, or Category permissions.

   Allowed. Allowed for users in this Group. Note that, if this action is Denied at one of the higher levels, the Allowed permission here will not take effect. A Denied setting cannot be overridden.

   Denied. Denied for users in this Group.

4. Click Save. When the screen refreshes, the Calculated Setting column will show the effective permission for this Group and Action.

Article Editors

TinyMCE Editor

TinyMCE is the default editor for both front-end and back-end users. TinyMCE is a WYSIWYG (what you see is what you get) editor that allows users a familiar word-processing interface to use when editing Articles and other content. TinyMCE can be configured with three different sets of toolbar buttons: Set 0, Set 1, and Set 2. This is set as an option in the Plugins list help page for the 'Editor - TinyMCE' plugin. Set 0 is the most extended toolbar and is by default assigned to the Administrator, Editor and Super Users. Set 1 is assigned to the Manager end Registered. Set 2 is assigned to Public.

Set 1 Toolbar

The set 1 toolbar provides a three-row (depending your screen) toolbar as shown below:

This is the default setting for Manager and Registered. The 3-row toolbar provides many standard editing commands, as follows:

Top Row.

• Buttons in the upper left allow you to make text bold, italic, underlined, or strikethrough. Next to that are buttons for align left, right, center, and full.
• Styles. Caption and System Pagebreak styles can be set. Highlight the desired text and select the style. This will allow this text to be formatted based on CSS rules.
• Format. Select pre-defined formats for Paragraph, Address, Heading1, and so on.
• Unordered List, Ordered list, Outdent (move left) and Indent (indent right).
• Undo (Ctrl+Z) and Re-do (Ctrl+Y).

Second Row.

• Insert/Edit Link. To insert or edit a link, select the linked text and press this button. A popup dialog displays that lets you enter details about the link.
• Unlink. To remove a link, highlight the linked text and press this button.
• Insert/Edit Anchor. An anchor is a bookmark inside an article that lets you link directly to that point in the article. To insert an anchor, move the cursor to the desired location within the article and click this button. A window will display. Enter the name of the Anchor and press Insert. A small anchor icon will show in the location of the anchor. You can edit the name of the anchor by clicking on it and pressing this button. You can delete the anchor just by selecting it and pressing the Delete key.
• Edit HTML Source. A popup displays showing the HTML source code, allowing you to edit the HTML source code.
• Insert Horizontal Ruler.
• Insert New Table, Table Row Properties, Table Cell Properties, Insert Row Before, Insert Row After, Delete Row, Insert Column Before, Insert Column After, Delete Column, Split Merged Table Cells, Merge Table Cells.
• Subscript, Superscript, Insert Custom Character
• Cut, Copy, Paste, Paste as Plain Text, Paste from Word. Often when copying and pasting text from other sources, such as PDF files, Word documents, or web pages, the selected text contains formatting information that is not needed or wanted. Using the Paste as Plain Text will strip out all formatting from the text. Paste as Word tries to preserve some of the formatting while stripping out unnecessary formatting.
• Preview text in popup
• Insert Module, Menu, Contact, Field. In a popup you can choose the item you want to insert.

Third Row.

• Insert Article, Image, Page Break, Read More. In a popup you can choose the item you want to insert.

Set 2 Toolbar

The set 2 toolbar provides one row of buttons as shown below.

First Row.

• Buttons allow you to make text bold, italic, underlined, or strikethrough.
• Undo (Ctrl+Z) and Re-do (Ctrl+Y).
• Unordered list, Ordered list.
• Cut, Copy, Paste, Paste as Plain Text, Paste from Word. Often when copying and pasting text from other sources, such as PDF files, Word documents, or web pages, the selected text contains formatting information that is not needed or wanted. Using the Paste as Plain Text will strip out all formatting from the text. Paste as Word tries to preserve some of the formatting while stripping out unnecessary formatting.
• Insert Field, Image, Read More. In a popup you can choose the item you want to insert.

Set 0 Toolbar

The set 0 toolbar provides the most extensive editing options, as shown below.

This option provides all of the same buttons as documented in the Set 1 (Advanced) Toolbar above. In addition, the following options are available:

First Row.

• Font Family. Select the desired font.
• Font Size. Select the desired font size.
• Find and Find/Replace.

Second Row.

• Select Text Color or Background Color.
• Toggle Full Screen Mode.
• Insert New Table, Table Row Properties, Table Cell Properties, Insert Row Before, Insert Row After, Delete Row, Insert Column Before, Insert Column After, Delete Column, Split Merged Table Cells, Merge Table Cells.
• Insert Emotions.
• Insert Embedded Media. To insert embedded media (such as Flash), place the cursor at the desired location and press this button. A popup dialog will display that allows you to enter the Type, File or URL, and other information about the media.
• Insert horizontal line.
• Direction Left to Right and Direction Right to Left. These buttons allow you to enter or change the text direction, for example for languages that read right to left.
• Cut, Copy, Paste, Paste as Plain Text, Paste from Word. Often when copying and pasting text from other sources, such as PDF files, Word documents, or web pages, the selected text contains formatting information that is not needed or wanted. Using the Paste as Plain Text will strip out all formatting from the text. Paste as Word tries to preserve some of the formatting while stripping out unnecessary formatting.

Third Row.

• Show/Hide Visual Control Characters (like paragraph endings).
• Show/Hide Block Elements.
• Insert Non-Breaking Space Character.
• Block Quote.
• Insert Predefined Template Content.

Accessibility

TinyMCE is compatible with screen readers such as JAWS and NVDA. You can use it effectively even if you don't use the mouse. To use the editor's toolbar, use the following keyboard shortcuts:

• [ALT + F9] Move focus and jump to menu bar
• [ALT + F10] Move focus and jump to toolbar
• [ALT + F11] Move focus and jump to element path
• [ESC] Close menu/submenu/dialog (also gets you back to editor area)
• [Tab]/[Arrow] Navigate left/right through menu/toolbar

See for more information: TinyMCE - Accessibility

Code Mirror Editor

The CodeMirror editor is designed to make it easy to enter HTML code in an article or description. CodeMirror supports syntax highlighting and auto-completion, as shown in this screenshot.

CodeMirror offers some of the same advantages of using No Editor, but makes it somewhat easier to work with raw HTML code.

No Editor

If 'No editor' is selected for a User, then a simple text editor displays. This allows you to enter in raw, unformatted HTML. You can use the toolbar 'Preview' button to preview how the HTML will display.

Note that the 'No Editor' option can be useful if you are entering in 'boilerplate' or custom HTML, for example to create a PayPal link. TinyMCE automatically re-formats and strips some HTML when a file is saved. This can cause complex HTML to not work correctly.

If this happens, you can temporarily change the editor to 'No Editor' and create the desired content. Note that if you wish to edit this content in the future, you should be careful to change your editor to 'No Editor'. Otherwise, if you open and save the content with TinyMCE, you may lose your custom HTML.

Toolbar

At the top of the page you will see the toolbar shown in the Screenshot above. The functions are:

• Save. Saves the article and stays in the current screen.

• Save & Close. Saves the article and closes the current screen.

• Save & New. Saves the article and keeps the editing screen open and ready to create another article.

• Save as Copy. Saves your changes to a copy of the current article. Does not affect the current article. This toolbar icon is not shown if you are creating a new article.

• Cancel. Closes the current screen and returns to the previous screen without saving any modifications you may have made. Or

• Close. Closes the current screen and returns to the previous screen without saving any modifications you may have made.

• Versions. Opens the Item Version History window to show any prior versions of this item. This allows you to view older versions of this item and, if desired, restore from an older version. See Version History for more information.

• Preview. Opens a modal dialog showing a site view of this article.

• Associations. With a specific language set for an article, allows side by side editing in another language.

• Help. Opens this help screen.

Quick Tips

• There are two methods to insert an image into article using the TinyMCE editor. The CMS Content drop down list provides access to the Media screen that lets you browse image files and upload images. The Insert drop down is a simple form for which you need to know the image url. It is used for external images.
• 'Read more...' breaks allow you to save space on the Front Page or on any blog layout page by showing just the first portion of an Article. 'Pagebreaks' allow you to provide multi-page navigation for long Articles. You can use both on one Article, if desired. For example, you could put a 'Read more...' break after the first paragraph of a multi-page article, and have Pagebreaks after each page. No page navigation would display on the Front Page until the User selects the 'Read more...' link. At that time, the Article's table of contents would display showing links to every page.
• You can insert a Joomla! Module inside an Article by typing "{loadposition xxx}", where "xxx" is the position entered for the desired Module. Note that the position name must not conflict with a position used by your Joomla! template. It can be any name (e.g., "mymoduleposition1") as long as it matches the position name typed in for the Module. The Menu Assignment for the Module must include the Menu Item where the Article is displayed, and the Plugin called "Content - Load Module" must be enabled (which it is by default). This feature allows you, for example, to insert a Custom HTML Module anywhere in an Article.
• To set options for the TinyMCE editor: TinyMCE Editor Plugin
• To set options for the CodeMirror editor: CodeMirror Editor Plugin

Related Information