Extension:FlexImage

From MediaWiki.org
Jump to navigation Jump to search
MediaWiki extensions manual
Crystal Clear action run.svg
FlexImage
Release status: experimental
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
README
Release notes
Translate the FlexImage extension if it is available at translatewiki.net
Check usage and version matrix.
MediaWiki-extensions-icon.svg
QBox ABC Information template:

This page contains Jack QBox php Extension (lessons)

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

Installation[edit]

  • 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[edit]

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[edit]

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[edit]

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[edit]

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 verify's if an external image is available inside $wgAllowExternalImagesFrom

Image Linking[edit]

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  

EG: [qbox4u.com] becomes [http://qbox4u.com]

Demo[edit]

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]