WordPress：　投稿画像を長方形にフィットさせる処理

2013/5/3 に更新しました。

目的

画像の幅と高さ（アスペクト比）が違う画像を並べるさい、CSS で position: absolute; を使って座標計算するの、めんどくさいです。

なので、専用の関数を作りました。

処理の内容としては、「WordPress のこの関数使えばイイんじゃない？」という意見もあると思いますが、とりあえずコレで！

処理

• 記事内に挿入した画像を表示させるさい、bren_fit_img もしくは bren_fill_img を使用してください。
• アイキャッチ（サムネイル）画像を表示させるさい、bren_fit_thumbnail もしくは bren_fill_thumbnail を使用してください。

コード

function bren_get_image_rect( $box_width, $box_height, $img_width, $img_height, $fit = true ) {
	$scale_width = $box_width / $img_width;
	$scale_height = $box_height / $img_height;

	if ($fit) {
		$scale = ($scale_width < $scale_height) ? $scale_width : $scale_height;
	} else {
		$scale = ($scale_width > $scale_height) ? $scale_width : $scale_height;
	}

	$width	= (int)($img_width * $scale);
	$height	= (int)($img_height * $scale);
	$x		= (int)(($box_width - $width) / 2);
	$y		= (int)(($box_height - $height) / 2);

	return array(
		'x'			=> $x,
		'y'			=> $y,
		'width'		=> $width,
		'height'	=> $height
	);
}

function bren_fit_img( $img_id, $box, $echo = false ) {
	$output = "";

	$img_attr = wp_get_attachment_image_src( $img_id, array($box[0], $box[1]) );
	if ($img_attr) {
		$rect = bren_get_image_rect( $box[0], $box[1], $img_attr[1], $img_attr[2] );

		$output = "<div style='position: relative; width: {$box[0]}px; height: {$box[1]}px'>";
		$output .= "<img src='{$img_attr[0]}' alt='' style='display: block; position: absolute; left: {$rect['x']}px; top: {$rect['y']}px; width: {$rect['width']}px; height: {$rect['height']}px;' />";
		$output .= "</div>";
	}

	if ( $echo )
		echo $output;

	return $output;
}

function bren_fill_img( $img_id, $box, $echo = false ) {
	$output = "";

	$img_attr = wp_get_attachment_image_src( $img_id, 'full' );
	if ($img_attr) {
		$rect = bren_get_image_rect( $box[0], $box[1], $img_attr[1], $img_attr[2], false );

		$output = "<div style='position: relative; overflow: hidden; width: {$box[0]}px; height: {$box[1]}px'>";
		$output .= "<img src='{$img_attr[0]}' alt='' style='display: block; position: absolute; left: {$rect['x']}px; top: {$rect['y']}px; width: {$rect['width']}px; height: {$rect['height']}px;' />";
		$output .= "</div>";
	}

	if ( $echo )
		echo $output;

	return $output;
}

function bren_fit_thumbnail( $post_id, $box, $echo = false ) {
	return bren_fit_img( get_post_thumbnail_id( $post_id ), $box, $echo );
}

function bren_fill_thumbnail( $post_id, $box, $echo = false ) {
	return bren_fill_img( get_post_thumbnail_id( $post_id ), $box, $echo );
}

使用例

post ループ内で、投稿内の画像を表示する使用例です。

$images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC' ) );
if ( $images ) {
	$image = array_shift( $images );
	$image_img_tag = bren_fit_img( $image->ID, array( 120, 90 ) );
}