ブログの記事一覧ページで記事毎にサムネイル画像を指定する場合は、
サムネイルプラグインを利用すると便利です。
サムネイルプラグインの設定方法は、
管理画面のプラグイン管理でサムネイルプラグインを有効にします。
有効後、プラグインの詳細画面を開き、
アスペクト比とリサイズの設定を、HTMLのimgタグに合わせて指定をします。
設定終了後、サムネイルプラグインの詳細画面にあるテンプレートへの記述例(使用例)に従って、
ブログのテンプレートの修正を行います。
今回は下記の通り、
<div class="container">
<div class="row">
<div class="col-sm-9 blog-main"> <!-- b_block:id="entry_list" -->
<h2 class="blog-post-title" cms:id="entry_link">
<!-- cms:id="title_plain" -->Sample blog post
<!-- /cms:id="title_plain" -->
</h2>
<p class="blog-post-meta" cms:id="create_date" cms:format="Y/m/d">January 1, 2014 by <a href="#">Mark</a></p> <!-- cms:id="category_list" -->
<a href="" cms:id="category_link"><span class="label" cms:id="category_name">カテゴリ名</span></a>
<!-- /cms:id="category_list" --> <div class="float-left ">
<img src="/sample/image/images/sampleimg/IMG_1666.jpg" cms:id="thumbnail" style="margin-right:20px;">
</div>
このテンプレートはbootstrapのグリッドシステムを使って、本文とサイドバーの位置を決めています。
今回は、 blog-mainをcol-sm-8からcol-sm-9に変えて、サイドバーのoffsetを取って、本文が表示される幅を広くしました。
また、cms:id="thumbnail"は、<!-- b_block:id="entry_list" -->内で使用するという決まりがあるので、
<!-- b_block:id="entry_list" -->cms:id="thumbnail"の上に移動しました。
サムネイルプラグインの設定が正しく行われているかを確認するために、
テスト記事でサムネイル画像の登録を行ってみます。
記事の投稿画面を開くと、
投稿画面にサムネイルの生成のフォームが追加されています。
このフォームで画像のアップロードとトリミングを行い、
トリミングのフォームにパスが追加されたら、
サムネイルのフォームはそのままにしておいて記事の更新を行います。
記事の更新後、
サムネイルが指定の画像に差し替わっていることを確認できたら、
サムネイルプラグインの設定は終了です。
サムネイルの登録がない場合は予め登録しておいた画像を表示する等の設定を行いたい場合は下記の記事をご覧ください。