【Blogger/QooQ】トップページ記事一覧：画像なし記事にデフォルトサムネイル画像を表示

完成イメージ

「Noimage」という仮画像を別途アップロードしています。

画像があるかどうかの分岐作成

「list-item-img」がある場所までジャンプ。
「<b:if cond='data:post.thumbnailUrl'>～</b:if>」のところを
「<b:if cond='data:post.thumbnailUrl'>～<b:else/>～</b:if>」に。

以前の記事、

【Blogger/QooQ】トップページ記事一覧：最新記事を大きく表示させる

【Bloggerカスタマイズ】最新記事を大きく表示させる方法

を実践している場合は2か所、特に記事を分けてないなら1か所修正。

これでとりあえずの分岐はできるので、imgを挿入する、でも良い。が、
ここに直接urlを書くのは少々メンテナンス性に欠ける。
私はcss側に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;)'/>
		</a>
	</b:if>

修正後のコード

	<a expr:href='data:post.url'>
		<b:if cond='data:post.thumbnailUrl'>
			<img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 480, &quot;2:1&quot;)'/>
		<b:else/>
			<img class='自由に' src='画像のURL' />
		</b:if>
	</a>

デフォルト画像と通常画像の表示サイズの差異をなくす工夫

さらにdivで一つくくるってだけなんだけども。
ちなみに画像サイズは2：1を想定しています。「list-item-img-contents:before」の「padding-top」を適宜変更してください。

元のcss

.list-item-img{
	display			: block;
	width			: 100%;
}

修正後のcss

.list-item-img-contents {
	position		: relative;
	width			: 100%;
}
.list-item-img-contents:before {
	content			: "";
	display			: block;
	padding-top		: 50%;
}
.list-item-img-contents img {
	position		: absolute;
	top			: 0;
	left			: 0;
	bottom			: 0;
	right			: 0;
	width			: 100%;
	height			: 100%;
}
.list-item-img-contents div {
	position		: absolute;
	background-image	: url(デフォルト画像のurl);
	background-repeat	: no-repeat;
	background-size	: contain;
	top			: 0;
	left			: 0;
	bottom			: 0;
	right			: 0;
	width			: 100%;
}

先程と同様に、

【Blogger/QooQ】トップページ記事一覧：最新記事を大きく表示させる

【Bloggerカスタマイズ】最新記事を大きく表示させる方法

を実践している場合は2か所、特に記事を分けてないなら1か所修正。
これで多少は画像差し替えが起きた時など対処しやすいのでは？と。これ以上は今のところわからん。

元のコード

	<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;)'/>
		</a>
	</b:if>

修正後のコード

	<a expr:href='data:post.url'>
		<b:if cond='data:post.thumbnailUrl'>
			<div class='list-item-img-contents'><img expr:src='resizeImage(data:post.firstImageUrl,960,&quot;2:1&quot;)'/></div>
		<b:else/>
			<!-- 画像がないときのデフォルト画像 -->
			<div class='list-item-img-contents' ><div/></div>
		</b:if>
	</a>