Extension:EImage

MediaWiki extensions manual

EImage Release status: stable
Implementation	Parser function , Special page
Description	Display images from another hosts as if they were stored locally.
Author(s)	Robert Pooley Robpol86, Aleš Kapica (Wanttalk)
Latest version	3.6 (2023-04-17)
Compatibility policy	Master maintains backward compatibility.
MediaWiki	1.35+
PHP	7.4+
Database changes	Yes
Tables	ei_cache ei_pages
License	GNU General Public License 2.0 or later
Download	Git [?]: Download Git master browse repository (Phabricator · GitHub) commit history repository contributors (GitHub) code review
Example	Registration scheme on Thewoodcraft.org
Parameters $wgEImageCache $wgEImageQRcode $wgEImageImgElement $wgEImageEmptyPng $wgEImageOnlyLocalSource $wgEImageSvg $wgEImageExif $wgEImageAvif $wgEImageStaleMinutes $wgEImagePdf $wgEImageDjVu
Tags ‎<eimage> (not need anymore)
Hooks used ArticlePurge LoadExtensionSchemaUpdates ParserClearState ParserFirstCallInit ParserOutputPostCacheTransform
Quarterly downloads	1 (Ranked 132nd)
Translate the EImage extension if it is available at translatewiki.net
Issues	Open tasks · Report a bug

EImage allows users to use images from external hosts and storage used clips into local cache. Images may be thumbnailed/resized/framed/cropped just like a local images. The syntax used is very similar to MediaWiki's Images syntax. EImage can also do overlay the base image by text (or image). Templates, wiki syntax or translation can be used too.

Installation

For full support, 'EImage requires the following external tools to be available:

• exiftool for support including the exif tags (Debian package exiftool)
• DjVu Libre for support DjVu multipage docs (Debian package djvulibre-bin)
• pdftocairo for support export PDF pages into SVG with crop functionality (Debian package poppler-utils)
• cairosvg for support export SVG into PDF (Debian package cairosvg)

• Download and move the extracted EImage folder to your extensions/ directory.
  Developers and code contributors should install the extension from Git instead, using:cd extensions/
git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/EImage
• Add the following code at the bottom of your LocalSettings.php file:

  wfLoadExtension( 'EImage' );
  

• Run the update script which will automatically create the necessary database tables that this extension needs.
•  Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

EImage is great extension for fans pure wikitext syntax, because is without dependency on Lua (Extension:Scribunto), and can use output functions Extension:ParserFunctions, Extension:Variables & etc. pure only PHP code.

Syntax and Examples

EImage to disposition this types of functions:

