MediaWiki extensions manual
Release status: unmaintained
Implementation Parser extension , Tag
Description Beginners extension Automatically adapt the image size to the available space
Author(s) Jan Boer (jackqboxtalk)
Latest version 1.0 (2016-10-05)
MediaWiki 1.25+
PHP 5.5+
Database changes No
Composer qbox4u/mediawiki-github
License GNU General Public License 2.0 or later
Release notes

The Extension FlexImage is intended to provide an real first easy learning entry for inexperienced newcomers about how to create an Mediawiki Extension.


  • Download from github the Zip file FlexImage_V1.0.zip
  • Add at the end of MediaWiki:Common.css the following CSS class
/* Auto Resizable images by eg <div>[[Image:CusterTool_03.png]]</div>  */
/* Used by the Extension '''FlexImage''' TAG {{#Fimg:<image>|<link>}} */
.fleximg { 
     max-width: 100%; 
     height: auto; 
     width: auto\9; /* ie8 */ 
  • Create in the extensions directory from Mediawiki an new folder
  • Rename the new folder to FlexImage
  • Copy the FlexImage extension source files into this folder
  • Add at the end of LocalSettings.php the following require_once PHP line
require_once( "$IP/extensions/FlexImage/FlexImage.php");
  • Check in Special:Version under the head 'Other' if the extension is activated
Extension Version License Description Authors
Flexible image 1.0 Private Flexible image extension by the tag

Dynamically adapt the image size to the window

{{#Fimg:<Image File name>|<Page link>}}

https://www.linkedin.com/in/jan-boer-a24640113 and qbox4u@gmail.com

Adapt PHP BinEdit

This demo extension is using additional internal scripts.

Check and assure that the right allocation of the PHP Bin Executable is used

The definition of the default PHP Bin Executable location is set inside FlexImage.inc.php

# The php BIN executable ( & path ) inside the QBox Server
# This path has to be checked on other servers as mutiple versions may reside in your own server !!!!!
# Perform for QNAP an [~] # ipkg list_installed and check if eg php - 5.2.17-2 - The php scripting language has been installed  
# An incorrect method for QNAP is ==>  [~] # which php    or < ?php echo shell_exec('which php'); ? >
# An incorrect method for QNAP is ==>  [~] # whereis php  or < ?php echo shell_exec('whereis php'); ? > 
# The default php BIN executable inside the QBox Server

$wf_QBox_PHP_Bin 	= '/mnt/ext/opt/apache/bin/php';

Auto create pagesEdit

This extension creates automatically during setup the following pages

This extension will automatically upload during setup several default images


The FlexImage extension is for QBox4u training purposes created, and has to be used as follow

Activating the FlexImage parser is done by

{{#Fimg:<image path & name>|<image Link>}}


The image can be supplied from 2 sources

* Internal QBox4u image Raining-catsanddogs-01.gif
* External image URL https://cdn.knmi.nl/knmi/map/current/weather/forecast/kaart_verwachtingen_Vandaag_dag.gif

When using external images The following should be available/added inside LocalSettings.php

$wgAllowExternalImages     = FALSE;
$wgAllowExternalImagesFrom = array( 'http://www.cwb.gov.tw/','https://cdn.knmi.nl/knmi/map/current/weather/forecast/','qbox4u.com' );

The Extension verifies if an external image is available inside $wgAllowExternalImagesFrom

Image LinkingEdit

An Clickable image Link can be implemented from 2 sources

* Internal QBox4u Page Link [[Sandbox]]
* External URL Link [http://knmi.nl/home]

An external Link MUST begin with http://

Whenever an external Link is supplied without http://, The FlexImage extension will automatically

ADD in front of your input the code http:// but no functionality assurance is provided

e.g.: [qbox4u.com] becomes [http://qbox4u.com]


Assuming, we want to have 3 images covering the entire horizontal screen.

Independent of the browser width.

Changing the width of your browser page will automatically adapt the image size

{|class="wikitable mw-collapsible" width=99%
! Holland!!Taiwan!!Observation

* The image Holland is by mouse click linking to the external web page [http://knmi.nl/home]
* The image Taiwan is by mouse click linking to the internal web page [[Main_Page#Practice_Foreign_Words]]
* The image Observation is by mouse click linking to the external web page [qbox4u.com]