Cocoon2.7.1でサムネイルのアスペクト比がブログカードにも適用されるのを修正する

先日、Cocoonがバージョン2.7.1に更新されたのでアップデートを適用しました。

当サイトで修正が必要だったのは以下の箇所でした。

サムネイル画像のアスペクト比をCSSでも定義

管理画面投稿一覧のサムネイルの画像サイズ（100 x 100）は生成しないように変更

flexとgapを使用したものに変更

アスペクト比のCSS指定は今回新しく追加されたので、ブログカードの画像もアスペクト比が適用されてしまうようになりました。

このブログカードの例だとOGP画像が全て表示されていません。

ブログカードのアスペクト比を本来のサイズに戻す

CSSのアスペクト比がブログカードにも適用されていますね。
これを本来のサイズへ戻すには、CSSで以下のように上書き指定します。

.blogcard-thumbnail img {
	aspect-ratio: auto;
}

管理メニューの「外観＞カスタマイズ」からスタイルを追加。

これで本来のOGPが表示されるようになりました。
サイトによってOGPのサイズが違うから、統一するかオリジナルで表示するかは好みによるかも。

２つ目はfunction.phpにサムネイル画像を複数生成しないよう指定しているので、100サイズの生成停止をしていた箇所は削除しました。

３つ目はリストの表示方法とか変更されたので、私がカスタマイズで追加したCSSで重複する箇所を削除したり表示調整をして完了です。

使っていない機能もあるので今後も使っているうちに表示不具合があるかもしれないですね。
今のところ大きな変化は見られないので、見つけたら随時対応したいと思います。

これらの内容はこちらの記事をご参照ください。
NO IMAGE画像のサムネイルサイズも揃えることができます。