自作プラグイン/fig

2022-05-28 (土) 02:14:20

カテゴリ:プラグイン 自作 追加

fig.jpg

キャプション付きの画像を表示するプラグイン

fig.inc.php
製作者kanateko
ライセンスGPLv3
バージョン1.4
動作確認PukiWiki 1.5.3 - 1.5.4
最終更新2022-05-20

refプラグインにキャプションを付ける機能を追加したようなプラグイン。ただし、ブロック型の場合はfigureタグを使用しているため、若干使い道が異なる。

figure要素は自己完結型のコンテンツであるべきなので、主に無くても文脈の理解に影響しないような画像を表示するのに使用する。

インライン型の場合は (名前に反して) figureタグを使用しないため、どのような画像を表示しても問題ない。

参考:<figure>: キャプションが付けられる図要素 - HTML: HyperText Markup Language | MDN

このプラグインでできること
  • キャプション付きの画像を表示できる
    • キャプション無しも可
    • ブロック型のみPukiWiki記法を使用可能
  • 画像の表示位置を変更可能
  • ダークテーマとライトテーマを切替可能
  • キャプションの表示方法が2種類ある
  • キャプションのアラインメントを変更可能
  • 画像をリンク化するかどうかを指定可能

ダウンロード

最新: GitHub

日付バージョン備考
2022-05-201.4
  • 定数エラーの修正 (PHP8対応)
  • エラー表示の処理を変更
2021-09-301.3
  • クラスを追加する機能を追加
  • キャプションでPukiWiki記法が使えない問題を修正
1.2
  • フロートの有無を変更するオプションとプラグイン設定を追加
2021-09-291.1
  • インライン型を追加
1.0
  • 初版作成

セットアップ

  1. GitHubから「fig.inc.php」と「fig.css」をダウンロードする
  2. 「fig.inc.php」をpluginフォルダに追加する
  3. 「fig.css」の内容をskinフォルダの「pukiwiki.css」に追加する

プラグインの設定

FIG_FORMAT_REGEXP
許可するmime-type (正規表現)
FIG_DEFAULT_POSITION
デフォルトの表示位置
FIG_DEFAULT_THEME
デフォルトのテーマ
FIG_DEFAULT_WRAP
デフォルトの縁取りの有無
FIG_DEFAULT_LINK
デフォルトの画像リンクの有無
FIG_DEFAULT_FLOAT
デフォルトのフロートの有無
FIG_CAPTION_STYLE
デフォルトのキャプションの表示形式

使用方法

cat2.jpg
デフォルトの表示例

ブロック型

#fig(ファイル名[,オプション])

インライン型

&fig(ファイル名[,オプション])

第一引数は必ずファイル名であること。他のページに添付されているファイルも指定可能。
基本的な使い方はrefプラグインとほぼ同じだが、オプションの順番は特に決まっていない。

インライン型について

cat1.jpg
インライン型の場合、いくつかオプションに制限がつく。

使用できるオプション
  • キャプションの表示 (cap=xxx)
    • キャプションの表示位置はoverlay-leftで固定
    • PukiWiki記法は使用不可
  • クラスの追加 (class=xxx)
  • 画像のサイズ指定 (幅x高さ、%指定、px指定、width=、height=)
  • リンクの有無 (nolink)
  • title・alt属性の変更 (他のオプションに当てはまらない文字列)
その他の制限
  • 縁取りは無し
  • 引数での表示位置変更は不可
    • "CENTER:"などを使えば表示位置は変えられる

オプション

太字ではない部分 (主に"hoge="の部分) は省略可能。

全て開く

キャプションを表示する

キャプションの表示方法を変更する

画像の表示位置を変更する

フロートの有無を変更する

テーマを変更する

縁取りの有無を変更する

画像リンクの有無を変更する

クラスを追加する

サイズを変更する (幅x高さ)

サイズを変更する (%指定)

サイズを変更する (px指定)

サイズを変更する (個別指定)

title属性とalt属性の内容を変更する

追加したい機能

  • フロートの有無の変更v1.2で追加
  • attachrefみたいな機能

備考

開発経緯

before_after.jpg
ビフォーアフター

Wikiを編集する際、個人的にはよくページ右側に画像をフロート表示させるのだが、画像にキャプションを付けようと思うと結構記述が面倒だった。refプラグインに機能を追加しようかとも思ったが、用途的に新しく作ったほうがしっくり来ると思ったので、figureタグを用いてこのプラグインを作成することに。

結果として大分楽にキャプション付き画像を表示できるようになった。

コメント

最新の10件を表示しています。 コメントページを参照

  • こちらswiperとの連携は可能でしょうか? -- いちもり 2023-04-21 (金) 11:29:06
    • swiperとfigで特に連携機能等はありませんが、以下のようにスライドごとにfigを使用すれば問題なく動作するかと思います。 -- kanateko 2023-04-21 (金) 17:14:48
      #swiper(...){{
      #fig(...)
      #-
      #fig(...)
      }}
      • ありがとうございます! -- いちもり 2023-05-05 (金) 20:52:50