attention admin about comments trackbacks you may also like

アイキャッチ画像Webp表示2

2020年02月09日
ブログいじり
0
サムネイル画像が表示されていない写真

トップページ記事紹介にアイキャッチ画像が無い場合、Webp画像を表示していたのですが、アイキャッチ(サムネイル)画像が無いため・・・

サムネイル画像が表示されていない写真
本来サムネイル画像が表示されるのですが、無いためにプロフィール画像が表示されています。

ここを何とかしたいなと模索してたんですが、こんな記事見つけました。

img要素で読み込みに失敗した時に非表示にする。もしくは代替画像を表示する。 - tekkの日記 C#,VB.NET

リンク切れなどでimg要素が表示できない場合の対応です。onerrorイベントハンドラを使用します。 非表示にする。 代替画像を表示にする。

発想を変えて、アイキャッチ(サムネイル)画像が有る場合、ブラウザに関わらず、記事番号のWebp画像を読み込みさせ、Webp画像が無い、またはブラウザが対応していない等、エラー時はアイキャッチ(サムネイル)画像を表示させる。

<!--body_img-->
<div class="tira-favi">
<section class="grid-item tira loading">
<a href="<%topentry_link>" class=grid-image-anchor>
<img class="lazyload grid-image" src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7" data-src="https://onga.sakura.ne.jp/gazou/<%topentry_no>.webp" alt="<%topentry_title>" onerror="this.src='<%topentry_image_url_760x420>'">
</a>
<div class="grid-content">
<h2 class=grid-title>
<a class=grid-title-anchor href="<%topentry_link>"><%topentry_title></a>
<script>nw('<%topentry_year>','<%topentry_month>','<%topentry_day>','<%topentry_hour>')</script>
</h2>
<a class=grid-category-anchor href="<%topentry_category_link>"><%topentry_category></a>
<svg class="svg-inline-stroke svg-margin" viewBox="0 0 24 24" role=img><use xlink:href=#inline-comment></use></svg> <%topentry_comment_num> <time class=grid-datetime datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00"><%topentry_year>/<%topentry_month>/<%topentry_day></time>
</div>
</section>
</div>
<!--/body_img-->

Webp形式のアイキャッチ(サムネイル)画像が無い場合、構文エラーにはならないのですが、「404」エラーにはなります。

左がwebp画像、中央Jpeg画像、右アイキャッチ(サムネイル)画像が無い場合

トップページ記事紹介画像、横一列に並んだ写真
ただ、アイホンで確認とれてないんですね。(スマホ自体持っていません)

で、記事の方も見事サムネイル画像が表示されました。(当たり前ですね)

サムネイル画像が表示された写真
関連する記事
遠太
Author: 遠太
九州は福岡県中間市で環境保全や地域に関するボランティア活動中。
できる時にできる範囲で。そこには、ノルマも強制も義務もありません。

コメント(0)

There are no comments yet.