Extension:Title Icon

MediaWiki extensions manual
Title Icon
Release status: stable
Implementation User interface
Description Displays an icon to the left of the page title at the top of the page and in search results. Often used to help users easily recognize pages in a particular category or namespace.
Author(s) Cindy Cicalese (cindy.cicalesetalk)
Latest version 6.1 (2023-06-23)
Compatibility policy Snapshots releases along with MediaWiki. Master is not backward compatible.
MediaWiki 1.35+ (Version 5.2) and master (Version 8.0)
PHP 7.3+
Database changes No
License MIT License
Download
Example sandbox.semantic-mediawiki.org
  • $wgTitleIcon_EnableIconInPageTitle
  • $wgTitleIcon_EnableIconInSearchTitle
  • $wgTitleIcon_CSSSelector
  • $wgTitleIcon_UseFileNameAsToolTip
  • $wgTitleIcon_TitleIconPropertyName
  • $wgTitleIcon_HideTitleIconPropertyName
Translate the Title Icon extension if it is available at translatewiki.net
Issues Open tasks · Report a bug

The Title Icon extension places an icon beside the page title when the title is displayed at the top of the page and when the page is listed in search results. Display of such an icon can help users easily visually detect that a page is in a particular category or namespace. This helps on the page itself, but also helps when trying to pick out the correct page from a list of search results.

The icon is specified in a parser function as a filename of an image file uploaded to the wiki, an OOUI icon, or a Unicode sequence or by a Semantic MediaWiki property value of type Text that is the filename of an image file uploaded to the wiki. The extension looks for the icons defined on the page itself, on the category page of any category to which the page belongs, and on the page in the Project namespace with the name of the page's namespace (e.g. the page Fruit:Apple would have its namespace icon specified on page Project:Fruit with the namespaces localized in the content language and the Main namespace indicated by the value on page MediaWiki:Blanknamespace including the parentheses). Multiple icons will be displayed where multiple icons are assigned to the page (limited to a maximum of five semantic properties on the page itself and its categories). However, if the same icon is specified more than once, it will only be displayed once. File icons are sized to 36 pixels by 36 pixels maintaining its original aspect ratio.

By default, Title Icon will insert the icon in the title at the top of a page for any skin that puts the title in an HTML element with id firstHeading such as the default Vector skin. This can be changed for other skins using the $wgTitleIcon_CSSSelector configuration variable. This approach can also be used to have the Title Icon appear at other places in the page by using a ‎<div> and appropriate choice of $wgTitleIcon_CSSSelector.

Special thanks to Bernadette Clemente for the original idea that inspired this extension and to Keven Ring for an early implementation of this extension.

Installation

edit
  • Download and move the extracted TitleIcon folder to your extensions/ directory.
    Developers and code contributors should install the extension from Git instead, using:cd extensions/
    git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/TitleIcon
  • Add the following code at the bottom of your LocalSettings.php file:
    wfLoadExtension( 'TitleIcon' );
    
  • Create the page for the property defined in $wgTitleIcon_TitleIconPropertyName (default: 'Property:Title Icon') and ensure it [[Has type::Text]].
      Note: The extension will not work without this property-page!
  • Configure as required.
  •   Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

Configuration

edit
Flag Default Description
$wgTitleIcon_EnableIconInPageTitle true Enables/disables the addition icons to the title bar of pages for this wiki.
$wgTitleIcon_EnableIconInSearchTitle true Enables/disables the addition icons to the title of pages listed in search results for this wiki.
$wgTitleIcon_CSSSelector "#firstHeading" Specifies the CSS selector that will be used to locate the page title. The Vector skin uses #firstHeading. The Foreground skin uses h2.title if it's the Foreground skin before December 2015. If it's after that date the CSSSelector is the same as the Vector skin.
$wgTitleIcon_UseFileNameAsToolTip true Only relevant for file type title icons. When set to true, uses the name of the image file without the file extension (i.e up to but not including the first "." and anything following it) as the tooltip when the mouse hovers over the icon. When set to false, the title of the page where the icon was set in the title icon property (either the page itself or one of its category pages or namespace page) will be used instead.
$wgTitleIcon_TitleIconPropertyName "Title Icon" The name of the property of type Text that is used to specify the title icon image file name. NOTE: This property must exist, and it must be of type Text.
$wgTitleIcon_HideTitleIconPropertyName "Hide Title Icon" The name of a property of type Text that can be used to control the display of title icons for a given page.
  • [[Hide Title Icon::category]]: no title icons specified in the title icon property of any categories to which this page belongs will be shown on the title bar of this page or when this page is listed in search results.
  • [[Hide Title Icon::namespace]]: no title icons specified in the title icon property of the namespace page for this page will be shown on the title bar of this page or when this page is listed in search results.
  • [[Hide Title Icon::page]]: no title icons specified in the title icon property on this page will be shown on the title bar of this page or when this page is listed in search results.
  • [[Hide Title Icon::all]]: no title icons will be shown on the title bar of this page or when this page is listed in search results.
  • not set or any value other than those above: title icons specified in the title icon property on this page, in any categories to which this page belongs, and on the namespace page associated with this page's namespace will be shown on the title bar of this page or when this page is listed in search results.

NOTE: The $TitleIcon_UseDisplayTitle and $TitleIcon_DisplayTitlePropertyName parameters were removed in version 2.0 since they duplicate and conflict with functionality provided by the Semantic Title extension.

Parser Functions

edit

Four parser functions were introduced in TitleIcon version 5.0.

titleicon_*

edit

Three parser functions can be used to define title icons on wiki pages:

