Blogger:投稿のサムネイルのURLが無い場合には、デフォルトの画像を表示 - レイアウト データ編

イントロダクション

「Blogger:投稿のサムネイルのURLを取得する - レイアウト データ編」では、Blogger のテンプレートの HTMLでのみ使用できるレイアウトデータを使用して、投稿のサムネイルのURLを取得する方法について解説しました。

今回は、レイアウトデータを使用して、投稿のサムネイルのURLを取得したときに、サムネイルが無かった場合には、デフォルトの画像を表示する方法について記載します。

Blogger:投稿のサムネイルのURLが無い場合には、デフォルトの画像を表示 - レイアウト データ編

前提

投稿のサムネイルのURLを示すレイアウトデータ「data:post.thumbnailUrl」は、ブログの投稿ウィジット内でかつ、レイアウトデータ posts から 1 つの投稿のみを取り出した、post としてデータを参照できる場合に、この形式で投稿のサムネイルのURLを取得できます。

使用例

<b:if cond='data:post.thumbnailUrl'>
  <img expr:src='data:post.thumbnailUrl'/>
<b:else/>
  <img src='ここにサムネイル画像のURLが無い時に使用する画像のURLを記載します'/>
</b:if>


b:if により、サムネイル画像がある場合には、サムネイル画像のURLを設定した img タグを、サムネイル画像がない場合には、デフォルトの画像を設定した img タグを HTML ドキュメントに出力します。


なお、Blogger のテンプレートの HTML の編集には危険性が伴います。
必ず、以下のページをご確認ください。

Blogger:BloggerのテンプレートのHTMLを編集するときに気を付けること
http://upa-pc.blogspot.com/2015/03/blogger-template-edit-attention.html
Dr.ウーパのコンピュータ備忘録

まとめ

このように、data:post.thumbnailUrl の値によって条件分岐することで、サムネイル画像が無い場合には、独自の画像をサムネイル画像として用いることが出来るようになります。

投稿にサムネイル画像があってもなくても、同じデザインを適用したい場合に利用したい方式です。

このブログ内の、他の”Blogger”についての情報を見る