Extension:WikidataPageBanner

MediaWiki extensions manual

WikidataPageBanner Release status: stable
Implementation	Parser function
Description	Adds wide banner images to the top of wiki pages.
Author(s)	(under the mentorship of User:Jdlrobson and User:Syced). (Sumittalk)
Latest version	0.0.3
MediaWiki	>= 1.43
PHP	5.4+
License	GNU General Public License 2.0 or later
Download	Download extension Git [?]: Download Git master browse repository (GitHub) commit history repository contributors (GitHub) code review README
Parameters $wgWPBDisabledNamespaces $wgWPBEnableHeadingOverride $wgWPBSkinDisabled $wgWPBBannerProperty $wgWPBEnablePageImagesBanners $wgWPBStandardSizes $wgWPBImage $wgWPBDisplaySubtitleAfterBannerSkins $wgWPBNamespaces $wgWPBEnableMainPage $wgWPBEnableDefaultBanner
Tags pagebanner
Hooks used BeforePageDisplay OutputPageParserOutput ParserFirstCallInit ParserOutputPostCacheTransform SiteNoticeAfter
Quarterly downloads	17 (Ranked 122nd)
Translate the WikidataPageBanner extension if it is available at translatewiki.net
Issues	Open tasks · Report a bug

The WikidataPageBanner extension adds banner images to the top of wiki pages. It can add them to every page of specified namespaces, or just to individual pages. The image filenames can be stored on Wikidata (with page banner (P948)) instead of in the local wiki.

Page banners are extensively used on Wikivoyage projects. This extension was majorly inspired by Wikivoyage's pagebanner template.

Installation

• Download and move the extracted WikidataPageBanner 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/WikidataPageBanner
• Add the following code at the bottom of your LocalSettings.php file:

  wfLoadExtension( 'WikidataPageBanner' );
  

•  Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

Usage

There are a few different ways to set a banner image on a page:

1. To use File:Image_name.jpg as a custom banner image, set it on the page: {{PAGEBANNER:Image_name.jpg}}
2. The extension can automatically add the same banner image to all pages of specified namespaces, set via the $wgWPBImage configuration variable.
3. If the wiki is connected to Wikidata, it can also fetch each page's banner from there. In this case, the Template:PAGEBANNER must exist (but it can be empty). English Wikivoyage has an example of a complex Template:Pagebanner with rendering logic and additional template dependencies.

Parameters to the {{PAGEBANNER}} function

The following parameters are supported to the {{PAGEBANNER}} parser function:

• |pgname= — Adds a custom title to the banner.
• |icon-*= — To add custom icons, add the parameter |icon-<icon_name>=<Article about icon> (where <icon_name> is any icon name that you want). Then define a background-image on .oo-ui-icon-<icon_name>, in MediaWiki:Common.css to use as the icon. Do this for any number of icons to add to the page.
• |tooltip= — Use |tooltip=image-caption to show image description on hovering over image.
• |toc= — Use |toc=yes to enable a Table Of Contents within banner.
• |bottomtoc= — Use |bottomtoc=yes to push Table Of Contents below banner. This will affect only the page on which its used. To set site-wide ToC at bottom, see section #Styling below.
• |extraClass= — Use |extraClass=<css-class names> (separated by spaces) to add additional classes to banners which can be used to customize it using styles in MediaWiki:Common.css
• |origin= — See section #origin below.
• |link= — Sets the target of the banner link and operates the same as the link parameter for images (e.g. |link=Event name will link to the 'Event name' page rather than the banner image page). Set to no value to remove the link, i.e. |link=.

'origin' parameter

Banner coordinate system.

Use this parameter to define a suggested focal area of the image. This is used to crop the banner appropriately on small screens. The value of the parameter should consist of an X and a Y coordinate separated by a comma. Each coordinate represents the distance from the center of the image as a value from -1 to 1. For example, |origin=1,1 is the top right corner and |origin=-1,1 is the bottom right corner. See the image at right for a graphical representation of the coordinates.

Note that |origin= is meant for images that are much larger than the target banner (e.g. panoramas or portrait photos). It will not reposition banners where the repositioning leads to empty whitespace within the banner space. For example, if the banner is being rendered at 320px width and 180px height, an image that is also 320px and 180px cannot be repositioned at all; an image that is 600px width by 180px height can be repositioned horizontally and an image that is 320px width and 1000px height can be repositioned vertically.

