画像を Retina Display に対応する
CMSで表示させる画像には拡大画像の large- というファイルがあります。もともとは拡大表示用に利用している画像ですが、これをメイン画像として利用する事ができるようにする JavaScript を用意してみました。
大きな画像を利用する事になるので、サイトが重くなりますので、Cookie を利用して希望する人だけがキレイな画像のファイル名にJavaScriptで置き換えます。全ての画像を対象とするわけではなく、class="retinaImage" のついた画像のみを対象とします。
残念ながら2つを見比べてみても分からないですね。以下をご覧になってみて下さい。
retinaImage.js
$(function(){
if ( $.cookie('js-switch_retina[0]') == 'on' ) {
_.each($('.retinaImage'), function(v){
var imageUrl = v.src;
var fileName = imageUrl.match(".+/(.+?)([\?#;].*)?$")[1];
var largeUrl = imageUrl.replace(fileName, 'large-'+fileName);
var img = new Image();
img.src = largeUrl;
img.onload = function() {
v.src = largeUrl;
}
});
$('#retinaConfigOn').hide();
} else {
$('#retinaConfigOff').hide();
}
});切り替え用のフォーム
<form action="" method="post" class="acms-form" id="retinaConfigOn"> <input type="hidden" name="js-switch_retina" value="on" /> <input type="hidden" name="cookie[]" value="js-switch_retina" /> <input type="submit" name="ACMS_POST_Cookie" value="（現在 通常画像モード）高解像度の画像を使用する" class="acms-btn acms-btn-admin-primary"/> </form> <form action="" method="post" class="acms-form" id="retinaConfigOff"> <input type="hidden" name="js-switch_retina" value="off" /> <input type="hidden" name="cookie[]" value="js-switch_retina" /> <input type="submit" name="ACMS_POST_Cookie" value="（現在 Retinaモード）高解像度の画像を使用しない" class="acms-btn acms-btn-admin-danger"/> </form>
/themes/system/include/unit.html
unit#image ブロックの img タグに class="retinaImage" を追加します。
<!-- BEGIN unit#image -->
<!-- 画像 -->
<div class="column-image-{align}"{display_size}[raw]><!-- BEGIN link#front -->
<a href="{url}"{viewer}[raw]><!-- END link#front -->
<img class="columnImage retinaImage" src="%{ROOT_DIR}{path}" alt="{alt}" width="{x}" height="{y}" /><!-- BEGIN link#rear -->
</a><!-- END link#rear --><!-- BEGIN caption:veil -->
<p class="caption">{caption}</p><!-- END caption:veil -->
</div><!-- END unit#image -->