自作プラグイン/gallery

2024-09-09 (月) 14:41:10

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

gallery.jpg

画像のギャラリー表示プラグイン

gallery.inc.php
製作者kanateko
ライセンスGPLv3
バージョン2.8
動作確認PukiWiki 1.5.3 - 1.5.4
最終更新2024-09-09

photoswipeを使って画像ギャラリーを作成するプラグイン。添付した画像を任意の数並べ、クリックorタップでグループごとにモーダルウィンドウでスライド表示する。

手動で表示する画像やキャプションを設定できる他、すべての添付ファイルを自動で表示することもできる。オプションで指定すればソートや検索といった機能も使用可能。

  • キャプション付きでサムネイルを一覧表示する
  • 様々なオプションを指定可能
    • キャプションの表示/非表示
    • 追加ボタンの表示/非表示
    • サムネイルのサイズ
    • サムネイルのクロップ
    • サムネイルの配置 (justify-content準拠)
    • 折り返しの有無
    • 追加画像の挿入位置
    • ソート & 検索
    • 参照ページの一括指定
  • すべてのファイルを自動でギャラリー化することも可能
  • クリックorタップで拡大 & スライドショー
    • スワイプやピンチなどスマホ操作に対応
    • ファイル名やキャプションを画面下に表示する
  • 編集無しでキャプション付きの画像を追加可能
    • 凍結・編集制限付きの場合は追加不可

ダウンロード

最新: GitHub

日付バージョン備考
2024-09-092.8
  • サムネイル間の余白を指定するオプションを追加
2023-06-102.7
  • all指定時、キャプションの投稿時間が正しくなかった問題を修正
  • sortとnocapを同時指定した際にキャプションが表示されてしまう問題を修正
2023-05-272.6
  • キャプションの検索とソートを追加
2023-05-242.5
  • 参照するページを指定するオプションを追加
2022-11-162.4
  • ソートと検索機能を追加
2.3
  • 添付されたすべての画像を表示するオプションを追加
2022-07-092.2
  • 画像の挿入位置を変更するオプションを追加
  • アクション型にあった脆弱性を修正
  • 各オプションの初期値と初期化のタイミングを変更
  • 画像サイズ計算時の0の扱いを変更
2022-07-092.1
  • nobreakオプション (折り返しなし) を追加
2022-07-082.0
  • Photoswipeのバージョンアップに対応
  • 全体的にコードを改良
  • 画像追加時、ページ上に全く同じギャラリーがあるとその全てが書き換えの対象になる問題を修正
  • キャプションでPukiWiki記法を利用可能に
2022-05-181.8
  • PukiWiki 1.5.4のURLカスタマイズに対応
2021-09-291.7
  • ファイルとキャプションのセパレータを変更するための設定を追加
2021-07-261.6
  • 対応する拡張子にwebpを追加
  • 1回のみ挿入する初期化用のスクリプトを整理
2021-07-111.5
  • 初期化用コードの呼び出しが1回だけになるよう修正
2021-07-011.4
  • 他のページの添付画像を指定する場合、階層化されたページを指定すると添付ファイルを正常に取得できなかった問題を修正
2021-06-221.3
  • 一覧画像の高さを設定する機能を追加
  • 上に伴い、デフォルト設定を幅300pxから高さ180pxに変更
1.2
  • 素の状態のPukiWikiだとアップロード後元のページに戻る際にFatalErrorが出る問題を修正
  • 素の状態のPukiWikiだと一覧画像の高さが自動調整されなかった問題を修正
2021-06-211.1
  • 画像のボーダー (縁取り) を無効にする機能を追加
  • 切り抜き時のキャプションはcircleのみ非表示になるよう変更
2021-06-201.0
  • ページの編集権限をチェックする機能を追加
  • 画像追加ボタンのデザインを調整
  • 画像一覧の左寄せ・中央・右寄せを設定する機能を追加
  • 画像一覧の画像を正方形や円に切り抜いて表示する機能を追加
  • 画像一覧でキャプションを非表示にする機能を追加
