Extension:ImageCompare

From Linux Web Expert

MediaWiki extensions manual
ImageCompare
Release status: unmaintained
File:ImageCompare.svg
Implementation Tag
Description Adds a tag to interactively compare two images using a slider
Author(s) Leduyquang03talk
Latest version 0.0.3 (2018-12-11)
MediaWiki 1.29+
PHP Any
Database changes No
License MIT License
Download
imgcomp
Quarterly downloads Lua error in Module:Extension at line 172: bad argument #1 to 'inNamespace' (unrecognized namespace name 'skin').
Public wikis using Lua error in Module:Extension at line 172: bad argument #1 to 'inNamespace' (unrecognized namespace name 'skin').
Translate the ImageCompare extension if it is available at translatewiki.net
Issues Open tasks · Report a bug

This extension adds the ‎<imgcomp> tag which displays an interactive slider for comparing two images side by side.

Installation

  • <translate> [[<tvar name=2>Special:ExtensionDistributor/ImageCompare</tvar>|Download]] and move the extracted <tvar name=name>ImageCompare</tvar> folder to your <tvar name=ext>extensions/</tvar> directory.</translate>
    <translate> Developers and code contributors should install the extension [[<tvar name=git>Special:MyLanguage/Download from Git</tvar>|from Git]] instead, using:</translate>cd extensions/
    git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/ImageCompare
  • <translate> Add the following code at the bottom of your <tvar name=1>LocalSettings.php </tvar> file:</translate>
    wfLoadExtension( 'ImageCompare' );
    
  • File:OOjs UI icon check-constructive.svg <translate> Done</translate> – <translate> Navigate to <tvar name=special>Special:Version</tvar> on your wiki to verify that the extension is successfully installed.</translate>

Usage

To add two images to compare, use the ‎<imgcomp> tag with these attributes (bold ones are required):

  • img1: The title of the image to the left ("before").
  • img2: The title of the image to the right ("after").
  • width: A number specifying the width for compared images in pixels. By default, images are added with their highest resolution.
  • mobilewidth: A number specifying the width of the images for the mobile version, also in pixels. If not specified, it will be 320 or the specified width if it is smaller.

The titles must not have the File: namespace. The inner content of the tag will be ignored.

Ideally, the two images should have the same width and height.

Examples

To compare JPEG example.jpg with PNG example.png:

<imgcomp img1='JPEG example.jpg' img2='PNG example.png' />

To compare Draft.png and Colored.png, with each image having the width of 400px:

<imgcomp img1='Draft.png' img2='Colored.png' width=400 />