This is a GSoC proposal to move the wikivoyage pagebanner template functionality to an extension and make it mobile friendly
Profile Information
Name: Sumit Asthana
Email: asthana.sumit23@gmail.com
irc nick: codezee
Mediawiki User:Sumit
Location: India
Time Zone: UTC+5:30
Typical working hours: 6PM to 2AM before 26th April, 12PM to 1AM after 26th April(Indian Standard Time)
Synopsis
English Wikivoyage uses the concept of pagebanners and horizontal table of contents on each of its page, to alter the way the page is presented and for visual appeal.
However the current pagebanners are rendered using the pagebanner template which displays a banner image on top and strips the original TOC and replaces it with a horizontal TOC. The desktop version is visually appealing, but it does not render well on mobile as shown below:
Clearly, in the mobile view, the banner is being obstructed by the edit box, and size is inappropriate In order to create a generic view, which would be consistent on both mobile and desktop as well as customizable, the proposal is to move the above functionality to a PageBanner extension, which would then be responsible for the rendering of pagebanners and a horizontal TOC on each page of wikivoyage
Also, the current pagebanner only shows level 1 headings. For long articles, sub-categories are required. A discussion on english wikivoyage's pagebanner expedition's discussion page captures this.
Possible mentors
Solution
In order to create a generic view, which would be consistent on both mobile and desktop as well as customizable, the proposal is to move the above functionality to a PageBanner extension, which would then be responsible for the rendering of pagebanners and horizontal TOC on each page of english wikivoyage
Workflow
Step 1: Create a basic banner along the lines of the template. This involves:
- Creating a parser function as '#pagebanner' which when supplied no argument, adds a banner image from wikidata property P:948(default)
Current pagebanner template invocation is like:
{{pagebanner|Ladakh_banner.jpg|caption=Mountains in eastern Ladakh}}Parser function will have a similar invocation like:
{{#pagebanner: Ladakh_banner.jpg|caption=Mountains in eastern Ladakh}}This is being done with the aim to create minimum change from end user's perspective
- The wikidata image will be fetched using lua scripting supported by mediawiki
- The parser function will support additional parameters to mimic the current pagebanner template in terms of its use, so that end-users perceive minimum change(taken from the template's doc page):
- caption text: Recommended. Enter caption=description to display a description of the picture when a mouse pointer is placed over the banner image.
- page name: Optional. Enter pgname=name to display in the banner. Only enter a name if you want it to be different than the formal name of the page.
- disambiguation: Optional. Displays a disambiguation icon in the banner (a question mark) and the disambiguation hatnote after the banner. Enter disambig=yes if the name of the disambiguation page is page name (disambiguation). Enter disambig=disambiguation page name if the disambiguation page name is different from the current page name.
- star: Optional. Enter star=yes if the guide is a Star article. This displays the Star article symbol in the top right corner.
- DotM: Optional. Enter dotm=yes if the guide is a previous Destination of the month. This displays the DotM symbol in the top right corner.
- OtBP: Optional. Enter otbp=yes if the guide has been featured on Off the beaten path This displays the OtBP symbol in the top right corner.
- Ftt: Optional. Enter ftt=yes if the guide has been a Featured travel topic. This displays the Ftt symbol in the top right corner.
- unesco: Optional. Enter unesco=yes if the guide is or describes a site on the Unesco World Heritage list. Only the lowest level guides in the hierarchy should be tagged (ie, Sydney/City Centre for the Opera House, not Sydney). This displays the World Heritage symbol in the top right corner and adds a category.
- TOC box: Optional. Enter box=black for the TOC to appear in a translucent black box with white type. Enter box=white for the TOC to appear in a translucent white box with black type. Enter nothing for the default solid grey box with black type.
- notoc: Optional. Enter notoc=true to stop the TOC being included in the banner and for the entire TOC to be shown within the article instead. Mainly to be used on articles with lots of sections.
- index: Optional. Enter index=yes for banners on title/index pages or pages in other main namespace article categories which do not always get banners.
- fop: Optional. Enter fop=yes for freedom-of-panorama banners which are not allowed on Commons, to remove them from applicable maintenance categories
- (from banner expedition discussion) Some thoughts regarding the sub-headings of TOC can be taken
Add a link to the page of banner property on wikidata, in case of a need to edit the banner
Step 2: After the code for the banner generated, its important to detect the screen size of the user and resize the banner appropriately. This step is essential for mobile users, who are one of the important targets of this extension. The styling for the banner will reside inside the extension, which will determine its appearance on both mobile and desktop from a single location.
Note that this can be overridden in wiki's Common.css and Mobile.css
This talk on Mobile frontend regarding banner styling will be the starting point.
Also, implement the sub-categories feature after discussion with the wikivoyage community. A parameter switch will be provided to display the sub-categories or not
This involves putting the toc-level-1 divs in horizontal TOC and putting toc-level-2,3,4 headings as drop-downs using css and javascript by identifying them and using dom manipulation to create their own hierarchy. An example requiring this feature is this page which has a lot of sub-headings so the toc in banner is disabled. However since this is a new feature, rather including it in the extension compulsorily, it'll be as an experiment in the beginning
Step 3: Create a simple popup edit box, which will be invoked by an edit button on the banner, and will allow for choosing a banner image from here, and which will change the banner in wikitext.
Since the wikivoyage banners category page has a large number of banners grouped in various categories, the UI will fetch the hierarchy of categories using mediawiki api, display them as a side-content, and fetch their banners in the main view.
The edit box could also provide a way of choosing background color for the TOC(subject to views from the community).
A switch will be provided to enable/disable the feature of choosing a banner image
Step 4: Test the extension on the labs server using both wikidata value and local value of pagebanner and also the edit feature.
Step 5: Document the extension extensively for use by the wikivoyage community.
Design
A rough design of the banner with the image chooser UI is given below:
Phases
Phase I: Get a mediawiki test lab instance and create and deploy the basic version of the extension which simply displays a banner image given to it through the parser hook
Phase II: Create the lua script to fetch default banner value from wikidata
Phase III: Add banner customization options to the extension as well as styles
Phase IV: Make the banner responsive so that it renders well on Mobile View as well
Phase V: Create and integrate the image chooser UI into the banner
Phase VI: Deploy and test the final extension on mediawiki-test labs and document the extension
Deliverables
- The pagebanner template functionality will be provided by the extension
- Mobile frontend will have a resized banner according to the size of the browser as well as positioned appropriately
- Horizontal TOC of the banner will support sub-categories through drop-down links.
- Documentation for the pagebanner extenstion.
Timeline
| Period | Task |
|---|---|
| Before April 27 | Request a mediawiki labs instance and a gerrit repository for the extension. Set up the skeleton of the extension such as i18n files and the basic setup |
| April 27-May25 | Community bonding period,Interact with the wikivoyage community and refine the banner issues |
| May 25 | Official GSoC coding begins |
| May 25-June 9 | This will involve creating extension and the parser function responsible for creating the banner functionality(Step 1) |
| June 10-June 15 | Create the script which will fetch the default banner from wikidata |
| June 16-June 25 | Add the options to the parser function mentioned in step 3 to customize pagebanner |
| June 26-July 18 | Add styling and scripts to make the extension compatible with Mobile frontend. Also involves making a horizontal-toc render on mobile |
| July 19-August 10 | Wrap up the extension and all its parts to be ready for deployment |
| August 11-August24 | Test and remove any remaining bugs after deploying on mediawiki-test labs and provide documentation. |
Participation
I will follow the mentioned ways to go about the project:
- The project report will be updated on the sub-namespace of my user page as well as on phabricator
- Through #wikimedia-dev, #wikimedia-mobile and Wikidata irc channels as I've been doing for solving bugs till now.
- through wikitech-I mailing list in case of getting an opinion.
- For seeking views from the wikivoyage community, by starting a discussion on the Traveller's pub.
Source Code
Source code will be pushed on a gerrit repository after acquiring one.
The request for a new gerrit repository has been initiated. The tracking bug for the same is at T93127
About Me
- I'm a second year undergraduate student of computer science at IIT Patna
- My major interest is in web languages(php,html,javascript,css) where I have done maximum work
I like to design web pages as well as do backend coding, and I'm inspired by the awesome design works out there on the web created by developers.
I had been contributing to wikimedia-mobile and was learning about the changes needed to be made for mobile users, and also looking for making some significant contributions, as being a part of something big is great!
I came across the wikivoyage banners which weren't perfect on mobile. This prompted me to follow this up. First I talked to my mentor who helped me push this project forward. Since the idea was shaping up for an extension, I looked through other issues and requirements for the banner on the banner's discussion page and on the traveller's pub and also here and also started a discussion myself here for some inputs, which helped me refine the banner's requirements in addition to the discussion and inputs from people on the phabricator page. Also these pagebanners are an important component and attraction of wikivoyage, improving which I believe could greatly benefit to wikivoyage.
Therefore I have decided to take it up. I'm looking forward to enhancing this feature to make it more awesome and also sure of delivering it.
How did you hear about the program
I heard about the program from my seniors and my friend who had been gsoc students.
Will you have any other time commitments, such as school work, another job, planned vacation, etc., during the duration of the program?
By 25th April,our summer vacation of college will start and ends by late of July; I can give my full time commitment to this project,. I assure dedication of at least 40 hours per week to the work and that I do not have any other obligations from early May till mid August.
We advise all candidates eligible to Google Summer of Code and FOSS Outreach Program for Women to apply for both programs. Are you planning to apply to both programs and, if so, with what organization(s)?
Only GSoC, for mediawiki
Past Experience
My open source experience began with the use of linux. However my open source contributions began with mediawiki since its based on the languages I know.In the past months I have submitted quite a few patches in core as well as in Mobile Frontend where the project aims to solve the problem and got them merged. Some are:
In core
- Database bug to correctly handle the use of 'IN' in makeList function
- Improving the captcha view for non-javascript users on login/signup form, T85192 and T87190
- Fix to remove deprecated tables from category page and add responsive layout so that they render well on mobile T85496
In Mobile Frontend
All Gerrit contributions(past and ongoing)
Other Projects
- Developed the college fest website for Anwesha 2015.
- Registration portal for entrepreneurship club of my college.
- List of other open-source contributions at my github profile .