2021-06-190.7
  • ファイルフォーマットの判別を厳正化
  • アップロードに失敗した場合のエラーメッセージ表示を追加
2021-06-180.6
  • 使用するライブラリをlightboxからphotoswipeに変更
  • スマホでの操作性を最適化
2021-06-170.5
  • 画像の追加機能を実装
  • 画像追加ボタンの表示/非表示切り替え機能を追加
0.2
  • 他のページの添付画像を表示する機能を追加
  • 一覧表示の画像の横幅を変更する機能を追加
2021-06-160.1初版作成

セットアップ

  1. GitHubにある「plugin-gallery」フォルダをダウンロードし、中身 (skinフォルダとpluginフォルダ) をそのままpukiwikiのディレクトリに放り込む。
  2. PukiWikiの設定でマルチラインプラグインを許可する。
    pukiwiki.ini.phpの56行目 
     define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled

プラグイン設定

グローバル
(PLUGIN_GALLERY_~)		型初期値説明
PSWP_COREstring'https://unpkg.com/photoswipe/dist/photoswipe.esm.min.js'Photoswipeの必要ファイル(CDN経由)
ローカルに保存して使用する場合は要書き換え
PSWP_LIGHTBOXstring'https://unpkg.com/photoswipe/dist/photoswipe-lightbox.esm.min.js'
PSWP_CSSstring'https://unpkg.com/photoswipe/dist/photoswipe.css'
SORT_JSstring'https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js'ソート用のライブラリ
CSSstringSKIN_DIR . 'css/gallery.css'PukiWiki用CSS
SEPARATORstring'>'画像とキャプションのセパレータ
AVAILABLE_FORMATSstring'/[1-3] or 18/'対応するフォーマット (参考)
GalleryActionクラス
MAX_FILESIZEint1024ファイルサイズの最大 (キロバイト)

使用方法 

#gallery([オプション]){{
ファイル名>キャプション
︙
}}

キャプションやマルチライン部分は省略可。
後々画像を追加する予定で設置しておくだけなら#galleryのみでOK。

height = < サイズ指定 >
サムネイルの高さを指定する (px, %, vh, etc...) 。単位がない場合はpx扱いになる。
指定しない場合は自動的に180pxになる。
width = < サイズ指定 >
サムネイルの幅を指定する (px, %, vw, etc...) 。単位がない場合はpx扱いになる。
指定しない場合は自動的に高さに合わせて計算される。
noadd
画像追加ボタンを非表示にする。
nobreak
サムネイルの折り返しを無効にする。
nocap
キャプションを非表示にする。
nowrap
サムネイルの縁取りを無くす。
< justify-contentの値 >
サムネイルの配置を変更する。
指定しない場合は中央揃えになる。
left / start / flex-start: 左詰め
right / end / flex-end: 右詰め
center: 中央揃え
space-around / space-between / space-evenly: 中央揃え + 余白調整
square / circle
サムネイルを正方形/円に切り抜いて表示する。
circleの場合キャプションは強制的に非表示になる。
bottom / top
フォームから追加した画像の挿入位置を指定する。
指定しない場合は下に追加される。
all
ページに添付されているすべての画像を自動でギャラリーに追加する。
キャプションにはファイル名と投稿日時が表示される。
sort
ソート用のボタンと検索用のフォームを表示する。
ファイル名とキャプション、投稿日時でソート可能。
page = < ページ名 >
画像の参照先ページを指定する。
gap = < 数字 > [ 単位 ] New!
サムネイル間の余白の幅を指定する。単位がない場合はpx扱い。

※元のサイズを超える幅や高さは指定できない。超えている場合は元のサイズで表示される。
※サイズの % 指定は個々の画像の元サイズに対する割合。

使用例

初期状態 (追加ボタンのみ) 

#gallery

画像の追加

他のページに添付してある画像を表示する場合は "ページ名/ファイル名" (refプラグインなどと同じ) で記述すればOK。

