Mediawiki: Mobile support

In a previous article I mentioned that I run a local instance of Mediawiki. More recently, I’ve wanted to view my local wiki on my mobile device, however Mediawiki doesn’t support this by default. Thankfully, there is an Extension for that: MobileFrontend.

Install MobileFrontend extension

  1. Download the extension and extract into \mediawiki\extensions\MobileFrontend
  2. Edit LocalSettings.php and add the following:

    wfLoadExtension( 'MobileFrontend' );
    $wgMFAutodetectMobileView = true;
    
  3. The Mobile homepage formatting guide provides some tips. For example, to exclude a section from the mobile view, wrap it in:

    <div class="nomobile"> ... </div>
    

Additional configuration

The one drawback is that the menu in the mobile layout is apparently hardcoded, and doesn’t read from MediaWiki:Sidebar. This was a problem for my site, which uses a few main pages as gateways to much of the content.

Mediawiki MobileMenu

One possible solution was to simply add the important links to the main page. I also found an open enhancement request, but it could take a while to resolve.

Then I found an alternative. The steps presented here are modified based on my needs, but you can find the original here: Extension discussion.

  1. Edit the file \extensions\MobileFrontend\includes\skins\SkinMinerva.php and locate the line

    $menu->insert( 'random' )
    
  2. Below the existing code block type:

    $menu->insert( '[uniquename]' )->addComponent("[link text]", "[url]", MobileUI::iconClass( 'mf-[uniquename]-invert', 'before' ));
    

    Replace [uniquename], [link text] and [url] as appropriate.

    The original steps used an extended code block similar to the existing Random link block. Choosing not to use $this->msg just simplifies the change and avoids needing to edit \extensions\MobileFrontend\i18n\en.json.

    Note that if you’ve used $wgArticlePath to configure a virtual directory for short (pretty) URLs, you may need to link absolutely:

    ../[directory]/[pageName]
    
  3. If we want images to appear beside our links we’ll need to generate svg files. There are a few existing ones we can reuse, alternatively I used Flaticon to generate some additional ones. Place any additional icons in \extensions\MobileFrontend\resources\mobile.mainMenu.icons.

  4. Edit the file \extensions\MobileFrontend\extension.json and find the line:

    "random": "resources/mobile.mainMenu.icons/random.svg",
    

    Below it, add this:

    "[uniquename]": "resources/mobile.mainMenu.icons/[svc file name]",
    

    Replace [uniquename] with the same value used in SkinMinerva.php, and [svc file name] with the name of a file from \resources\mobile.mainMenu.icons.

Trying it out

When testing the results on my mobile phone I initially had issues with caching, and the changes weren’t reflected when touching the hamburger (the three-line icon that toggles the menu: Hamburger). You can check the page Special:MobileMenu to be sure though.