Jump to content

Extension:CloudImage

From mediawiki.org
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;
}
  • Yes 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]