キャプションにはPukiWiki記法が使える。ただし反映されるのは拡大表示時のキャプションのみ。

#gallery{{
cat1.jpg>かわいい
cat2.jpg>カ&br;ワ&br;イ&br;イ
cat3.jpg>&color(tomato){kawaii};
}}

横幅指定

横幅を指定すると、高さが比率を保ったまま自動的に変わるようになる。

#gallery(width=150){{
cat1.jpg>かわいい
cat2.jpg>カワイイ
cat3.jpg>kawaii
}}

横幅指定 + 切り抜き (正方形) + 左寄せ + 縁無し

切り抜きは画像の中央が基準点になる。

#gallery(width=10vw,square,left,nowrap){{
cat1.jpg>かわいい
cat2.jpg>カワイイ
cat3.jpg>kawaii
}}

横幅指定 + 切り抜き (円) + 追加ボタンなし + 折り返しなし

円の切り抜きを指定するとキャプションが非表示になる。

#gallery(width=200,circle,noadd,nobreak){{
cat1.jpg>かわいい
cat2.jpg>カワイイ
cat3.jpg>kawaii
︙
}}

自動追加 + ソート&検索 

#gallery(all,sort)

追加したい機能

  • 他のページの添付画像使えるようにする v0.2で実装
  • 一覧表示時の画像の横幅指定 v0.2で実装
  • 画像追加機能 v0.5で実装
  • 添付ファイルの厳正な制限 v0.7で実装
  • デザインの調整 v1.0で一旦完了
  • 画像の追加位置 (上下) の変更 v2.2で実装

備考

  • 2022年3月末にphotoswipeのメジャーアップデートがあり、対応させるにはプラグインの処理を大幅に変える必要があったため、この機会にと全面改修を行った (v2.0) 。v2.0の動作にはPHP7.4以上が必要になる。7.3以前は去年でサポート切れているしいいかなと・・・。古いバージョンで動作させる場合、null合体代入演算子 (??=) をnull合体演算子やエルビス演算子に置き換えたり、戻り値の型宣言を削除すれば動くと思われる。
  • photoswipe v5 からキャプションのサポートが無くなってしまったので、UI要素追加機能で補っている。最初はDynamic Caption Pluginを使う方向で作っていたが、必要ファイルがごちゃごちゃしてきたため最終的には見送りに。見た目的には上記プラグインを組み込んだ方が v4 以前に近くなる。

コメント

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

  • とても便利なプラグインですね！使わせていただきます。 -- - 2021-06-25 (金) 22:29:27
  • 便利なプラグインありがとうございます. photoswipe 5.2.8ではdistフォルダ内にphotoswipe-ui-default.min.jsファイルがなくなってしまいました. 気づかずにプラグインを実装したところサムネイルとキャプションは描出されましたが, クリックしても大きな元画像は見ることはできませんでした. -- konapon 2022-07-04 (月) 18:03:34
    • ご報告ありがとうございます。
      どうやら今年3月にメジャーアップデートがあったようですね。現在製作中のプラグインが片付いたら最新Verに対応させようと思いますので、ひとまずそれまではv4.1.3を利用していただけたらと思います。 -- kanateko 2022-07-04 (月) 19:45:19
  • v4.1.3のリンクありがとうございます。ぜひ欲しいプラグインなので早速使わせていただきます. -- konapon 2022-07-05 (火) 10:15:32
  • このプラグインのおかげでサイトの画像の見栄えが大変よくなりました。
    ありがとうございます。
    こちらのプラグインの検索機能ですが、
    キャプションで絞り込むことはできないでしょうか。
    それができるとtagプラグインと合わせて使えてさらに便利になると思います。 -- 2023-05-26 (金) 23:47:47
    • キャプションの検索とソートを追加追加しました。 -- kanateko 2023-05-27 (土) 00:40:50
    • キャプションでの検索・ソート機能の対応ありがとうございます。
      画像を見つけやすくなってとても助かりました。 -- 2023-06-04 (日) 16:50:33