Extension:WikidataPageBanner

MediaWiki extensions manual
OOjs UI icon advanced-invert.svg
WikidataPageBanner
Release status: stable
Banner ex.png
Implementation Parser function
Description Adds pagewide banners at the top of pages in specified namespaces
Author(s) (under the mentorship of User:Jdlrobson and User:Syced). (Sumittalk)
Latest version 0.0.3
MediaWiki >= 1.38.0
PHP 5.4+
License GNU General Public License 2.0 or later
Download
README
  • $wgWPBDisabledNamespaces
  • $wgWPBEnableHeadingOverride
  • $wgWPBSkinDisabled
  • $wgWPBBannerProperty
  • $wgWPBEnablePageImagesBanners
  • $wgWPBStandardSizes
  • $wgWPBImage
  • $wgWPBDisplaySubtitleAfterBannerSkins
  • $wgWPBNamespaces
  • $wgWPBEnableMainPage
  • $wgWPBEnableDefaultBanner
pagebanner
Translate the WikidataPageBanner extension if it is available at translatewiki.net

Check usage and version matrix.

Issues Open tasks · Report a bug

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.

InstallationEdit

  • Download and place the file(s) in a directory called WikidataPageBanner in your extensions/ folder.
  • Add the following code at the bottom of your LocalSettings.php:
    wfLoadExtension( 'WikidataPageBanner' );
    
  •   Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

UsageEdit

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.

Required TemplateEdit

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 {{PAGEBANNER}} functionEdit

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 #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 #origin parameter 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' parameterEdit

 
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, 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 variablesEdit

$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;

ExamplesEdit

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 WikidataEdit

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

StylingEdit

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.