tamlog

主にwebのフロント回り たまに登山

Craft CMS - 画像のトリミング位置を指定する

スポンサーリンク

このエントリーは、Craft CMS Advent Calendar 2017の2日目のエントリーです。

adventar.org

 

 1日目の記事を書いてたらもう一ついけそうなので続けていきます。

 

 

今回は画像のトリミング位置を指定出来るプラグイン

「Focus point field type for Craft CMS」のご紹介です。

 

CMSを使っていると詳細ページで使ってる画像を

一覧ページでサムネイル画像として自動生成など良くあると思います。

で、その時の問題とて意図しない構図でトリミングされるこがあり悩ましい場合があります。

 

そこで 今回のプラグイン「Focus point field type for Craft CMS」です。

github.com

  

元々jQuery のプラグインとしてあるFocusPointのようです。

それをCraft CMSでのフィールドタイプ使えるようにした感じですね。 

github.com

  

使い方

まず管理画面側でフォーカスポイントのフィールドタイプを作ります。

そしてセクションへ追加と通常のフィールド追加と同じ手順。

 

では、実際エントリーに画像を登録する場合はどうなるかですが、

「Focus point field type for Craft CMS」のGitHubページ に実際の管理画面側の画像があるので見てみましょう。

画像中の「まる」で囲まれてる辺りを中心にトリミング出来るイメージ

任意の箇所をクリックで「まる」の位置を変更可能です。

 

次に、テンプレートの書き方ですが方法は下記になります。

状況によって選択すると良さそうです。

純粋にFocusPointを使う方法

FocusPointのjQueryライブラリ、 CSSを読み込んで下記の様に記述すると大丈夫です。

この場合画像の表示は実画像を表示してCSSでトリミングしている状態ですね。

場合によっては追加でCSSで調整が必要かもしれません。

{% set image = entry.image.first() %}
<div class="focuspoint"
	data-focus-x="{{ image.focusX }}"
	data-focus-y="{{ image.focusY }}"
	data-image-w="{{ image.width }}"
	data-image-h="{{ image.height }}">
	<img src="{{ image.url }}">
</div>

 

トリミングした画像を書き出す方法

トリミング画像の作成には別プラグイン「Imager for Craft」を使用すると良いみたいです。

Craft CMSデフォルトでは「設定 > ファイル管理 > 画像の変形 」からトリミング画像を

セット出来ますが、それをテンプレートから書ける感じになります。

github.com

こちらはトリミングされた画像が書き出されますので特に気にせずそのサイズのimg画像として使用できるのでCSSの調整がない分実装は楽な気がします。

が、「Imager for Craft」側で画像を生成しますので環境によっては設定が必要かもです。

で、記述はこんな感じ。 

{% set image = entry.image.first() %}
{% set transformedImage = craft.imager.transformImage(image, {
    width: 800,
    height: 600,
    mode: 'crop',
    position: image.focusPctX ~ '% ' ~ image.focusPctY ~ '%'
}) %}
<img src="{{ transformedImage.url }}">

 

 最後にCSSで表示する場合

これは単純にbackgroundに直接書き込む形です。

一覧は背景画像として配置するHTML構成にしておかないといけないですね。

{% set image = entry.image.first() %}
<div style="background-image: url('{{ image.url }}');
    background-size: cover;
    background-position: {{ image.focusPctX }}% {{ image.focusPctY }}%;">
</div>

 

 

 

 まとめ

このような感じで実装可能です。

一覧ページでサムネイル画像問題はちょくちょくあると思いますので参考になれば。

 

以上、Craft CMSで画像のトリミング位置を指定出来るプラグインFocusPointを使う

でした。

 

That's it!

 

 

カーズ/クロスロード MovieNEX [ブルーレイ+DVD+デジタルコピー(クラウド対応)+MovieNEXワールド] [Blu-ray]

カーズ/クロスロード MovieNEX [ブルーレイ+DVD+デジタルコピー(クラウド対応)+MovieNEXワールド] [Blu-ray]