a-blog cmsでSVGを画像プレイスホルダーとして使う

December 24 Sun 2017 | a-blog cms

この記事は Advent Calendar 2017の24日目のエントリーです。

この記事は、a-blog cms で画像がまだ読み込まれていないときに、表示するプレスホルダーをSVGで自動で作り画像ローディングを改善する一例を紹介したいと思います。

きっかけは、同僚のTweetで、最近流行っている？っぽいのでその流れに乗ってa-blog cmsでも実装してみました。見た目的にもオシャレな感じになるので、写真を多く使っているサイトで使ってみると面白いかもしれません。

この記事を参考にしました。 Using SVG as placeholders — More Image Loading Techniques

完成形

まずは、最終的にどのようなローディングになるかお見せしたいと思います。今回は２つのプレイスホルダー画像を用意しました。ローディング時だけだと一瞬なので、少しディレイをかけ、マウスオーバーでプレイスホルダー画像が表示されるようにしてあります。

単色画像

Googleの画像検索のように画像のメインカラーの単色画像をプレイスホルダーにした場合です。メインカラーは自動的に画像から判定されます。

シルエット画像

画像を２色でシルエット画像を生成して、プレイスホルダー画像にしています。

実装方法

前提条件

Ver. 2.7.x 系を前提に作ってあります。
phpでImagickが利用できる必要があります。

設置

以下のファイルをご利用のa-blog cms に設置してください。

ファイルが設置できると、管理画面 > 拡張アプリで ImagePlaceholder をインストールできるようになっています。ルートブログでインストールしましょう。

次に以下ファイルに１行追加します。

php/config/app.php の providers 配列に１行追加

'providers' => array(
...
    'Acms\Services\Http\HttpServiceProvider',
    'AAPP_ImagePlaceholder_Services_Provider', // この行を追加
),

使い方

まず、SVG画像はエントリーなどの保存時に生成されますので、上記の設定が完了後、エントリーを再保存して下さい。その後、SVGプレイスホルダーの出すには校正オプションを使って出力します。

単色プレイスホルダーの場合

<img src="{path}[fillCollorImage]" alt="{alt}" width="{x}" height="{y}"/>

シルエットプレイスホルダーの場合

<img src="{path}[dataUrlSvg]" alt="{alt}" width="{x}" height="{y}"/>

ただ、このままだと画像がプレイスホルダー画像に差し代わるだけで、プレイスホルダーとして動きません。そこで、最初はSVGプレイスホルダー画像を表示しておき、JavaScriptを使って画像がロードされたタイミングで、本来の画像に差し替える処理を行います。

例:

<script>
  ACMS.Ready(function(){
    $('.js-lazy-load').each(function(){
      var $self = $(this);
      var url = $self.data('url');
      var imageObj = new Image();
      imageObj.item = $self;
      imageObj.source = url;
      imageObj.onload = function(){
        var self = this;
        setTimeout(function(){
          self.item.attr('src', self.source);
        }, 500 + 3000 * Math.random());
      };
      imageObj.src = url;
    });
  });
</script>

<img class="js-lazy-load"
     src="{path}[dataUrlSvg]"
     alt="{alt}"
     width="{x}"
     height="{y}"
     data-url="%{HTTP_ROOT}{path}"
     data-placeholder="{path}[dataUrlSvg]"
>

どうでしたでしょうか？画像ギャラリーがあるようのページには有効だと思います。ぜひ使ってみて下さい！

tag : ablogcms 自動化

Web雑記帳 atsu666

完成形