記事リストのサムネイルのHTML

リストのサムネイル部分のHTMLと、テンプレートの関係について述べる。

テンプレートと生成されるHTML

スタンダーのテンプレートのサムネイル部分を以下に示す。

<!--{if:post.hasMainImage}-->
<figure class="entry-thumbnail" data-imgliquid>
<a href="{post.schemelessUrl}">
<img src="{post.mainImageUrl}">
</a>
</figure>
<!--{/if:post.hasMainImage}-->

この時、以下に示すHTMLとなる。
data-imgliquidを定義した場合、以降のstyleが付加される。

<figure class="entry-thumbnail imgLiquid_bgSize imgLiquid_ready" data-imgliquid="" style="background-image: url("//public.muragon.com/88myojm9/ujnw03y7/crop/192x192.png"); background-size: cover; background-position: center center; background-repeat: no-repeat;">
<a href="//loopus.muragon.com/entry/4.html" style="display: block; width: 100%; height: 100%;">
<img src="//public.muragon.com/88myojm9/ujnw03y7/crop/192x192.png" style="display: none;">
</a>
</figure>

記事の画像有無の判定

以下のカスタムタグで囲むことで、記事に画像が有る場合のみ、カスタムタグ内が反映される。

<!--{if:post.hasMainImage}-->
<!--{/if:post.hasMainImage}-->

記事に画像が無い場合、カスタムタグ内は以下となる。

本カスタムタグを削除した場合、サムネイル部分に枠のみ表示される。
<figure class="entry-thumbnail imgLiquid_bgSize imgLiquid_ready" data-imgliquid="" style="background-image: url("undefined"); background-size: cover; background-position: center center; background-repeat: no-repeat;">
<a href="//loopus.muragon.com/entry/3.html" style="display: block; width: 100%; height: 100%;">
<img style="display: none;">
</a>
</figure>