Amazon 画像のリンク切れをJavaScript でごまかしてみる

リンク切れ用代替画像 読書感想カテゴリでは、サイドバー最上段に書影をランダムで10個表示するようにしていたのですが、ところどころ画像が表示されていないということに気付いていつつも放置していました。が、なんだか日が経つにつれてリンク切れ画像が増えていってるような気がして仕方なかったので、とりあえず対処療法を講じてみました。

そもそも、Amazon リンク切れ 画像で検索すると、同様なことに悩んでいる方は少なからずいるようで、そして、結局はひとつひとつ手作業で修正するしかなさそうという事実に愕然としてしまいます。

しかし、何とかす方法はやっぱりあるようで、画像がリンク切れの時は、代替画像を表示するという方法を指定した画像がなければ別のサーバーの画像を読み込むにて知りました。

ってことで、早速テーマを書き換え。WordPress のRandom Imageプラグインの出力を書き換えて、

<?php randomimage(false,
                  10,
                  "height='120' width='90' class='random-image' onerror=\"this.src='https://www.u-1.net/images/noimage_small.png'\"",
                  true,
                  "(\.jpg|\.jpeg|\.png)",
                  "both",
                  "",
                  "9",
                  true,
                  "",
                  "%2"); ?>

のように変更。プラグインの細かいパラメータは配布サイトの説明参照してもらうとして、img タグ内にイベントハンドラ onerror を追加してやって、画像読み込みにエラーが出た場合は、代替イメージ noimage_small.png を表示してやるということですね。

同様に、各エントリの中の書影を表示している img タグにも一括置換で onerror を追加してやって対応完了。

そのうちこつこつと画像の UR Lは書き換えないといけないけれど、ひとまずはこれで不格好なレイアウト崩れは回避できるはず。