Extension:Imgtag

MediaWiki extensions manual - list

Imgtag Release status: unknown
Description	This is a simple extension to build <img> tag. Typically used for embedding Google Chart.
Author(s)	lionkidTalk
Last version	0.2 (2011-Jun-26)
License	No license specified
Download	No link
Check usage (experimental)

This is a simple extension to build <img> tag. Typically used for embedding Google Chart.

Usage

<imgtag align="right" alt="World Map">
http://chart.apis.google.com/chart
   ?chf=bg,s,EAF7FE
   &chs=440x220
   &cht=t
   &chtm=world
</imgtag>

will be translated to

<img src='http://chart.apis.google.com/chart?chf=bg,s,EAF7FE&chs=440x220&cht=t&chtm=world' align='right' alt='World Map' />

Download instructions

Please cut and paste the code found below and place it in $IP/extensions/Imgtag/Imgtag.php. Note: $IP stands for the root directory of your MediaWiki installation, the same directory that holds LocalSettings.php.

Installation

To install this extension, add the following to LocalSettings.php:

require_once("$IP/extensions/Imgtag/Imgtag.php");
$wgAllowExternalImagesFrom = array(
  "http://chart.apis.google.com/",
);

Note: Manual:$wgAllowExternalImagesFrom is optional. But I recommend to set it because of security reason.

Code

<?php
 
#error_reporting(E_ALL);

if ( !defined('MEDIAWIKI') ) die();
 
$wgExtensionCredits['parserhook'][] = array(
  'name' => 'imgtag',
  'version' => '0.2',
  'author' => 'lionkid',
  'url' => 'http://www.mediawiki.org/wiki/Extension:Imgtag',
  'description' => 'An extension to build img tag, typically used for Google Chart.'
);
 
$wgExtensionFunctions[] = "gfImgtagSetup";
 
function gfImgtagSetup() {
  global $wgParser;
  $wgParser->setHook( "imgtag", "gfImgtagMain" );
}
 
 
function gfImgtagMain( $input, $args, $parser ) {
 
  // URL check
  $input = str_replace(array(' ', "\n"), '', $input);
  $url = htmlspecialchars($input, ENT_QUOTES);
 
  if ( preg_match('/^https?:/i', $url) === 0 )
    return gfImgtagErrorDecoration('ERROR: Image Source URL must begin with http');
 
  global $wgAllowExternalImagesFrom;
  if ( !empty($wgAllowExternalImagesFrom) ) {
    $pass = false;
    foreach ($wgAllowExternalImagesFrom as $site) {
      if ( strpos($url, $site) === 0 ) {
        $pass = true;
        break;
      }
    }
    if ($pass == false)
      return gfImgtagErrorDecoration('URL Restriction ERROR: Please add this domain to $wgAllowExternalImagesFrom');
  }
 
 
  // Attributes check
  $attr = '';
  $linkval = '';
  foreach($args as $key => $value) {
 
    if ( preg_match('/^[a-zA-Z]+$/', $key) === 0 )
      return gfImgtagErrorDecoration("PARSE ERROR: $key");
 
    if ( preg_match('/^[0-9a-zA-Z %:;_\-#]+$/', $value) === 0 )
      return gfImgtagErrorDecoration("PARSE ERROR: $value");
 
    if ( $key === 'link' ) {
      $linkval = $value;
      continue;
    }
 
    $attr .= " $key='$value'";
  }
 
 
  // Build img tag
  $retval = "<img src='$url'$attr />";
 
 
  // link check
  if ( !empty($linkval) ) {
    $astart = '';
    $aend = '';
    $target = "target='_blank'";
    if ( $linkval === 'on' ) {
 
      // Automatic link URL
      if ( strpos($input, 'http://chart.apis.google.com/') === 0 ) {
 
        // Google Chart
        if ( strpos($input, '&cht=t&') === false ) {
          // Graph Chart
          preg_match('/&chs=([0-9]+)x([0-9]+)&/', $input, $match);
          if ( empty($match[1]) || empty($match[2]) )
            return gfImgtagErrorDecoration("PARSE ERROR: There is no '$chs=...'");
          $x = max($match[1], $match[2]);
          $ratio = ($x < 547) ? 547 / $x : 1;
          $width = round($match[1] * $ratio);
          $height = round($match[2] * $ratio);
          $newurl = preg_replace('/&chs=[0-9]+x[0-9]+&/', "&chs={$width}x{$height}&", $input);
          $newurl = htmlspecialchars($newurl, ENT_QUOTES);
          $astart = "<a href='$newurl' $target>";
          $aend = "</a>";
        } else {
          // Map Chart
          $newurl = preg_replace('/&chs=[0-9]+x[0-9]+&/', '&chs=440x220&', $input);
          $newurl = htmlspecialchars($newurl, ENT_QUOTES);
          $astart = "<a href='$newurl' $target>";
          $aend = "</a>";
        }
 
      } else {
 
        // Not Google Chart (Maybe just a image)
        $astart = "<a href='$url' $target>";
        $aend = "</a>";
 
      }
 
    } else {
 
      // Specified link URL
      $linkval = str_replace(array(' ', "\n"), '', $linkval);
      $linkval = htmlspecialchars($linkval, ENT_QUOTES);
 
      if ( preg_match('/^https?:/i', $linkval) === 0 )
        return gfImgtagErrorDecoration('ERROR: link value must begin with http or just "on"');
 
      if ( !empty($wgAllowExternalImagesFrom) ) {
        $pass = false;
        foreach ($wgAllowExternalImagesFrom as $site) {
          if ( strpos($linkval, $site) === 0 ) {
            $pass = true;
            break;
          }
        }
        if ($pass == false)
          return gfImgtagErrorDecoration('URL Restriction ERROR: Please add link domain to $wgAllowExternalImagesFrom');
      }
 
      $astart = "<a href='$linkval' $target>";
      $aend = "</a>";
 
    }
 
    $retval = $astart.$retval.$aend;
  }
 
 
  return $retval;
}
 
 
function gfImgtagErrorDecoration($msg) {
  return "<div style='color:red;'>&lt;imgtag&gt; $msg</div>";
}

