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
- Download the extension and extract into
LocalSettings.phpand add the following:
wfLoadExtension( 'MobileFrontend' ); $wgMFAutodetectMobileView = true;
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>
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.
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.
Edit the file
\extensions\MobileFrontend\includes\skins\SkinMinerva.phpand locate the line
$menu->insert( 'random' )
Below the existing code block type:
$menu->insert( '[uniquename]' )->addComponent("[link text]", "[url]", MobileUI::iconClass( 'mf-[uniquename]-invert', 'before' ));
The original steps used an extended code block similar to the existing
Random linkblock. Choosing not to use
$this->msgjust simplifies the change and avoids needing to edit
Note that if you’ve used
$wgArticlePathto configure a virtual directory for short (pretty) URLs, you may need to link absolutely:
If we want images to appear beside our links we’ll need to generate
svgfiles. There are a few existing ones we can reuse, alternatively I used Flaticon to generate some additional ones. Place any additional icons in
Edit the file
\extensions\MobileFrontend\extension.jsonand find the line:
Below it, add this:
"[uniquename]": "resources/mobile.mainMenu.icons/[svc file name]",
[uniquename]with the same value used in
[svc file name]with the name of a file from
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: ). You can check the page
Special:MobileMenu to be sure though.