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
Tags ‎<cimg> ‎<flickr>
Hooks used ParserFirstCallInit

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

• 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

embed simply

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

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

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

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

Compatibility with Extension:FlickrAPI

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

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

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

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.

Link target

This extension refer the $wgExternalLinkTarget value.

$wgExternalLinkTarget = '_blank';

Lazy loading

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

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

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

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

• CloudImage (author site, written in Japanese)
• Manual:$wgAllowExternalImages
• ‎<img>: The Image Embed element (MDN)
• oEmbed
• Extension:FlickrAPI
• Extension:HTMLets
• Extension:EImage