画像を Retina Display に対応する

この記事は公開日より11年以上経過しているため、現在の内容と異なる可能性があります。

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 -->