Extension:CloudImage

MediaWiki extensions manual
CloudImage
Release status: stable
Implementation Tag
Description embed image directly from Flickr, OneDrive, Dropbox and others
Author(s) Kimagurenote (Corytalk)
Latest version 1.1.5
MediaWiki 1.35+
PHP 8.0+
Database changes No
License BSD 3-clause "Modified" License
Download https://kimagurenote.net/kn/CloudImage#Download
https://kimagurenote.net/kn/CloudImage#History
Example https://kimagurenote.net/kn/CloudImage#Usage_%E4%BD%BF%E3%81%84%E6%96%B9
‎<cimg> ‎<flickr>

The CloudImage extension provides a way to embed images directly from image hosting services e.g. Flickr, OneDrive, Dropbox, SlideShare, Speaker Deck, imgur and others via useful format like ‎<img> tag.

Installation

edit
  • Download zip file from author's website, unzip it and place the file(s) in a directory called CloudImage in your extensions/ folder.
  • Add the following code at the bottom of your LocalSettings.php file:
    /* Extension:CloudImage */
    wfLoadExtension( 'CloudImage' );
    /* (option) if you want to embed images from local server */
    $wgCloudImageAllowedDomains = [ "www.yourdomain.com", "wiki.yourdomain.com" ];
    
    /* (option) link target */
    $wgExternalLinkTarget = '_blank';
    
    /* (option) lazy loading */
    $wgNativeImageLazyLoading = true;
    
  • Additional configure if you want to use Extension:FlickrAPI (‎<flickr> tag) compatible mode.
  • Add the following code at the bottom of your MediaWiki:Common.css. You can fully customize it.
/* Extension:CloudImage */
IMG.cimg {
	max-width: 100%;
}
FIGURE.cimg {
	clear: both;
	margin: 2px;
	border: 1px solid #c8ccd1;
	background-color: #f8f9fa;
	font-size: 94%;
}
FIGCAPTION.cimgcaption {
	padding: 2px;
	text-align: left;
}
  •   Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

Note: You will need interface-admin permission to edit Common.css on MediaWiki 1.32 or above.

Usage

edit

embed simply

edit

Just embed a image simply. But not forgot to close the tag by "/>". For example:

<cimg src="https://example.com/image.jpg" width="600" />

Note: border="0" set automatically if not set.

embed with caption

edit

You can specify some attributes similarly ‎<img> tag.

You can use "href" to attach a hyper link on the image.

And you can write a comment below the image.

For example:

<cimg src="https://example.com/sample.jpg"
	href="https://example.com/"
	width="400" height="300"
	title="test image"
	alt="test image"
	framestyle="clear: right; float: right;"
	captionstyle="text-align: right;">
comment here
</cimg>

Special attributes using here.

  • framestyle - styles for ‎<figure>
  • captionstyle - styles for ‎<figcaption>

embed from Dropbox

edit

You can embed Dropbox link of images directly. For example:

<cimg src="https://www.dropbox.com/s/9qwyhjuliy2whlu/18m4362_1920x1200.jpg?dl=0">[[w:Tadami Line|Tadami Line]] in winter</cimg>

embed from Flickr

edit

You can embed images hosted on Flickr directly. For example:

<cimg src="https://www.flickr.com/photos/kimagurenote/26817918388/in/album-72157649433330773/">Photo from [[Flickr]]</cimg>
↓ embed an image from Flickr directly ↓
 

Configuration

edit

Compatibility with Extension:FlickrAPI

edit

This extension provides a tag ‎<flickr> that has semi-compatibility with Extension:FlickrAPI for migration.

If you want to use this function, set the $wgCloudImageCompatibleFlickrAPI value above wfLoadExtension.

And set your Flickr API Key to $wgFlickrAPIKey. You can use same key as Extension:FlickrAPI.

/* Extension:CloudImage */
$wgCloudImageCompatibleFlickrAPI = true;
wfLoadExtension( 'CloudImage' );
$wgFlickrAPIKey = "(your api key set here)";

Note: This extension use Flickr API key with Extension:FlickrAPI (‎<flickr> tag) compatible mode only.

Object cache

edit

This extension use MediaWiki Object cache mechanism for saving to call Flickr API (exclude oEmbed).

If you use Extension:FlickrAPI compatibility mode, we recommend to set $wgMainCacheType.

And if you want clear the cache, set the value on LocalSettings.php and reload the image.

$wgCloudImageCachingTime = false;

Note: Purge not affect this extension.

Sites limitation

edit

You can embed images from Flickr, OneDrive, Dropbox, Google Drive, SlideShare, Speaker Deck and imgur only by default.

And you can add other sites if you want.

$wgCloudImageAllowedDomains = [ "www.example.com", "image.example.net" ];

Note: This variable is changed in v1.1.4. Former format is no longer recommended.

Attributes limitation

edit

You can use attributes 'width', 'height', 'class', 'style', 'title' and 'alt' only by default.

And you can add other attributes if you want.

e.g. add 'id'

$wgCloudImageAllowedAttrs[] = 'id';

Or you can overwrite this variable if you want to restrict some attributes.

e.g. restrict 'class' and 'style'

$wgCloudImageAllowedAttrs = [ 'width', 'height', 'title', 'alt' ];

Note: Attributes values must set lower-case letters.

edit

This extension refer the $wgExternalLinkTarget value.

$wgExternalLinkTarget = '_blank';

Lazy loading

edit

This extension support to use lazy loading mechanism since v1.1.5.

You can set $wgNativeImageLazyLoading in LocalSettings.php if you want to use this function.

$wgNativeImageLazyLoading = true;

Note: This parameter supported since MediaWiki version 1.34.0.

Timeout

edit

This extension timed out 60 seconds by default to call Flickr API.

We recommend to set shorten "default_socket_timeout" on php.ini as possible.

But Flickr oEmbed calling only, timed out 2 seconds by default.

And you can change it as follows.

$wgCloudImageFlickrTimeout = 1.5;

Custom tag

edit

You can use another tag e.g. ‎<img> as alias.

If you want to use this extension with ‎<img>, set the value above wfLoadExtension.

/* Extension:CloudImage */
$wgCloudImageTag = "img";
wfLoadExtension( 'CloudImage' );

Notice

edit

SlideShare (oEmbed), Speaker Deck (oEmbed) and imgur support are experimental.

This extension has some privacy risk. Use only at private site! For details see here: Manual:$wgAllowExternalImages#Why disallow external images?

See also

edit