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

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

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

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

<br />
add_image_size( $name, $width = 0, $height = 0, $crop = false );<br />

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

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

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

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

すると、例えば

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

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

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

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

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

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

spreads-wp-crop-point

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

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

<br />
function my_image_resize_dimensions( $payload, $orig_w, $orig_h, $dest_w, $dest_h, $crop ){<br />
 if( false ) return $payload;</p>
<p> if ( $crop ) {<br />
  $aspect_ratio = $orig_w / $orig_h;<br />
  $new_w = min($dest_w, $orig_w);<br />
  $new_h = min($dest_h, $orig_h);</p>
<p>  if ( !$new_w ) $new_w = intval($new_h * $aspect_ratio);<br />
  if ( !$new_h ) $new_h = intval($new_w / $aspect_ratio);</p>
<p>  $size_ratio = max($new_w / $orig_w, $new_h / $orig_h);<br />
  $crop_w = round($new_w / $size_ratio);<br />
  $crop_h = round($new_h / $size_ratio);</p>
<p>  $s_x = floor( ($orig_w - $crop_w) / 2 );//横中央<br />
  //$s_y = floor( ($orig_h - $crop_h) / 2 );//縦中央<br />
  //$s_x = 0;//横左<br />
  $s_y = 0;//縦上<br />
  //$s_x = floor( ($orig_w - $crop_w) );//横右<br />
  //$s_y = floor( ($orig_h - $crop_h) );//縦下<br />
 } else {<br />
  $crop_w = $orig_w;<br />
  $crop_h = $orig_h;<br />
  $s_x = 0;<br />
  $s_y = 0;<br />
  list( $new_w, $new_h ) = wp_constrain_dimensions( $orig_w, $orig_h, $dest_w, $dest_h );<br />
 }<br />
 if ( $new_w &gt;= $orig_w &amp;&amp; $new_h &gt;= $orig_h ) return false;<br />
 return array( 0, 0, (int) $s_x, (int) $s_y, (int) $new_w, (int) $new_h, (int) $crop_w, (int) $crop_h );<br />
}<br />
add_filter( 'image_resize_dimensions', 'my_image_resize_dimensions', 10, 6 );<br />

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

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

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

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

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

これで、よりWordPressでのホームページ制作が、楽しくなりますね!

PAGE TOP