• Image (#eimage) : The "main" options for displaying the image. This is similar to MediaWiki's Images.
• Annotations (#eimagea): This is a separate parser function for an annotation. You can have as many of these as you want.
• New functionality (in progress since 3.1 version) #eimg to replace tag 'img' (depreceted from MW 1.39+). More important for me, that replace it my wikitext template Template:block, and local PHP script crop.php
• New functionality (in progress since 3.1 version) #eibox, get feature as my wikitext template Template:block. For example see my sandbox, where it's tested. -- Want (talk) 18:58, 10 March 2023 (UTC)
• Functions usable to get info about image (or another type of file) :

#eimgw : get width of file

#eimgh : get height of file

#earea : get info about width and height of the file, in #eimage usable form

#eimgsize : get size of the file for humans

#eimgmime : get mimetype (usable in templates)

#epages : get info about number of pages; usable in templates for multipage file detection

#eimgexif : get exif tags from local file - exiftool recommend (experimental)

#epath : get path of file, without server

• Inspiration for functions eimgw and eimgh, was Extension:ImageSizeInfoFunctions (last commit into Github Feb 8 2019)
• Next functions: earea, eimgsize, eimgmime and epages was created by Extension:MediaFunctions (unmaitained)
• Function eimgexif base on exiftool get info rightly from file in local storage, not database.

Attribute	Template:Image	Template:block	eibox	eimg	eimage	eimagea
	{{Image|	{{block|	{{#eibox:	{{#eimg:	{{#eimage:	{{#eimagea:
[0]	image name or URL	percentual size	image name, URL or 'none' string	image name or URL	URL of the image	XxY coordinates (px)
[1]	percentual width	string (content)	percentual width	percentual width	WxH size (px)	string (content)
[2]					string (content)	-
aaling	-	-	-	-	horizontal align	-
abg	-	-	-	-	background color	-
acolor	-	-	-	-	font color	-
afamily	-	-	-	-	font family	-
aheight	-	-	-	-	font height	-
annot	-	-	-	-	block area (#eimagea)	-
ashadow	-	-	-	-	font shadow	-
asize	-	-	-	-	font size	-
astyle	-	-	-	-	font style	-
aweight	-	-	-	-	font weight	-
baseline	-	-	-	-	vertical alignment	-
bg	-	-	-	-	-	background color
border	margin				?
bottom					vertical alignment	-
center	horizontal alignment	horizontal alignment	horizontal alignment	horizontal alignment	horizontal alignment	horizontal alignment
color	?	background color			-	font color
crop	X Y W H clip of source	-	-	X Y W H clip of source	-	-
family	-	-	-	-	-	font family
frameless					?
height	height image					line height
inherit						horizontal alignment
inline	-	-	-	-	horizontal alignment	-
justify						horizontal alignment
left	horizontal alignment	horizontal alignment	horizontal alignment	horizontal alignment	horizontal alignment	horizontal alignment
link					URL target
middle					vertical alignment	-
none					horizontal alignment (position)	-
page	number page	-	-	number page	-	-
resize	rescale	-	?	rescale	-	-
right	horizontal alignment	horizontal alignment	horizontal alignment	horizontal alignment	horizontal alignment	horizontal alignment
rotate	rotate (rad)	rotate (rad)	rotate (rad)	rotate (rad)	-	-
shadow	-	-	-	-	-	font shadow
size	-	-	-	-	-	font size
style	-	-	-	-	-	font style
sub	-	-	-	-	vertical alignment	-
super	-	-	-	-	vertical alignment	-
top					vertical alignment	-
text-top					vertical alignment	-
text-bottom					vertical alignment	-
undercenter	-	horizontal alignment	horizontal alignment	?	-	-
underleft	-	horizontal alignment	horizontal alignment	?	-	-
underright	-	horizontal alignment	horizontal alignment	?	-	-
weight	-	-	-	-	-	font weight
widht	width of source (pixels)	-	-	width of source (pixels)	-	-

#eimage

The full syntax for displaying an image is:

{{#eimage:image|options|caption}}

Refer to http://www.mediawiki.org/wiki/Help:Images for detailed descriptions. Below is a list of options available in EImage:

First parameter, URL of the image to display. If a raw URL is entered, you will need to also specify the width and height. If you want use image from local wiki, we can use Magic word {{filepath:…}}, which can be parametrized. For example:

{{#eimage:{{filepath:image.svg}}|{{#eimgh:image.svg}}x{{#eimgw:image.svg}}px|frameless|link={{fullurl:image.svg}}}}

Next usable options:

Format : border or frameless

Resizing : {width}x{height}px

Horizontal alignment : one of inline and/or left, right, center, none

Position : inline, displays the image(+frame) inline instead of as a floating block (it overrides the float option). Works best with none. Useful for displaying multiple thumbnails on one line.

Vertical alignment : one of baseline, sub, super, top, text-top, middle, bottom, text-bottom

Link : link={target} Currently only links that start with http/https/ftp are supported.

These options change the defaults for all annotations in an image (not all images). If no annotations are used, these are ignored:

Horizontal alignment : aalign=

Background color : abg= (default is transparent)

Font family : afamily=

Font size : asize=

Font weight : aweight=

Font style : astyle=

Font shadow : ashadow=

Font color : acolor=

Line height : aheight=

Last position parameter is accepted every as alternative note of image.

Some examples:

{{#eimage:http://upload.wikimedia.org/wikipedia/mediawiki/e/e1/Eimage_example.png|410x579px}}

If wiki has configured by Manual:$wgForeignFileRepos using images from another wiki, i.e. commons.wikimedia.org, we can use function #epath

{{#eimage:https://upload.wikimedia.org{{#epath:File:Wikimedia Hackathon Prague 2019 - Group Photo - CLK - cropped.jpg}}|200x400px}}

If use local image, you can use functions #earea:

{{#eimage:{{filepath:localimage.svg}}|{{#earea:localimage.svg}}px}}

or #eimgh and #eimgw, which can be use wit combination with parserfunctions, for dynamic resize.

{{#eimage:{{filepath:image.svg}}|{{#eimgh:image.svg}}x{{#eimgw:image.svg}}px|frameless|link=https://example.com/}}

#eimagea

Each image can have any number of annotations. In the {{#eimage}} tag use the annot= option to specify an annotation. The value of annot= is another function called {{#eimagea}}. Below are the options available for {{#eimagea}}:

• Horizontal alignment option: one of left, right, center, justify, inherit
• Background color option: bg=
• Font parameters :

family : family=

size : size=

weight : weight=

style : style=

shadow : shadow=

• Font color : color=
• Line height : height=

If a parameter does not match any of the other possibilities, it is assumed to be the annotation text. Annotations support wiki-formatting.

Some examples:

{{#eimage:{{filepath:background-image.jpg}}|200px|acolor=white|This is image from wiki repository
   |annot={{#eimagea:10x20|This is an annotation.}}
   |annot={{#eimagea:20x40|size=20|A bigger annotation.}}
   |annot={{#eimagea:30x60|'''Bold Annotation'''}}
   |annot={{#eimagea:40x80|shadow=-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000|Shadowed Annotation}}
   |annot={{#eimagea:50x100|[http://google.com Linked annotation]}}
   |annot={{#eimagea:60x120|right|This is a long and right justified anotation.}}
}}

#eibox

It's rework my Template:block (wikicode) into PHP code. Derrivated from Template:Image in July 2020. For now it's usable without background image support. In the future it replace the #eimage function, which use absolute measure and depends on the obsolete variable $wgAllowImgTag. Next example demonstrate using #eibox:

{{#eibox:none|30|right|color=red|Content of the right box}}{{#eibox:none|30|left|color=blue|Content of the left box.}}
Text, which is placed between red and blue box…
{{#eibox:none|100|color=green|}}
Text which continued after the green box.

Next code, was used by my Template:block:

{{block|30|right|color=red|Content of the right box}}{{block|30|left|color=blue|Content of the left box.}}
Text, which is placed between red and blue box…
{{block|100|color=green|}}
Text which continued after the green box.

Instead of the first none attribute it will be possible to use an image that will be displayed in the background of the box. The development of this functionality is not yet complete.

#eimg

The function #eimg extend #eibox. Use similary syntax, which is based on my Template:Image, originated on the original wiki syntax used by MW to the image insert. In simply form is very easy for use..

{{#eimg:image.jpg}}

Compare with the MW syntax:

[[Image:image.jpg]]

But typically using MW syntax is more complexity:

[[Image:image.jpg|200px|right|Comment to image in bubble.]]

But proble with the MW syntax is that doesn't allow set the size percentage. It was my start idea for Template:Image create. The following code does almost the same thing as MW code, but sets the percentage width.

{{Image|image.jpg|10|right|Comment to image in the bubble.}}

In June 2020, the functionality of the template was extended with the possibility of cropping by external wrapper crop.php. Cropping is a basic functionality for my wiki. It non sense for me do manually crop of the image, and after upload it, then I can do it by the extension EImage on-the-fly, using the original source by need. For now use my wiki about hundreds clips generated on-the-fly by PHP script 'crop.php'.

But I gradually replace this with the #eimg function, because use cache, which decrease processor load. For now the EImage support JPEG, GIF, PNG, SVG, PDF and DJVU format. Toto je stejný kód uvedený výše, realizovaný přes #eimg:

{{#eimg:image.jpg|10|right|Comment to image in the bubble.}}

For more examples using see my test pages:

• https://www.thewoodcraft.org/wiki/index.php/P%C3%ADskovi%C5%A1t%C4%9B
• https://www.thewoodcraft.org/wiki/index.php/test-eimage

History

• Extension EImage was created in 2011 by Robert Pooley, who was working as an IT Infrastructure specialist for Symantec. His inspiration was Template:Annotated image (Wikipedia). His idea: to integrate images from other sites into MediaWiki pages as background layers, and add on top layers with notes in wiki code and anothers images, was cool.

His implementation supported services as Flickr, or … fot it used file JSLikeHTMLElement.php where found inspiration how-to convert <a href="" /> links common in Flickr comments to wiki-formatted links.

In 2013 Robert change jobs and pushed the code to Github repository: https://github.com/Robpol86/EImage.git

• Thewoodcraft.org has used EImage since 29 May 2018, (MW 1.24.1 and PHP 5.x), but after upgrading to MW 1.33-wmf.22 (29. March 2019) with dependency on PHP 7.3, the code of this extension needed repair. The first serious use of it was the documentation page of Template:Image, where is used for demonstrate errors on the screenshots.
• On 19 February 2021‎, Pppery archived this page, because the download link was pointing to a GitHub repository marked as "This repository has been archived by the owner on Dec 13, 2020. It is now read-only."
• After upgrading Thewoodcraft.org to MW 1.39.2 (24. February 2023), I found out this fact, and that's why I decided to maintain this extension in addition to the Extension:AccessControl, and add other features used on my site. From the last version (waiting to repository created), I removed unusable code, and added functions from another orphaned extension used by me. New functions {{#imgw}} and {{#imgh}} (origin at Extension:ImageSizeInfoFunctions) and were the inspiration for next function {{#epath}} -- Want (talk) 10:37, 4 March 2023 (UTC)