【Jettheme#05】記事に画像がない場合の代替画像を設定

ノーイメージのイメージを表示したい。これはもはや哲学的な言い回しではあるが、単純に、前に作った画像がもったいないというだけ

正方形トリミングに対応できるように、中央に寄せつつ。おそらく今後利用が多くなるポスター画像と相性の良さそうな比率にしておいた。

 

配置は、トップページのリストと、ウィジェットの人気記事表示

正直 div の指定がどこまで拘束されるのか、閉じ方がとかが全くわかってないので、個別に設定している。効率は悪いけど、エラーが出てないからいーじゃん

場所は <b:if cond='data:post.featuredImage'> で検索した二箇所のあたり

<img expr:alt='data:post.title' expr:class='data:post.featuredImage.isYoutube ?  &quot;object-cover lazyload&quot; : &quot;lazyload&quot;' expr:data-src='data:post.featuredImage.isYoutube ? data:post.thumbnailUrl : data:post.featuredImage' loading='lazy' src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='/>
</div>
</div>

の下に貼り付け

    <!-- 記事に画像が無い場合 -->
    <b:else/>
    <div class='list-item-thumbnail'>
    <div class='jt-bg-light d-block'>
    <!-- 自分の画像URLに変更する -->
    <img src='ノーイメージの画像URL'/>
    </div>
    </div>

前回のリスト化の class がついていて、比率指定を削除済み

そもそもこんな作業こそ後回しで良いのになに時間かけてるんだか。

まあーそういった惑いを経験しないことには自分の効率の悪さも痛感できないので、いい経験であった。そう言い聞かせるしか失った時間を肯定できないのだ。

• B!