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.2
MediaWiki	1.35+
PHP	8.0+
Database changes	No
Tags ‎<cimg> ‎<flickr>
Hooks used ParserFirstCallInit
Licence	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

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.

Installation

At first, you must get Flickr API Key if you want to embed images from Flickr.

• 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:

  /* (option) if you want to use <flickr> tag compatibility */
  $wgCloudImageCompatibleFlickrAPI = true;
  /* CloudImage */
  wfLoadExtension( 'CloudImage' );
  /* (option) if you want to embed images from Flickr */
  $wgFlickrAPIKey = "(your api key here)";
  /* (option) if you want to embed images from local server */
  $wgCloudImageAllowedDomains['www.yourdomain.com'] = '';
  /* (option) if you want to embed highly resolution image from Flickr */
  $wgCloudImageFlickrLargeSize = "Large";
  

• Configure $wgMainCacheType if you want to use caching mechanism for saving to call Flickr API.
• 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.

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 comment

You can specify some parameters 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>

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 value above wfLoadExtension.

/* CloudImage */
$wgCloudImageCompatibleFlickrAPI = true;
wfLoadExtension( 'CloudImage' );

High resolution images

This extension has automatically selected similar size thumbnails from Flickr by default.

Or you can use large size thumbnails for high resolution screens.

If you want to use this function, set the value on LocalSettings.php.

$wgCloudImageFlickrLargeSize = "Large";

Sites limitation

You can embed images from Flickr and OneDrive by default.

And you can add other sites if you want.

$wgCloudImageAllowedDomains['www.yourdomain.com'] = '';

Note: This variable must set the value (empty string).

Attributes limitation

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

And you can add other attributes if you want.

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

Link target

This extension refer the $wgExternalLinkTarget value.

$wgExternalLinkTarget = '_blank';

Timeout

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

If you use it to embed Flickr images, we recommend to set "default_socket_timeout" on php.ini shorten.

Object cache

This extension use MediaWiki Object cache mechanism for saving to call Flickr API.

If you use this extension to embed Flickr images, 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.

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.

/* 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)
• Extension:FlickrAPI
• Extension:EImage