{{#titleicon_file:<file page>|<optional page to link>}} where <file page> is the name of the file page containing the image (File: namespace will be added to <file page> if it is not included)

{{#titleicon_ooui:<filename>|<optional page to link>}} where <filename> is the OOUI SVG filename without the path, e.g. wikiText.svg

{{#titleicon_unicode:<<translate>Unicode character sequence</translate>>|<<translate>optional page to link</translate>}}

For example, the following results in a title icon of 👩🏾‍💻 linked to the page TestPage displayed on the page's title bar and beside the page title in searches:

{{#titleicon_unicode:&#x1F469;&#x1F3FE;&zwj;&#x1F4BB;|TestPage}}

hidetitleicon

edit

{{#hidetitleicon:<translate><'page', 'category', 'namespace', or 'all'></translate>}} will hide title icons on the current page.

  • page — hide all title icons defined on this page
  • category — hide all title icons defined in all categories this page belongs to
  • namespace — hide all title icons defined on the namespace page (e.g. Project:<namespace>) for this page
  • all — hide all title icons on this page

This can be combined with the semantic property approach to hiding title icons described below. The main difference is that the Semantic MediaWiki approach will work on search results while the parser function only works on the page itself.

Semantic MediaWiki

edit

While this extension does not require Semantic MediaWiki to be installed, if it is installed, Semantic MediaWiki can be used to define file type title icons and hide title icons on pages as shown below.

Category:Title Icon Example:


{{#set:Title Icon=Event.png}}
{{#set:Title Icon=FAQ.png}}

Title Icon Example 1:


{{#set:Title Icon=Report.png}}
{{#set:Title Icon=FAQ.png}}
[[Category:Title Icon Example]]

Title Icon Example 2:


{{#set:Hide Title Icon=all}}
{{#set:Title Icon=Report.png}}
{{#set:Title Icon=FAQ.png}}
[[Category:Title Icon Example]]

Title Icon Example 3:


{{#set:Hide Title Icon=page}}
{{#set:Title Icon=Report.png}}
{{#set:Title Icon=FAQ.png}}
[[Category:Title Icon Example]]

Title Icon Example 4:


{{#set:Hide Title Icon=category}}
{{#set:Title Icon=Report.png}}
{{#set:Title Icon=FAQ.png}}
[[Category:Title Icon Example]]

Title Icon Example 5:


{{#set:Title Icon=Event.png}}
{{DISPLAYTITLE:Events}}

 

As of version 5.1, Title Icon provides an action API query module. The query takes the name of the query (prop=titleicons) and a list of titles (e.g. titles=Main%20Page). The result will be a JSON encoded array of the title icons for the requested pages. For example, the query https://.../api.php?action=query&format=json&prop=titleicons&titles=Main%20Page could result in something like:


{
    "batchcomplete": "",
    "query": {
        "pages": {
            "1": {
                "pageid": 1,
                "ns": 0,
                "title": "Main Page",
                "titleicons": "[{\"source-dbkey\":\"Main_Page\",\"source-namespace\":0,\"icon\":\"&#x1F469;&#x1F3FE;&zwj;&#x1F4BB;\",\"type\":\"unicode\",\"_type_\":\"MediaWiki\\\\Extension\\\\TitleIcon\\\\Icon\"},{\"source-dbkey\":\"Test_Category\",\"source-namespace\":14,\"icon\":\"wikiText.svg\",\"type\":\"ooui\",\"link-dbkey\":\"Network\",\"link-namespace\":-1,\"_type_\":\"MediaWiki\\\\Extension\\\\TitleIcon\\\\Icon\"},{\"source-dbkey\":\"(Main)\",\"source-namespace\":4,\"icon\":\"File:Dove.svg\",\"type\":\"file\",\"_type_\":\"MediaWiki\\\\Extension\\\\TitleIcon\\\\Icon\"}]"
            }
        }
    }
}

This corresponds to a unicode icon 👩🏾‍💻 defined on Main Page, an OOUI icon wikiText.svg defined on the category page Category:Test Category (since in this example, Main Page is in category Category:Test Category) that is linked to the page Special:Network, and a file icon File:Dove.svg defined for the main namespace (by placing a title icon on page Project:(Main)).

Release Notes

edit
Version 6.1
  • Fix broken deserialization from page properties
  • Avoid an exception when the title is malformed
Version 6.0
  • Dropped support for MediaWiki 1.37 and below (required by internal code improvements)
Version 5.2
  • Dropped requirement that file icons include the File: namespace in the icon name (although they still refer to files in the File: namespace; the File: gets added automatically now if it is missing)
  • Changes the save of icon page properties to ParserAfterParse hook
  • Improved tests
Version 5.1
  • Added MediaWiki action API support to query Title Icons
Version 5.0
  • Added support for OOUI icons and Unicode sequences
  • Added parser functions: titleicon_file, titleicon_ooui, titleicon_unicode, hidetitleicon
  • Added support for specifying title icons per namespace
  • Continued support for Semantic MediaWiki
  • Non-Semantic MediaWiki (parser function) defined icons accessible as page properties
  • Refactored code to current coding standards
  • Dropped support for MediaWiki 1.34 and below
Version 4.1.1
  • Replace use of $wgParser with dependency injection facility
Version 4.1
  • Fixed to work with Semantic MediaWiki 3.0.0 (Undefined class constant 'TYPE_STRING')
Version 4.0
  • Fixes rendering in search results which breaks compatbility with MediaWiki 1.27 and lower
Version 3.0
  • Removed use of inline JavaScript that caused issues in MediaWiki 1.26
  • Converted to new extension registration style
  • Removed support for old style i18n and extension registration
  • Renamed configuration variables with $wg prefix to support new extension registration format
Version 2.2
  • Added $TitleIcon_CSSSelector and updated coding style