a-blogで記事を投稿する際に、画像ユニットでライトボックスが出たり出なかったりという事態があった。
原因は、画像ユニットでアップする画像が、
- 画像サイズがそのままになっている
- 画像ユニットで設定している画像サイズより小さい画像をアップする
以上の条件が当てはまると、ライトボックスが出ない（画像ユニットにリンクが貼られない）ようです。
そんな仕様なんか気にせずに、投稿者がライトボックスを用いるかコントロールできるようにしてみた。
割りと突貫工事なので、信頼性は欠けると思います。
privateフォルダにあるconfig.system.yamlを追記する。
config.system.yaml
# column_image_attr :
# column_image_attr_label :
column_image_attr : [' lb', ' lbNo']
column_image_attr_label : [ライトボックス, ライトボックスいらない]
これで画像ユニットで属性という項目が追加され、そこでライトボックスの制御ができるようになる。
column_image_attrの値で、空白を入れているのは、クラスを追加することを想定しているため。
include/main/unit.html
<!-- 画像 -->
<img class="columnImage{attr}" src="%{ROOT_DIR}{path}" alt="{alt}" width="{x}" height="{y}" />
{attr}を追加することで、属性の値を取得できる。
$('.lb').each(function(){
//画像ユニットで拡大リンク貼るを選択している場合、リンクタグを追加
var parent = $(this).parent('a').length;
var linkUrl = $(this).attr('src');
var imgHtml = $(this).get(0).outerHTML;
var imgHtmlSet = '<a href="'+linkUrl+'" class="over "rel="prettyPhoto[]">'+imgHtml+'</a>';
if(!parent){ //a-blogですでに拡大画像やリンクURLが存在している場合以外、以下の処理を行う
$(this).replaceWith(imgHtmlSet);
}
});
$('.lbNo').each(function(){
//画像ユニットで拡大リンク貼らないを選択している場合、リンクタグを削除
var parent = $(this).parent('a').length;
if(!parent){ //a-blogですでに拡大画像やリンクURLが存在している場合以外、以下の処理を行う
$(this).parent('a').unwrap();
}
});
jsで画像にlbImgがあればリンクをはり、lbNoImgならリンクを外す処理をjavascriptで無理やり制御。
これで多分OKのはず。