● スプレッドIT!

WordPress://add_image_sizeの画像トリミング基点を変更してみる

WordPressの関数に「add_image_size」というものがあります。

画像関連で、良く使われる関数なので、この関数を知ってるか知らないかでWPの知識レベルが大体わかる判定基準にもなりますので、知らいない方は覚えておきましょう。

使い方は、functions.phpなどに、

add_image_size( $name, $width = 0, $height = 0, $crop = false );

という書式で定期するだけです。

$name に、’list_thumbs’ などと定義することで、

list_thumbsという名前のイメージは、$width(横幅)、$height(高さ)のサイズで保存しておき、

$cropがtrueであれば中心から切り抜くという定義がなされます。

すると、例えば

<?php $thumb =  wp_get_attachment_image_src(get_post_meta($post--->ID, 'メイン画像', true), "list_thumbs"); ?>
<img alt="" src="<?php echo $thumb['0']; ?>" alt="" />

こんな感じで、list_thumbsで定義したサイズの画像が出力可能です。

この時の”切り抜き”ですがデフォルトで基点が中心になっているため、

縦長や、横長の画像を切り抜く場合、中心部分が切り抜かれてしまい、

なんだか良くわからない画像になってしまったりしてしまいます。

下の画像で解るかどうかわかりませんが、弊社のホームページ制作実績などは、キャプチャー画像の中心を表示するのでは無く、やはりホームページの顔となるヘッダー部分から表示させたい訳です。

spreads-wp-crop-point

では実際にどのようにすれば良いかということになりますが、

WPでは最早定番中の定番、functions.phpに下記のような記述を追記します。

function my_image_resize_dimensions( $payload, $orig_w, $orig_h, $dest_w, $dest_h, $crop ){
 if( false ) return $payload;

 if ( $crop ) {
  $aspect_ratio = $orig_w / $orig_h;
  $new_w = min($dest_w, $orig_w);
  $new_h = min($dest_h, $orig_h);

  if ( !$new_w ) $new_w = intval($new_h * $aspect_ratio);
  if ( !$new_h ) $new_h = intval($new_w / $aspect_ratio);

  $size_ratio = max($new_w / $orig_w, $new_h / $orig_h);
  $crop_w = round($new_w / $size_ratio);
  $crop_h = round($new_h / $size_ratio);

  $s_x = floor( ($orig_w - $crop_w) / 2 );//横中央
  //$s_y = floor( ($orig_h - $crop_h) / 2 );//縦中央
  //$s_x = 0;//横左
  $s_y = 0;//縦上
  //$s_x = floor( ($orig_w - $crop_w) );//横右
  //$s_y = floor( ($orig_h - $crop_h) );//縦下
 } else {
  $crop_w = $orig_w;
  $crop_h = $orig_h;
  $s_x = 0;
  $s_y = 0;
  list( $new_w, $new_h ) = wp_constrain_dimensions( $orig_w, $orig_h, $dest_w, $dest_h );
 }
 if ( $new_w >= $orig_w && $new_h >= $orig_h ) return false;
 return array( 0, 0, (int) $s_x, (int) $s_y, (int) $new_w, (int) $new_h, (int) $crop_w, (int) $crop_h );
}
add_filter( 'image_resize_dimensions', 'my_image_resize_dimensions', 10, 6 );

と、image_resize_dimensionsという元々WP内で、リサイズを実行するフィルタ関数を上書きします。

  $s_x = floor( ($orig_w - $crop_w) / 2 );//横中央
  //$s_y = floor( ($orig_h - $crop_h) / 2 );//縦中央
  //$s_x = 0;//横左
  $s_y = 0;//縦上
  //$s_x = floor( ($orig_w - $crop_w) );//横右
  //$s_y = floor( ($orig_h - $crop_h) );//縦下

部分のコメントアウトを調整することで、縦横の基点を上下左右中央のどこにするか指定できます。
上記の状態だと、横は中央で、縦は上になります。

これで、綺麗にヘッダーから画像を切り抜きて表示してくれるようになりました。

ちなみに、このadd_image_sizeとmy_image_resize_dimensionsのフィルタ定期義をfunctions.phpに追記した後に、画像をアップロードすることでadd_image_sizeで指定したサイズのmy_image_resize_dimensionsで指定した位置からの切り抜き画像が生成されるので、functions.phpに書いたのに画像が表示されないなーと悩まないようにご注意ください。

これで、よりWordPressでのホームページ制作が、楽しくなりますね!
このエントリーをはてなブックマークに追加