[QooQ]投稿一覧で画像がない投稿にサムネイルを表示

デモ

該当部分

    <b:if cond='data:post.thumbnailUrl'>
      <a expr:href='data:post.url'>
        <img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 480, &quot;2:1&quot;)' height='240' width='480'/>
      </a>
    </b:if>

QooQでは投稿にサムネイル(Url)がある場合、最初のイメージ(Url)を画像として表示するようになっています。

サムネイルがない場合どうするかを追加します。

変更後

    <b:if cond='data:post.thumbnailUrl'>
      <a expr:href='data:post.url'>
        <img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 480, &quot;2:1&quot;)' height='240' width='480'/>
      </a>
<b:else/>
<a expr:href='data:post.url'>
<img class='list-item-img' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMiBUhj7LVVstBJhyphenhyphenjiL1FglsjAdFcyRZ_ieaFhk0YQWE-6WrF1KJ3Z-wJEV47GiBN7wIwaVGmAeJSy6x1TojADTDtxMFMFuqrO82tet9a2hlHDeqCAEezw94FShCU9QTgwn453jkbQakwgjU3vDMZZDc3sdbKaw_jKVRKdv-ybJPDZ5Y9cd6PRFRZ1NA/s480/no-photo.png' style='width:480px;' title='画像なし'/>
</a>
    </b:if>

(まぁこれは私のやり方ですが、)
QooQのレンダリングサイズと同じサムネイルを用意する場合は、
最低でも 480x240 (横480ピクセル、縦240ピクセル)の画像が必要になります。

Bloggerの条件分岐についてはこれまで特に触れてきませんでしたが、<b:else/> を使った分岐は覚えておくと便利です。

やっていることは 非レスポンシブ公式Bloggerテーマ等で画像が無い時にNo Image画像を表示させる と同様です。