やわらかしかっけい

なんでもすぐに忘れてしまう自分のために

WordPressのギャラリーのサムネイルの高さ(アスペクト比)を統一する

WordPressのブロックエディターの「ギャラリー」機能。

複数画像を並べるのに便利なんだけど、

横長画像と縦長画像が混在した場合、縦長画像の方に高さが統一されるため

横長サムネの行と縦長サムネの行が存在してしまったりして、

見た目がちょっと微妙だった。

  • サムネイルを正方形にしたい!
  • でもクリックして表示される拡大画像は、元のアスペクト比のままにしたい!


これらの希望を叶える解決策が、ありました

iframeのレスポンシブ対応の時によく使う、アレ。

※テーマ「SWELL」を使っています。クラス指定とかは各自良い感じにしてください

.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image{
    position:relative;
}
.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image::before{
    content:"";
    display: block;
    padding-top: 100%; /*正方形。16:9にしたい場合は56.25%*/
}
.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


参考
CSSだけでアスペクト比を固定するテク - Qiita


これで正方形のタイル状に揃った瞬間、めちゃ気持ちよかった。

インスタみたいで美しい!

 

ちなみにクリックして表示される拡大画像は、ちゃんと横長・縦長のままです。

なお、スマホで拡大画像が切れないように、以下も追記してます。

@media only screen and (max-width:480px) {
	.lum-lightbox-inner img{
		width:100%;
	}
}