情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。
グリッド状に表示するリストに使用する画像の大きさにバラツキがあるので、どの画像でもきれいに縦の真ん中に収めるために。
Advanced Custom Field の画像フィールドでIDで保存した場合、
<?php $attachment_id = get_field('image');$size = 'full'; $image = wp_get_attachment_image_src( $attachment_id, $size ); ?><img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php the_title(); ?>">
のようになり、$image[2]が高さになる。
高さの上限を130pxとし、$length = 130-$image[2]; 130から画像の高さを引いた数を取得、 $margin = floor($length/2); それを2で割って小数点以下は切り捨て、
style="margin:<?php echo $margin; ?>px auto;"
とした。
画像が左寄せで、画像の右側の要素が画像の下に回り込まないようにしたい場合などは、画像の右側をブロック要素で左寄せとし、全体の幅から画像の幅を引いた数字で右側の要素の幅をスタイルに入れるときれいに収まる。
大きな画像がある場合は、必要なサイズの縮小画像を作れば良いのだけど、そうでない場合は臨機応変に小技総動員。
*get_image_size で画像サイズを取得する方法もあるが、サーバーによってはファイルにアクセス出来ない場合もあるので、IDから画像を取得するほうが無難。