縦画像と横画像の大きさを揃えたい
僕は趣味の写真のブログをWordPressを使って別に作ってるんですけど、ずっとモヤモヤしている事がありまして。
それは、縦画像が大きく表示されすぎるという問題。
下の画像を観てください。下の画像は、その写真ブログなんですけど、横向きの画像に対して、縦向きの画像が大きく表示されすぎている。横向きと縦向きを同じサイズで表示するようにしたい。
ブログを書くときに、画像を追加するたびに横画像と縦画像で違うサイズを設定していけばいいんでしょうけど、そんなの超面倒。縦か横かは自動で判別して、表示サイズを設定できるようにします。しかもどうせならレスポンシブに対応させちゃいます。
ネットで調べてもやり方がなかなか見つからなかったので、ちょっとまとめておこうかなと思います。
写真ブログやってる人ならみんな困ってるんじゃないのかなぁ、もし困っている人がいるなら必見ですよ。たった5分で出来ますから、超簡単。
WordPressで縦画像と横画像で表示設定を変えるには？
やらないといけないことはたったの2つです。
- imgタグ内のwidth、height表記を消す。
- imgタグ内のsizes表記の内容を、縦長画像と横長画像で変える。
それぞれ、テーマの中のfunctions.phpの中に追加で記載することになります。WordPressのメニューの「外観」→「テーマエディター」で行けるんですが、書き換える前に必ずバックアップを取っておいてくださいね。
imgタグ内のwidth、height表記を消す
どれだけ表示の設定をしても、imgタグの中にwidth、heightが記載されているとそれが優先されてしまいます。width、heightは画像を追加すると自動で書き込まれてしまうので、まずそれを書かないようにしましょう。
バージョン5.4まではこちら
function remove_hwstring_from_image_tag( $html, $id, $alt, $title, $align, $size ) {
list( $img_src, $width, $height ) = image_downsize($id, $size);
$hwstring = image_hwstring( $width, $height );
$html = str_replace( $hwstring, '', $html );
return $html;
}
add_filter( 'get_image_tag', 'remove_hwstring_from_image_tag', 10, 6 );
バージョン5.5はこちら。
add_filter( 'the_content', function( $html ){
$html = preg_replace( '/(width|height)="d*"s/', '', $html );
return $html;
} );
はい、これで書かれなくなりました。
imgタグ内のsizes表記の内容を、縦長画像と横長画像で変える
続いて、縦画像と横画像で好みの表示設定を記載していきます。画像の高さと幅を取得して、どっちが長いの？というので縦長画像か横長画像かを判定しています。
/*img タグの sizes 属性値を縦画像と横画像を判別して記載する*/
function custom_wp_calculate_image_aspects( $sizes, $size, $image_src, $image_meta, $attachment_id ) {
$width = 0;
$height = 0;
//画像の幅と高さを取得
if ( is_array( $size ) ) {
$width = absint( $size[0] );
$height = absint( $size[1] );
} elseif ( is_string( $size ) ) {
if ( ! $image_meta && $attachment_id ) {
$image_meta = wp_get_attachment_metadata( $attachment_id );
}
if ( is_array( $image_meta ) ) {
$size_array = _wp_get_image_size_from_meta( $size, $image_meta );
if ( $size_array ) {
$width = absint( $size_array[0] );
$height = absint( $size_array[1] );
}
}
}
//幅と高さを比較して縦画像か横画像かを判別
if($width<$height){//縦画像
return "(max-width: 1026px) 53vw, 33vw";//ここは各自デザインに合わせて書き換えてね
}
else{//横画像
return "(max-width: 1026px) 80vw, 48vw";//ここは各自デザインに合わせて書き換えてね
}
}
add_filter('wp_calculate_image_sizes', 'custom_wp_calculate_image_aspects', 10 , 5);
これで、完成です。以降は、画像を載せてブログを描けば勝手に縦画像を横画像の大きさを揃えてくれます。超便利。
写真ブログなら必須の機能
ほんとは、アスペクト比(3:2、4:3、16:9、1:1)に応じて表示設定を変えるとかできた方が良いんですけど、とりあえずここまで。
写真ブログを運営されている皆さん、これからはブログにかっこよく縦撮りの写真を載せられますよ！
スマホとカメラの画像が混ざっても全然問題なし、めっちゃ便利です。ぜひお試しください。
コメント