Usage

<imgtag attribute="value" ...>
http://~
</imgtag>

attribute word

Combination of [a-zA-Z]

value word

Combination of [0-9a-zA-Z %:;_-#]

URL (required)

Space and CR are removed.
You can get URL from Google Image Chart Editor

link attribute

'link' is a special attribute to add a link on a image, not passed to img tag.

Example 1

<imgtag link="on">
http://chart.apis.google.com/chart
   ?chf=bg,s,EAF7FE
   &chs=220x110
   &cht=t
   &chtm=world
</imgtag>

will be translated to

<a href='http://chart.apis.google.com/chart?chf=bg,s,EAF7FE&chs=440x220&cht=t&chtm=world' target='_blank'>
<img src='http://chart.apis.google.com/chart?chf=bg,s,EAF7FE&chs=220x110&cht=t&chtm=world' />
</a>

Map chart size becomes 440x220 always.

Graph chart size becomes 547 as a longer side.

Example 2

<imgtag width="140" height="54" link="on">
http://www.google.co.jp/logos/2011/kenjiro11-hpi.jpg
</imgtag>

will be translated to

<a href='http://www.google.co.jp/logos/2011/kenjiro11-hpi.jpg' target='_blank'>
<img src='http://www.google.co.jp/logos/2011/kenjiro11-hpi.jpg' width="140" height="54" />
</a>

Example 3

<imgtag link="http://www.google.co.jp/">
http://www.google.co.jp/logos/2011/kenjiro11-hpi.jpg
</imgtag>

will be translated to

<a href='http://www.google.co.jp/' target='_blank'>
<img src='http://www.google.co.jp/logos/2011/kenjiro11-hpi.jpg' />
</a>

Link URL is also checked with $wgAllowExternalImagesFrom.

History

• 2011-Jun-22: Ver.0.1 released.

I tried to make this extension to be secured. But note that I'm far from a Security Specialist. All suggestions are welcome to improve. Thanks. by lionkid

• 2011-Jun-26: Ver.0.2 released. 'link' attribute added.

See also

• Extension:Google Chart
• Extension:GoogleCharts
• Extension:Gchart4mw