#author("2024-02-14T16:48:53+09:00;2023-06-10T03:06:23+09:00","default:kanateko","kanateko")
#author("2024-02-14T16:53:26+09:00;2023-06-10T03:06:23+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加);

#ref(gallery.jpg,nolink,center,wrap,400x)

#contentsx
*画像のギャラリー表示プラグイン [#x4043488]
#infobox(plugin){{
name=gallery
ver=2.7
pukiwiki=1.5.3
update=2023-06-10
}}


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

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

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

*ダウンロード[#nc904a0b]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]

#style(addstyle=height:500px){{
|~日付|~バージョン|~備考|h
|CENTER:120|CENTER:60|570|c
|2023-06-10|2.7|#ul(all指定時、キャプションの投稿時間が正しくなかった問題を修正,sortとnocapを同時指定した際にキャプションが表示されてしまう問題を修正)|
|2023-05-27|2.6|#ul(キャプションの検索とソートを追加)|
|2023-05-24|2.5|#ul(参照するページを指定するオプションを追加)|
|2022-11-16|2.4|#ul(ソートと検索機能を追加)|
|~|2.3|#ul(添付されたすべての画像を表示するオプションを追加)|
|2022-07-09|2.2|#ul(画像の挿入位置を変更するオプションを追加,アクション型にあった脆弱性を修正,各オプションの初期値と初期化のタイミングを変更,画像サイズ計算時の0の扱いを変更)|
|2022-07-09|2.1|#ul(nobreakオプション (折り返しなし) を追加)|
|2022-07-08|2.0|#ul(Photoswipeのバージョンアップに対応,全体的にコードを改良,画像追加時、ページ上に全く同じギャラリーがあるとその全てが書き換えの対象になる問題を修正,キャプションでPukiWiki記法を利用可能に)|
|2022-05-18|1.8|#ul(PukiWiki 1.5.4のURLカスタマイズに対応)|
|2021-09-29|1.7|#ul(ファイルとキャプションのセパレータを変更するための設定を追加)|
|2021-07-26|1.6|#ul(対応する拡張子にwebpを追加,1回のみ挿入する初期化用のスクリプトを整理)|
|2021-07-11|1.5|#ul(初期化用コードの呼び出しが1回だけになるよう修正)|
|2021-07-01|1.4|#ul(他のページの添付画像を指定する場合、階層化されたページを指定すると添付ファイルを正常に取得できなかった問題を修正)|
|2021-06-22|1.3|#ul(一覧画像の高さを設定する機能を追加,上に伴い、デフォルト設定を幅300pxから高さ180pxに変更)|
|~|1.2|#ul(素の状態のPukiWikiだとアップロード後元のページに戻る際にFatalErrorが出る問題を修正,素の状態のPukiWikiだと一覧画像の高さが自動調整されなかった問題を修正)|
|2021-06-21|1.1|#ul(画像のボーダー (縁取り) を無効にする機能を追加,切り抜き時のキャプションはcircleのみ非表示になるよう変更)|
|2021-06-20|1.0|#ul(ページの編集権限をチェックする機能を追加,画像追加ボタンのデザインを調整,画像一覧の左寄せ・中央・右寄せを設定する機能を追加,画像一覧の画像を正方形や円に切り抜いて表示する機能を追加,画像一覧でキャプションを非表示にする機能を追加)|
|2021-06-19|0.7|#ul(ファイルフォーマットの判別を厳正化,アップロードに失敗した場合のエラーメッセージ表示を追加)|
|2021-06-18|0.6|#ul(使用するライブラリをlightboxからphotoswipeに変更,スマホでの操作性を最適化)|
|2021-06-17|0.5|#ul(画像の追加機能を実装,画像追加ボタンの表示/非表示切り替え機能を追加)|
|~|0.2|#ul(他のページの添付画像を表示する機能を追加,一覧表示の画像の横幅を変更する機能を追加)|
|2021-06-16|0.1|初版作成|
}}
*セットアップ [#ma9d057e]
+GitHubにある「plugin-gallery」フォルダをダウンロードし、中身 (skinフォルダとpluginフォルダ) をそのままpukiwikiのディレクトリに放り込む。
+PukiWikiの設定でマルチラインプラグインを許可する。
pukiwiki.ini.phpの56行目
#prism(php){{
 define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
}}

*プラグイン設定 [#l10e79ce]
#style(word-break:break-all;,class=table_compact){{{
#tableif(^(int|\d+)$=COLOR(#62bf4b),^string|'$|DIR \.=COLOR(#cb643d),^(bool|true|false)$=COLOR(#463dcb)){{
|~グローバル&br;(PLUGIN_GALLERY_~)|~型|~初期値|~説明|h
|BOLD:BGCOLOR(--table-header-td-color):180|CENTER:80|220||c
|PSWP_CORE|string|'https://unpkg.com/photoswipe/dist/photoswipe.esm.min.js'|Photoswipeの必要ファイル(CDN経由)&br;ローカルに保存して使用する場合は要書き換え|
|PSWP_LIGHTBOX|string|'https://unpkg.com/photoswipe/dist/photoswipe-lightbox.esm.min.js'|~|
|PSWP_CSS|string|'https://unpkg.com/photoswipe/dist/photoswipe.css'|~|
|SORT_JS|string|'https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js'|ソート用のライブラリ|
|CSS|string|SKIN_DIR . 'css/gallery.css'|PukiWiki用CSS|
|SEPARATOR|string|'>'|画像とキャプションのセパレータ|
|AVAILABLE_FORMATS|string|'/[1-3] or 18/'|対応するフォーマット ([[参考:https://www.php.net/manual/ja/function.exif-imagetype.php#refsect1-function.exif-imagetype-returnvalues]])|
|>|>|>|BGCOLOR(--color-key):COLOR(white):~GalleryActionクラス|
|MAX_FILESIZE|int|1024|ファイルサイズの最大 (キロバイト)|
}}
}}}

*使用方法 [#gf4f575f]
 #gallery([オプション]){{
 ファイル名>キャプション
 ︙
 }}
キャプションやマルチライン部分は省略可。
後々画像を追加する予定で設置しておくだけなら`#gallery`のみでOK。

#box(label,title=オプション,box-color=black){{
: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 = < ページ名 > &size(8){&color(#ff0000){New!};};|
画像の参照先ページを指定する。
}}

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

*使用例 [#me8eb03d]
**初期状態 (追加ボタンのみ) [#f30f4bba]
 #gallery
#gallery

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

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

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

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

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

**横幅指定 + 切り抜き (正方形) + 左寄せ + 縁無し [#ibbb6cda]
切り抜きは画像の中央が基準点になる。

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

**横幅指定 + 切り抜き (円) + 追加ボタンなし + 折り返しなし [#w129022b]
円の切り抜きを指定するとキャプションが非表示になる。

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

**自動追加 + ソート&検索 [#y71bdc9d]
 #gallery(all,sort)
#gallery(all,sort)

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

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