[QooQ] 関連記事に代替画像を表示させる

記事に画像がない場合、なにも表示されなかったので代替画像を表示させました。

微妙なやり方っぽいですがとりあえず表示されました。細かい挙動の検証などはしていません、あくまでも「とりあえず」の水準なので留意してください。

デフォルトの関連記事にこだわらなければblogger related postsとかで検索すればいろいろとコードが出てきます。

HTMLを編集します。必ずバックアップを取ってから作業してください。

置き換え

該当するJavaScript(mrp-v1.04)の1つ目のnoneImageを代替画像のURLに置き換えました。（noneImageは2か所ありますが置き換えるのは1つ目のみ）

下記は圧縮されていた元のコードをわかりやすいようにツールで成形したものです。置き換える場所を確認してください。 r.thumbnail = "noneImage"の行のnoneImage部分を置き換えます。

<script>
  //<![CDATA[
  //mrp-v1.04
  var relatedAry = new Array;

function mrp_input(e) {
  for (var t = 0; t < e.feed.entry.length; t++) {
    var r = new Object,
      n = e.feed.entry[t];
    r.title = n.title.$t;
    try {
      r.thumbnail = n.media$thumbnail.url
    } catch (e) {
      r.thumbnail = "noneImage" //← この noneImage を置き換える
    }
    for (var l = 0; l < n.link.length; l++)
      if ("alternate" == n.link[l].rel) {
        r.link = n.link[l].href;
        break
      }
    for (var i = 0, m = 0; m < relatedAry.length; m++)
      if (r.link == relatedAry[m].link) {
        i = 1;
        break
      }
    i || relatedAry.push(r)
  }
}

function mrp_output(e) {
  for (var t, r, n, l, a, i = mrpMax < relatedAry.length ? mrpMax : relatedAry.length, d = document.getElementById("mrp-content"), m = [], s = 0; m.push(s++) < relatedAry.length;);
  if (m = m.sort(function () {
      return Math.random() - .5
    }), relatedAry.length <= 1)(a = document.createElement("p")).textContent = "関連する記事はありません。", d.appendChild(a);
  else
    for (var p = 0; p < i; p++) t = relatedAry[m[p]], mrpPosturl != t.link && ((r = document.createElement("div")).setAttribute("class", "mrp-post"), "noneImage" != t.thumbnail && ((n = document.createElement("img")).setAttribute("src", t.thumbnail), n.setAttribute("class", "mrp-post-img"), r.appendChild(n)), (a = document.createElement("p")).setAttribute("class", "mrp-post-title"), a.textContent = t.title, r.appendChild(a), (l = document.createElement("a")).setAttribute("href", t.link), l.setAttribute("class", "mrp-post-link"), r.appendChild(l), d.appendChild(r))
}
//]]>
</script>

置き換え例

代替画像（例）

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgXqN3Pv9ke52k9j9fKmOFrcWVdVaQEkQ-3wEm7tE2cayUI4UHnVeYiQe2xDDbMtdEwVJ4AfkZ7dQ56Z3oUyjItYqCVJLaY1Sg8CwHyXyumKcqodO41ekoy2RkR07eNjJtnzj5S28C8Qf/w140-h140-p/m_e_others_501.png

1つ目のnoneImageと置き換えたもの

<script>
  //<![CDATA[
  //mrp-v1.04
  var relatedAry = new Array;

function mrp_input(e) {
  for (var t = 0; t < e.feed.entry.length; t++) {
    var r = new Object,
      n = e.feed.entry[t];
    r.title = n.title.$t;
    try {
      r.thumbnail = n.media$thumbnail.url
    } catch (e) {
      r.thumbnail = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgXqN3Pv9ke52k9j9fKmOFrcWVdVaQEkQ-3wEm7tE2cayUI4UHnVeYiQe2xDDbMtdEwVJ4AfkZ7dQ56Z3oUyjItYqCVJLaY1Sg8CwHyXyumKcqodO41ekoy2RkR07eNjJtnzj5S28C8Qf/w140-h140-p/m_e_others_501.png"
    }
    for (var l = 0; l < n.link.length; l++)
      if ("alternate" == n.link[l].rel) {
        r.link = n.link[l].href;
        break
      }
    for (var i = 0, m = 0; m < relatedAry.length; m++)
      if (r.link == relatedAry[m].link) {
        i = 1;
        break
      }
    i || relatedAry.push(r)
  }
}

function mrp_output(e) {
  for (var t, r, n, l, a, i = mrpMax < relatedAry.length ? mrpMax : relatedAry.length, d = document.getElementById("mrp-content"), m = [], s = 0; m.push(s++) < relatedAry.length;);
  if (m = m.sort(function () {
      return Math.random() - .5
    }), relatedAry.length <= 1)(a = document.createElement("p")).textContent = "関連する記事はありません。", d.appendChild(a);
  else
    for (var p = 0; p < i; p++) t = relatedAry[m[p]], mrpPosturl != t.link && ((r = document.createElement("div")).setAttribute("class", "mrp-post"), "noneImage" != t.thumbnail && ((n = document.createElement("img")).setAttribute("src", t.thumbnail), n.setAttribute("class", "mrp-post-img"), r.appendChild(n)), (a = document.createElement("p")).setAttribute("class", "mrp-post-title"), a.textContent = t.title, r.appendChild(a), (l = document.createElement("a")).setAttribute("href", t.link), l.setAttribute("class", "mrp-post-link"), r.appendChild(l), d.appendChild(r))
}
//]]>
</script>

必要であれば再び圧縮してください。。

参考

直接置き換えた例

<script>
//<![CDATA[
//mrp-v1.04
var relatedAry=new Array;function mrp_input(e){for(var t=0;t<e.feed.entry.length;t++){var r=new Object,n=e.feed.entry[t];r.title=n.title.$t;try{r.thumbnail=n.media$thumbnail.url}catch(e){r.thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgXqN3Pv9ke52k9j9fKmOFrcWVdVaQEkQ-3wEm7tE2cayUI4UHnVeYiQe2xDDbMtdEwVJ4AfkZ7dQ56Z3oUyjItYqCVJLaY1Sg8CwHyXyumKcqodO41ekoy2RkR07eNjJtnzj5S28C8Qf/w140-h140-p/m_e_others_501.png"}for(var l=0;l<n.link.length;l++)if("alternate"==n.link[l].rel){r.link=n.link[l].href;break}for(var i=0,m=0;m<relatedAry.length;m++)if(r.link==relatedAry[m].link){i=1;break}i||relatedAry.push(r)}}function mrp_output(e){for(var t,r,n,l,a,i=mrpMax<relatedAry.length?mrpMax:relatedAry.length,d=document.getElementById("mrp-content"),m=[],s=0;m.push(s++)<relatedAry.length;);if(m=m.sort(function(){return Math.random()-.5}),relatedAry.length<=1)(a=document.createElement("p")).textContent="関連する記事はありません。",d.appendChild(a);else for(var p=0;p<i;p++)t=relatedAry[m[p]],mrpPosturl!=t.link&&((r=document.createElement("div")).setAttribute("class","mrp-post"),"noneImage"!=t.thumbnail&&((n=document.createElement("img")).setAttribute("src",t.thumbnail),n.setAttribute("class","mrp-post-img"),r.appendChild(n)),(a=document.createElement("p")).setAttribute("class","mrp-post-title"),a.textContent=t.title,r.appendChild(a),(l=document.createElement("a")).setAttribute("href",t.link),l.setAttribute("class","mrp-post-link"),r.appendChild(l),d.appendChild(r))}
//]]>
</script>