Extension:FlexImage

MediaWiki extensions manual

FlexImage 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
Download	GitHub: project page git repository URL [help ] commit history README Release notes
Hooks used ParserFirstCallInit LanguageGetMagic EditPage::showEditForm:initial OutputPageBeforeHTML BeforePageDisplay

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

Installation

• 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

//{{#Fimg:xxxxxx}}
 
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 Bin

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 pages

This extension creates automatically during setup the following pages

• FlexImage_extension_demo_page
• Special:FleximageAdmin
• Template:QPE

This extension will automatically upload during setup several default images

Usage

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>}}

Image

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 Linking

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]

Demo

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
|-
|width=33%|{{#Fimg:https://cdn.knmi.nl/knmi/map/current/weather/forecast/kaart_verwachtingen_Vandaag_dag.gif|[http://knmi.nl/home]}}
|width=33%|{{#Fimg:http://www.cwb.gov.tw/V7/observe/real/Data/Real_Image.png|[[Main_Page#Practice_Foreign_Words]]}}
|width=33%|{{#Fimg:Raining-catsanddogs-01.gif|[qbox4u.com]}}
|}

* 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]