WikidataPageBanner wrap-up report

About the project

https://en.wikivoyage.org is a wiki about travel and holds rich details related to visiting places. This wiki has a special "culture" of showing page wide "banners" at the head of each of their articles to enhance the aesthetic appeal of their articles.
An example of such a banner can be seen here - https://en.wikivoyage.org/wiki/Agra
These banners are traditionally shown using a template on the wiki.
The banners shown through templates however had a few shortcomings such as:

• Not delivering an optimum size banner for each device.
• Not rendering properly on mobile devices.
• Too small banners on small mobile screens.
• Not being able to show more than one level Table Of Contents inside the banners.

The project is all about addressing these issues and adding capabilities through a Mediawiki extension to take the banner experience to the next level.
The following is an example of showing the banner on mobile using the extension. Note how the banner maintains a decent height inspite of originally being of aspect ratio 7:1

The extension also adds a new feature to focus the banner to specific spots if it is too large. Notice the focus in the three images



The above feature makes use of the origin parameter. More info can be found at https://www.mediawiki.org/wiki/Extension:WikidataPageBanner

Usage

The extension has the capability to fetch images from the wiki or from wikidata if a link to wikidata for the article is defined.
The extension adds a magic word PAGEBANNER which can be used to invoke the banners on any page.
For example using {{PAGEBANNER: Vatican banner Rafael's "School of Athens".jpg}} would show a banner with the given image name. The extension will try to fetch the image from the wiki or from wikidata if an associated property exists.
The following page shows the example of using {{PAGEBANNER:Agra banner Taj Mahal.jpg|icon-unesco=Unesco}}

For accessing the wikidata banner, the extension uses a configuration variable $wgWPBBannerProperty to look for the banner image on wikidata.
Eg. the page http://pagebanner.wmflabs.org/wiki/NorthAmerica fetches a banner from a wikidata linked property defined here http://pagebanner.wmflabs.org/wiki/Item:Q8

The extension also has the feature to add a Wikidata banner or a default defined banner if $wgWPBEnableDefaultBanner is set to true
The important parameter to {{PAGEBANNER:}} is the image name specified right after the keyword. Other optional arguments include:

• pgname - Adds a custom title to the banner.
• To add custom icons, add the parameter icon-icon_name=<Article about icon> to {{PAGEBANNER}}. Then define a background-image on .oo-ui-icon-icon_name, in Mediawiki:Common.css to use as the icon. Do this for any no. of icons to add to the page.
• caption - Use '''caption=description''' to add a caption to the banner image.
• 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.
• origin - Use '''origin=<x>,<y>''' where '''x''' and '''y''' in angular brackets represent the x and y positions of the focus of the banner. This feature is particularly useful if any dimensions of the banner exceed that of the viewport, especially on the screen.

Missing Features/Known Bugs

The following are some bugs that are left to be addressed and would improve the extension:

• Showing warnings on using invalid arguments to {{PAGEBANNER:...}} - https://phabricator.wikimedia.org/T109317
• Page actions in Mobile skin should appear below the banner so that text can wrap - https://phabricator.wikimedia.org/T108408 - This will be addressed in conjunction with the mobile team.
• A polyfill to extend srcset support on non-supported browsers which will soon be merged - https://phabricator.wikimedia.org/T106523

Demo server link

The extension can be tested at - https://pagebanner.wmflabs.org

Resources

• Test server - https://pagebanner.wmflabs.org
• Documentation - https://www.mediawiki.org/wiki/Extension:WikidataPageBanner
• Extension is deployed on https://en.wikivoyage.org/wiki
• Project on gerrit - http://git.wikimedia.org/summary/mediawiki%2Fextensions%2FWikidataPageBanner.git

Suggestions for contributions in future

The extension's code is heavily documented at each step and coupling it with the documentation at https://www.mediawiki.org/wiki/Extension:WikidataPageBanner would make it fairly easy in future to contribute to it.
Giving a read to https://en.wikivoyage.org/wiki/Wikivoyage:Banner_Expedition would help make the objectives of the extension clearer.