Extension:WikidataPageBanner

The WikidataPageBanner extension adds pagewide banners on every page of specified namespaces of the wiki.

Pagewide banners are extensively used on Wikivoyage projects. This extension is majorly inspired by Wikivoyage's Template:pagebanner.

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

If the wiki is connected to Wikidata, it can also fetch each page's banner from there.
 * 1) To use   as a custom banner image, set it on the page:
 * 2) The extension can automatically add the same banner image to all pages of specified namespaces, set via the   2>#config|configuration variable.

Required Template
Template:PAGEBANNER must exist. It can be empty. Wikivoyage has an example of a complex Template:PAGEBANNER with rendering logic and additional template dependencies.

Parameters to the function
The following parameters are supported to the parser function:
 * — Adds a custom title to the banner.
 * — To add custom icons, add the parameter  (where   is any icon name that you want). Then define a background-image on , in MediaWiki:Common.css to use as the icon. Do this for any number of icons to add to the page.
 * — Use  to show image description on hovering over image.
 * — Use  to enable a Table Of Contents within banner.
 * — Use  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  below.
 * — Use  (separated by spaces) to add additional classes to banners which can be used to customize it using styles in MediaWiki:Common.css
 * — See parameter below.
 * — Sets the target of the banner link and operates the same as the link parameter for images (e.g.  will link to the 'Event name' page rather than the banner image page). Set to no value to remove the link, i.e..

'origin' parameter
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, is the top right corner and  is the bottom right corner. See the image at right for a graphical representation of the coordinates.

Note, as currently implemented, the origin parameter 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.

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

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

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

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

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

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

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

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

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

Examples
A few use examples with explanation:

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

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.

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.

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  is set to correct Wikidata banner property. Then leave the image name empty, and set any other required parameters:

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

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

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  as a paramter would only show the ToC at the bottom on the page it's used.

Would set the font size of the banner name to 1 em.

Would reduce the vertical spacing between lines of the ToC.

Would set some blank space between the banner and ToC.