dawnでブログ記事のサムネイルのサイズを画像比にする方法

日本語 ディスカッション 技術的なQ＆A
1

テーマdawnでメインページのブログ記事の

サムネイル画像のサイズを画像比、またはheight100%にする方法はありますか？？

2

こちらですが、メインページのブログ記事というのは「ブログ記事」セクションで認識あっておりますでしょうか？

こちらであれば少しコードの編集は必要になりますが、以下の方法で編集可能かと思われますので参考にしていただけますと幸いです。

ブログ記事セクションはDawnの場合ですとfeatued-blog.liquidファイルに該当しますのでこちらのファイルをコード編集から開き以下の変更を行ってみてください。

71行目から記載されている 'article-card’を以下に変更してください。

変更前に記載されている 1.66 という数値がデフォルトで設定されているサムネイル画像のアスペクト比になります。そちらの値を article.image.aspect_ratioと変更することで記事のサムネイルに設定されているアスペクト比に変更可能になります。

// 変更前
{% render 'article-card',
  blog: section.settings.blog,
  article: article,
  media_aspect_ratio: 1.66,
  show_image: section.settings.show_image,
  show_date: section.settings.show_date,
  show_author: section.settings.show_author,
  show_excerpt: true
%}

// 変更後
{% render 'article-card',
  blog: section.settings.blog,
  article: article,
  media_aspect_ratio: article.image.aspect_ratio,
  show_image: section.settings.show_image,
  show_date: section.settings.show_date,
  show_author: section.settings.show_author,
  show_excerpt: true
%}

アスペクト比の変更に合わせて他の箇所のデザイン崩れ等が起こる可能性がありますので、その際は適宜CSS等の変更を行なっていただければと思います。

参考にしていただけますと幸いです。