被写体の追従するレスポンシブなイメージ・ボックスをつくる方法

💡Crop Hints — WordPress Pluginは「Hawk Vision — WordPress Plugin」にリニューアルされました。

Hawk Vision – WordPress Plugin

— Crop Hints プラグインでつくる実装例 1

Crop Hints - WordPress Plugin

1. 写真をメディアライブラリにアップロードする

まずはなんでも良いので、好みの画像を WordPress のメディアライブラリにアップロードし、クロップヒントを抽出します。

この際、被写体が中央にある写真ではなく左右または上下に寄ったものを選択すると結果が分かり易いものになります。

ここでは Unsplash からお借りした、次の写真を使うことにします。

Photo by Alex Blăjan on Unsplash

すると Crop Hints プラグインがバックグラウンドで Google Cloud Vision API にアクセスし、この画像から抽出されたクロップヒントをデータベースに保存します。クロップヒントは以下のようになりました。

2. 画像を CSS object-fit プロパティを用いてボックス内に配置する

ここからは WordPress のテンプレート内に記述する前提で話を進めます。

テンプレートにアップロードした画像を出力するには、画像の Post ID が分かっているものとすれば

<?php
    $image = wp_get_attachment_image_src(249, 'full');
?>
<figure><img src="<?php echo $image[0]; ?>" alt=""></figure>

となり、かつこの画像を<figure> 要素内にフィットするようなかたちで配置したいのであれば、CSS (SCSS) は以下のと通りです。

figure {
    img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }
}

これだけで内側の要素である <img> は <figure> がどのような形を取ろうと、要素内にフィットする形で表示がされます。

アスペクト比 1.0 の正方形は被写体である男性がやや見切れてしまっていますが、まぁまぁ元画像の印象を大きくは壊していません。

しかし、<figure> がスマートフォンの画面のような「縦長」の形状に変化するとどうでしょうか。iPhone XS のアスペクト比は 0.474（縦 19 : 横 9）なので、これに合わせてみると次の様な結果になります。

被写体が削られすぎて残念なことになってしまいました。

3. クロップヒントを object-position に適用する

ここでいよいよクロップヒントの出番となります。テンプレート内でこの画像のクロップヒントデータを読み込むには、パブリックメソッド crophints_get を使います。

<?php
    $crophint = crophints_get(array(
        'post_id' => 249,
        'unit' => '%'
    ));
?>

返り値として得られる $crophint の中身は次のようになっています。

Array
(
    [id] => 204
    [post_id] => 249
    [status] => 'success'
    [parent_width] => 2457
    [parent_height] => 1638
    [width] => 37.321937321937
    [height] => 99.93894993895
    [vertices] => Array
        (
            [0] => Array
                (
                    [x] => 14.977614977615
                    [y] => 0
                )

            [1] => Array
                (
                    [x] => 52.299552299552
                    [y] => 0
                )

            [2] => Array
                (
                    [x] => 52.299552299552
                    [y] => 99.93894993895
                )

            [3] => Array
                (
                    [x] => 14.977614977615
                    [y] => 99.93894993895
                )

        )

    [center] => Array
        (
            [x] => 33.638583638584
            [y] => 49.969474969475
        )

    [focus] => 
    [load] => 'cache'
    [type] => 'auto'
    [unit] => '%'
)

今回ここで使うのはクロップヒントの中心点の座標データを保持する $crophint['center'] です。この配列の x • y それぞれの値を <img> の object-positionにインラインスタイルとして割り当てます。

<figure>
    <img
        src="<?php echo$image[0]; ?>"
        alt=""
        style="object-position: <?php echo "{$crophint['center']['x']}% {$crophint['center']['y']}%"; ?>"
    >
</figure>

以上の設定を行うと、object-fit による画像の伸長の原点を object-position の値に変更することができ、前述の画像の出力は次のように変化します。

アスペクト比 2.0 の結果は変わりありませんが、アスペクト比 0.474 の結果は被写体が範囲内に入る領域が増え、明らかな改善が見られます。同様にアスペクト比 1.0 についても、元画像の印象により近い自然な描画となったことが分かると思います。

これがクロップヒントデータの有効な利用方法の一例です。

<figure> の形状が変化するのに応じて <img> がどのように追従するかについては、マウスで形状をインタラクティブに操作できる直感的なサンプルをプロダクトサイトにご用意しましたのでこちらもご確認ください。