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%; } }