MediaWiki に Flickr の画像を埋め込む

Hitoshi Arakawa | 2024/03/27 Wed 04:39

docker-compose で MediaWiki を立てたことを書いた。

docker-compose で MediaWiki を立てる | The Official Website of Hitoshi Arakawa
https://www.hitoshiarakawa.com/blogs/2024/2024-03-20_docker-mediawiki/

通常の画像を表示させる方法についても書いた。

MediaWiki で画像表示 | The Official Website of Hitoshi Arakawa
https://www.hitoshiarakawa.com/blogs/2024/2024-03-26_displaying-images-on-mediawiki/

次は Flickr の画像を埋め込むことに挑戦した。

環境：
・VMware vSphere Hypervisor 7.0U3g
・Ubuntu 20.04.6
・MediaWiki 1.41.0
・macOS Ventura 13.5（作業環境）

（１）/extensions ディレクトリで CloudImage という拡張機能をダウンロード、解凍する。

$ sudo wget https://kimagurenote.net/file/CloudImage_20230731.zip
$ sudo apt install unzip
$ sudo unzip CloudImage_20230731.zip
$ sudo rm -f CloudImage_20230731.zip

（２）LocalSettings.php に以下を追記する。

# Extension:CloudImage
wfLoadExtension( 'CloudImage' );
$wgExternalLinkTarget = '_blank';
$wgNativeImageLazyLoading = true;
$wgCloudImageAspectRatio = true;

（３）MediaWiki の以下の URL にアクセスする。

https://{example.com}/index.php/MediaWiki:Common.css

以下を記入し、保存する。

/* Extension:CloudImage */
IMG.cimg {
    max-width: 100%;
}
FIGURE.cimg {
    clear: both;
    margin: 2px;
    border: 1px solid #c8ccd1;
    background-color: #f8f9fa;
    font-size: 94%;
    max-width: 80%;
}
FIGCAPTION.cimgcaption {
    padding: 2px;
    text-align: left;
}

必要に応じてカスタマイズする。例えば僕は背景の幅を 80% としている。デスクトップでは幅いっぱいだと写真が大きすぎるからだ。

以下のように記述すれば Flickr の写真を埋め込むことができる。

<cimg src="{FLickr の写真の URL}">これはキャプションです。</cimg>

参考：
CloudImage - きまぐれ手記 Kimagurenote
https://kimagurenote.net/kn/CloudImage

Extension:CloudImage - MediaWiki
https://m.mediawiki.org/wiki/Extension:CloudImage

[Linux]ファイルの圧縮、解凍方法 #Linux - Qiita
https://qiita.com/supersaiakujin/items/c6b54e9add21d375161f

MediaWikiでCSSを編集する方法 - キーワードノート
https://kw-note.com/cms/edit-mediawiki-css/

Amazon.co.jp: ウィキペディア・レボリューション: 世界最大の百科事典はいかにして生まれたか (ハヤカワ新書juice 5) : アンドリュー リー, Lih,Andrew, 敏生, 千葉: 本
https://amzn.to/3ILCwKI