自作プラグイン/gallery

2021-09-29 (水) 05:23:46
gallery.jpg

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

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

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

このプラグインでできること
  • キャプション付きで画像を一覧表示
    • キャプションの表示/非表示の切替
    • 画像の横幅の変更
    • 画像を正方形や円に切り抜いて表示
    • 一覧の左寄せ、中央揃え、右寄せ指定
  • クリックorタップで拡大 & スライドショー
    • スワイプやピンチなどスマホ操作に対応
  • 編集無しでキャプション付きの画像を追加可能
    • 追加ボタンの表示/非表示
    • 凍結・編集制限付きの場合は追加不可

ダウンロード

最新: GitHub

日付バージョン備考
2021-09-291.7
  • ファイルとキャプションのセパレータを変更するための設定を追加
2021-07-261.6
  • 対応する拡張子にwebpを追加*1
  • 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. photoswipeを適当な場所にダウンロード・解凍する。
  2. 解凍した中の「dist」フォルダの名前を「pswp」に変更し、この「pswp」フォルダをPukiWikiの「skin」フォルダに入れる。
    • ※「default-skin」フォルダおよび「photoswipe.min.js」「photoswipe-ui-default.min.js」「photoswipe.css」以外は削除してもOK。
  3. photoswipe-simplifyを適当な場所にダウンロード・解凍し、dist/js/ の「photoswipe-simplify.min.js」を「pswp」フォルダに追加する。
  4. GitHubから「gallery.inc.php」フォルダをダウンロードし、中にはいっている「gallery.inc.php」をPukiWikiの「plugin」フォルダに入れ、「gallery.css」の内容をpukiwiki.cssに追加する。
  5. PukiWikiの設定でマルチラインプラグインを許可する。
    pukiwiki.ini.phpの56行目
     define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
    
  6. URL短縮ライブラリを導入している場合は「gallery.inc.php」の "PLUGIN_GALLERY_USE_SHORT_URL" をtrueに変える。

プラグイン設定

PLUGIN_GALLERY_MAX_FILESIZE
アップロード可能なファイルの最大サイズ。デフォルトは1MB
PLUGIN_GALLERY_USE_SHORT_URL
短縮URLを使用しているかどうか。デフォルトはfalse (参照: PukiWikiのクソ長いURLをURL短縮ライブラリを組み込んで解決する! | SEの良心)
PLUGIN_GALLERY_SEPARATOR
ファイルとキャプションのセパレータ。デフォルトは ">"

使用方法

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

キャプションは省略可

オプション
  • height=数値
    一覧画像の高さを指定する。 (px)
    デフォルトは180。
  • width=数値
    一覧画像の横幅を指定する。 (px)
  • noadd
    画像追加ボタンを非表示にする。
  • nocap
    一覧表示のキャプションを非表示にする。
    拡大した際には画面の下に表示される。
  • nowrap
    画像の縁取りを無くす。
  • left / center / right
    画像の一覧を左寄せ/中央揃え/右寄せにする。
    デフォルトは中央揃え。
  • square / circle
    一覧表示した画像を正方形/円に切り抜いて表示する。
    circleの場合キャプションは強制的に非表示になる。

使用例

ベーシック

画像の幅は比率を保った状態で自動的に変わる。

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

#gallery{{
cat1.jpg>かわいい
cat2.jpg
cat3.jpg
}}

横幅指定

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

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

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

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

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

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

キャプションは表示されない。拡大時には表示される。

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

追加したい機能

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

備考

  • まっさらなPukiWikiの環境ではテストしてないので、動作や表示がうまく行われない可能性がある。使用に際して何らかの影響があったとしても責任は取りかねますので予めご了承を。
    案の定まともに動かなかったので修正。
  • このページで表示されている追加ボタンのアイコン表示は配布版には実装されていない。 (別途FontAwesomeの導入が必要になるため)
  • photoswipe単体だと色々と盛り込むことが多く、プラグイン化するにあたって面倒だったため、下記サイトで公開・配布されていた「photoswipe-simplify」を併せて使うことにした。
    VanillaJSの高機能Lightboxプラグイン「PhotoSwipe.js」を使いやすくしてみた | Will Style Inc.|神戸にあるウェブ制作会社
    VanillaJSの高機能Lightboxプラグイン「PhotoSwipe.js」を使いやすくしてみた | Will Style Inc.|神戸にあるウェブ制作会社
    こんにちは、制作の奥田です。今期から取締役 CTOに就任しました。就任したからといってもやる業務は大きくは変わる事はなく、引き続き魂を込めて制作していきたいと思います。さて、VanillaJSでWebサイトやWebアプリケーションを作ってお...
    https://www.willstyle.co.jp/blog/1881/

コメント

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

  • とても便利なプラグインですね!使わせていただきます。 -- - 2021-06-25 (金) 22:29:27