Extension:EImage
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 | |
Example | Registration scheme on Thewoodcraft.org |
|
|
<eimage> (not need anymore) |
|
Quarterly downloads | 3 (Ranked 131st) |
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 yourextensions/
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.
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[1] | 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.
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)
References
- ↑ Vertical size in pixels. Typically value of it 1, if used with
empty.png
(transparent PNG 1x1 pixel image) as separator.