SIGE (SIMPLE IMAGE GALLERY EXTENDED)メモ
- Extension Tips
- 参照数: 4587
シンプルと多機能を併せ持った、ギャラリー系のプラグイン。
大体の使い方は、以下の参考サイトを見れば大丈夫だと思います。
参考サイト
-
SIGE (Simple Image Gallery Extended)
http://hi-demi.net/article/extension/75-sige-simple-image-gallery-extended.html
使い方の説明が書いてある日本語サイト
-
SIGE - Simple Image Gallery Extended
http://joomla25.kubik-rubik.eu/demo-sige-simple-image-gallery-extended
SIGE配布元サイトのデモページ
-
List of parameters
http://joomla-extensions.kubik-rubik.de/sige-simple-image-gallery-extended#list-of-parameters
SIGE配布元サイトのパラーメータ一覧ページ
画像のタイトルと説明をテキストファイルを使って表示
配布元サイトのExtrasタブにも書いてあるのですが、一応ここにも書いておきます。
まず、説明用のファイルを作ります。
- テキストファイルを作ります(日本語表示ならUTF-8に)
-
中身をこんな感じにします
画像名.jpg|画像名.jpgのタイトル|画像名.jpgの説明 画像名2.jpg|画像名2.jpgのタイトル|画像名2.jpgの説明
- ファイル名を「captions.txt」にして、画像のあるディレクトリにアップします
ちなみに、画像の説明はなくても大丈夫です。
01.jpg|画像のタイトル
こんなんでもOK
この説明を表示するには、
- プラグイン管理 -> Content - Simple Image Gallery Extended -> Settings: Gallery -> Captionを「はい」に
- ギャラリーの呼び出しに、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行表示で妥協する
最も手っ取り早い解決方法。クリックして拡大すれば表示されるので、これはこれで。
-
コードを修正する
問題の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の表示を変える場合
- プラグイン管理 -> Content - Simple Image Gallery Extendedで設定へ
- Select JS viewとLoad JS filesを変更