Configuration variables

$wgWPBImage is used to set the default banner image to be used. Add image name without prefixing 'File:' namespace. If the wiki does not need default banners, do not edit this field.

$wgWPBImage = "foo.jpg";

$wgWPBBannerProperty Banner property on Wikidata which holds a commons media file. Essential if Wikidata is enabled.

$wgWPBBannerProperty = "P948";

$wgWPBEnableDefaultBanner enables the default banner image on pages without the use of {{PAGEBANNER}}.

$wgWPBEnableDefaultBanner = true;

$wgWPBNamespaces array of namespaces on which to display the banner. Default is Main namespace. It can also be set to true(), in which case it'll enable banner on all Namespaces, except those excluded by $wgWPBDisabledNamespaces.

$wgWPBNamespaces = [ NS_MAIN ];

$wgWPBDisabledNamespaces excludes certain namespaces from showing banner. Note that this parameter only has effect if $wgWPBNamespaces is true. Otherwise, this parameter is disregarded and only namespaces in $wgWPBNamespaces are considered.

$wgWPBDisabledNamespaces = [ NS_FILE ];

$wgWPBStandardSizes is an array of standard predefined screen widths in increasing order of size.

$wgWPBStandardSizes = [ 320, 640, 1280, 2560 ];

$wgWPBEnablePageImagesBanners when set to true and Extension:PageImages is installed will use a page image when no Wikidata image or locally defined image is set.

$wgWPBEnablePageImagesBanners = true;

$wgWPBDisplaySubtitleAfterBannerSkins is an array of names of skins that should have the banner displayed in the site-notice area, instead of in the page subtitle (which is the default).

$wgWPBDisplaySubtitleAfterBannerSkins = [ 'minerva' ];

$wgWPBEnableHeadingOverride determines whether the page title is displayed overlayed on the banner image. Defaults to true.

$wgWPBEnableHeadingOverride = true;

$wgWPBEnableMainPage determines whether a banner is allowed to be shown on the Main Page. Defaults to false.

$wgWPBEnableMainPage = false;

Examples

A few use examples with explanation:

{{PAGEBANNER:Grand_canyon.jpg}}

Will add a banner using image Grand_canyon.jpg as source locally or from wikimedia commons.

{{PAGEBANNER:Grand_canyon.jpg|icon-star=<Name of star article>|icon-unesco=<Name of Unesco Article>}}

Will add a banner using image Grand_canyon.jpg as source locally or from wikimedia commons. Additionally will add icons with class names oo-ui-icon-star, oo-ui-icon-unesco. Set background-image property on theses classes in MediaWiki:Common.css to your desired icon.

{{PAGEBANNER:Grand_canyon.jpg|toc=yes|pgname=Some page}}

Will add a banner using image Grand_canyon.jpg as source locally or from Wikimedia Commons. Additionally adds a Table of Contents inside banner. Sets the name displayed on banner as Some page.

{{PAGEBANNER:Grand_canyon.jpg|extraClass=class1 class2}}

This will add a banner using the Grand_canyon.jpg image as source either locally or from Wikimedia Commons. It additionally adds CSS classes class1 and class2 to the .wpb-topbanner div.

Example usage for banner from Wikidata

Make sure $wgWPBBannerProperty is set to correct Wikidata banner property. Then leave the image name empty, and set any other required parameters:

{{PAGEBANNER:|other options...}}

This will use the banner image as set on the page's Wikidata item. If there is no banner image set for that item, or the page doesn't have a Wikidata item, a default image may be used (if $wgWPBImage is set).

Styling

The extension has ample scope for styling the banner via Common.css. Here are some examples of common CSS changes.

.wpb-topbanner-toc {
    position: relative;
}

This sets the ToC to appear just below the banner in case it's long. Note that doing this would cause every banner page on a wiki to have the ToC at the bottom of the banner. However, using bottomtoc=yes as a paramter would only show the ToC at the bottom on the page it's used.

.wpb-topbanner .wpb-name {
    font-size: 1em;
}

Would set the font size of the banner name to 1 em (smaller than the default 2.2 em).

.wpb-banner-toc {
    line-height: 1em;
}

Would reduce the vertical spacing between lines of the ToC.

.wpb-topbanner-toc {
    margin-top: 5px;
}

Would set some blank space between the banner and ToC.