a-blog cmsのスマホ表示で縮小された（拡大画像がない）画像を別ウィンドウで開く方法

レスポンシブでサイトを制作すると、スマホで表示した際に画像が縮小され、元画像が大きくても内容が読めない場合があります。a-blog cmsでは拡大画像があれば自動的にリンクされ元画像を開くことができますが、画像サイズを「そのまま」でアップしている場合や、サムネイル画像より元画像の画像サイズが大きくない場合は、拡大画像が存在しないためリンクもされません。

このような場合、本当はスマホ用に画像を用意し切り替えたいところですが、現実的な作業としてそのまま使い回すしかない場合も多々あります。そこでスマホの時に指定した画像だけ元画像へリンクする方法を考えてみました。

今回はユニットの「属性」を利用して設定を作ります。ここで拡大が選ばれていたら、元画像を開ける様にします。ver2.5の場合は「config.system.yaml」に下記を追記します。ここに設定をすることで、編集画面のユニットの属性に項目を追加することができます。僕は「画像の枠」の設定もよく使うので、計4パターンになりました。属性で「◯◯拡大（スマホ用）」と付いている画像に対して「_blank」で自分自身にリンクを貼ります。

# column_image_attr :
# column_image_attr_label :
column_image_attr : [, '1']
column_image_attr_label : [枠付き, 枠無し]
↓
# column_image_attr :
# column_image_attr_label :
column_image_attr : [, '1', ' spBigImg', '1 spBigImg']
column_image_attr_label : [枠付き, 枠無し, 枠付拡大（スマホ用）, 枠無し拡大（スマホ用）]

ちなみに、「spBigImg」の前には半角アキを入れています。こうすることで、例えば「枠無し拡大（スマホ用）」の時、実際には「class="columnImage1 spBigImg"」といった感じになり、2つのclassを指定できます。（「columnImage1」は枠の設定）

次は属性を選べるように、「/system/inlcude/unit.html」の画像を読み込むimgのclassに「{attr}」を追加します。system内のファイルを変更する場合は、利用テーマ内にコピーして使ってください。

img class="columnImage"
↓
img class="columnImage{attr}"

次はスマホの時にだけ読み込むjsを作成します。
classに「spBigImg」がある場合のみ、自分自身に元画像へのリンクを貼り「_blank」を設定しています。
こうすることで、スマホで小さくリサイズされてしまった画像を、別ウィンドウで開くことができます。ちなみに今回はユーザーが任意で設定できるため、表示サイズを判定するような処理は入れていません。

$('.spBigImg').each(function(){
	var linkUrl = $(this).attr('src');
	var imgHtml = $(this).get(0).outerHTML;
	var imgHtmlSet = '<a href="'+linkUrl+'" target="_blank">'+imgHtml+'</a>';
	$(this).replaceWith(imgHtmlSet);
});

最後はテンプレートにjsを読み込みます。
スマホの時だけ読み込める様に、IFブロックを使ってUAで分岐処理します。

<!-- BEGIN_IF [%{UA_GROUP}/lk/SmartPhone] -->
//ここでjsを読み込む
<!-- END_IF -->

これでスマホの時に指定された画像があった場合、画像に「_blank」でリンクすることができます。かなりマイナーな事例ですが、何かの役に立てば幸いです。