シンプルと多機能を併せ持った、ギャラリー系のプラグイン。

大体の使い方は、以下の参考サイトを見れば大丈夫だと思います。

参考サイト

画像のタイトルと説明をテキストファイルを使って表示

配布元サイトのExtrasタブにも書いてあるのですが、一応ここにも書いておきます。

まず、説明用のファイルを作ります。

  1. テキストファイルを作ります（日本語表示ならUTF-8に）

  2. 中身をこんな感じにします

    画像名.jpg|画像名.jpgのタイトル|画像名.jpgの説明
画像名2.jpg|画像名2.jpgのタイトル|画像名2.jpgの説明
  3. ファイル名を「captions.txt」にして、画像のあるディレクトリにアップします

ちなみに、画像の説明はなくても大丈夫です。

01.jpg|画像のタイトル

こんなんでもOK

この説明を表示するには、

  1. プラグイン管理 -> Content - Simple Image Gallery Extended -> Settings: Gallery -> Captionを「はい」に
  2. ギャラリーの呼び出しに、caption =1を付ける

のどちらかをします。プラグインの設定ですると、全てのギャラリーで出てしまうので、個別に書いたほうが良いかも。

2行以上のテキストファイルでの表示が途中で消えてしまう

コードとCSSに両方問題があります。CSS的にはliに対するoverflowがhiddenになっているからです。

  • /public_html/plugins/content/sige/plugin_sige/sige.css

通常の構成なら、ここにSIGE用のCSSファイルが入っています。これの9行目をみてみると、

.sige li{margin: 0 !important; overflow: hidden !important; background-image: none !important; padding: 0 !important;}

となっています。
とりあえず、overflow: hiddenをoverflow: visible にすると全て表示されるようになりますが、以下の画像のようになります。

出力されるCSSの問題

出力されたHTMLを見ればわかりますが、画像のサムネイルをリスト化して、floatさせています。
そのリストの部分のCSSが、

<style type='text/css'>
.sige_cont_0 {width:230px;height:250px;float:left;display:inline-block;}
</style>

こんなん。HTMLに直接出力されます。
.sige_cont_0の部分は、記事内でSIGEが呼ばれる度に数字がカウントアップしていきます。

問題はheightの部分で、これは「画像のサムネイル+画像の説明分のサイズ」なのですが、画像の説明分のサイズは20pxしかとられていません。
説明が2行以上の場合は、この20pxから下に飛び出ます。が、親コンテナのサイズは広がらないので、説明文だけ下のコンテナにめり込むような形になってしまいます。

解決法

  1. 1行表示で妥協する

    最も手っ取り早い解決方法。クリックして拡大すれば表示されるので、これはこれで。

  2. コードを修正する

    問題のCSSを出力しているコードが書いてある部分を修正します。
    修正するファイルは、

    • /public_html/plugins/content/sige/sige.php

    これです。

    まず、27行目付近の、

        protected $_absolute_path;
    protected $_live_site;
    protected $_rootfolder;
    protected $_images_dir;
    protected $_syntax_parameter;
    protected $_params;
    protected $_article_title;
    protected $_thumbnail_max_height;
    protected $_thumbnail_max_width;
    protected $_turbo_html_read_in;
    protected $_turbo_css_read_in;

    この部分の後に以下の2行を追加します。

        protected $_captions_max_length;
    protected $_captions_max_lines;

    次に、328行目へ。こんなコードがあります。

                            $sige_css = '';

                        if($this->_params['caption'])
                        {
                            $caption_height =  20;
                        }
                        else
                        {
                            $caption_height = 0;
                        }

    これを、

                            $sige_css = '';

                        /* get captions length */
                        if($file_info) {
						  foreach($file_info as $key => $value) {
						    if($this->_captions_max_length < mb_strlen($value[1])) {
						    	 $this->_captions_max_length = mb_strlen($value[1]);
						    }
						  }
						  /* get captions lines */
						  $line_length = ceil(($this->_thumbnail_max_width + $this->_params['gap_h']) / 11 );
						  $this->_captions_max_lines = ceil($this->_captions_max_length / $line_length );
						}

                        if($this->_params['caption'])
                        {
                            if($file_info) {
                              $caption_height = $this->_captions_max_lines * 20;
                            } else {
                              $caption_height = 20;
                            }
                        }
                        else
                        {
                            $caption_height = 0;
                        }

    こう書き換えます。
    これで、コードの修正は完了です。

    CSSを修正する

    次に、CSSファイルを修正する必要があります。

    • /public_html/plugins/content/sige/plugin_sige/sige.css

    これの7行目、

    .sige_caption{margin-left: auto;margin-right: auto;text-align: center;display: block;font-weight:bold;clear: both;}

    を

    .sige_caption{margin-left: auto;margin-right: auto;text-align: center;display: block;font-weight:bold;clear: both;font-size:12px;}

    とします。
    フォントサイズ固定は、個人的には好ましくないと思うのですが、コード上固定する必要があるのでやむなしです。

    以上で修正は完了です。

lightboxの表示を変える場合

  1. プラグイン管理 -> Content - Simple Image Gallery Extendedで設定へ
  2. Select JS viewとLoad JS filesを変更