焦点座標による画像トリミング表示

焦点座標によって画像をトリミングして表示する組み込みJSです。

一覧ページなどで、エントリーを一覧表示する場合、画像の表示領域や適用しているCSSによっては、画像の中心を見せたい場合でも、外側からトリミングされて表示されてしまう場合があります。

上記のような場合に、この機能を利用することで、焦点座標によって画像をトリミングして表示することができるため、画像の見せたい領域を中心にトリミングして表示することが可能です。

例えば、以下の2つの画像は、一つは焦点座標を指定せず表示した画像、もう一つは焦点座標を指定して表示した画像です。焦点座標が設定された画像は綺麗に人物が中央に表示されているのがわかります。

焦点座標によって画像をトリミングして表示する組み込みJSの利用例です。

使い方

焦点座標によって画像をトリミングして表示したい img 要素に js-focused-image クラスを適用します。そして、焦点の x 座標を data-focus-x 属性に、y 座標を data-focus-y 属性に指定します。

<div style="width: {x}px; height: {y}px;">
  <img 
    class="js-focused-image"
    data-focus-x="{focalX}"
    data-focus-y="{focalY}"
    src="%{ROOT_DIR}{path}"
    alt="{alt}"
  >
</div>

上記はメディアの焦点座標指定機能で設定した焦点のデータを利用して、画像をトリミングして表示しています。メディアの焦点座標指定機能については以下のドキュメントを参照してください。