Getting second thumbnail from JSON feed instead of the first.

I'm using this script to show related posts on my blog because it allows CSS customization unlike the external widgets where you can override their CSS:

$(document).ready(function() {
  var maxSearched = 500;
  var minimum = 5;
  var maximum = 5;
  var imageSize = 100;
  var roundImages = false;
  var relatedTitle = true;
  var labelInTitle = false;
  var relatedTitleText = "Related Posts";
  var defaultImage = "";
  var campaignTracking = false;
  var campaignSource = "";
  var campaignMedium = "";
  var campaignName = "";
  var insertBefore = $('.comments');
  var labels = [];
  var label;
  var alternateLabel;
  var minposts = minimum - 1;
  var postlabels = $(".post-labels a");
  if (postlabels.length === 1) {
    label = postlabels.text().trim()
  } else if (postlabels.length > 1) {
    $(postlabels).each(function() {
      labels.push($(this).text().trim())
    });
    label = labels[Math.floor(labels.length * Math.random())];
    var labelLocation = labels.indexOf(label);
    if (labelLocation === labels.length - 1) {
      alternateLabel = labels[labelLocation - 1]
    } else {
      alternateLabel = labels[labelLocation + 1]
    }
  }
  if (label !== undefined) {
    var title = $(".entry-title").text().trim();
    var labelCount = 0;
    var alternateLabelCount = 0;
    var matches = [];
    var url = $('link[rel="alternate"][title*="Atom"]').eq(0).attr("href");
    $.ajax({
      url: url,
      data: {
        "max-results": maxSearched,
        alt: "json-in-script"
      },
      dataType: "jsonp",
      success: function(e) {
        $.each(e.feed.entry, function(t, n) {
          if (e.feed.entry[t].category !== undefined) {
            var r = [];
            for (var i = 0; i < e.feed.entry[t].category.length; i++) {
              r.push(e.feed.entry[t].category[i].term)
            }
            if ($.inArray(label, r) !== -1) {
              labelCount++
            }
            if ($.inArray(alternateLabel, r) !== -1) {
              alternateLabelCount++
            }
          }
        });
        if (labelCount <= minposts && alternateLabelCount >= minposts) {
          label = alternateLabel
        }
        $.each(e.feed.entry, function(t, n) {
          if (e.feed.entry[t].category !== undefined) {
            var r = [];
            for (var i = 0; i < e.feed.entry[t].category.length; i++) {
              r.push(e.feed.entry[t].category[i].term)
            }
            if ($.inArray(label, r) !== -1) {
              var s = e.feed.entry[t].title.$t.trim();
              if (s !== title) {
                var o;
                for (var u = 0; u < e.feed.entry[t].link.length; u++) {
                  if (e.feed.entry[t].link[u].rel === "alternate") {
                    o = e.feed.entry[t].link[u].href
                  }
                }
                var a;
                if (e.feed.entry[t].media$thumbnail !== undefined) {
                  a = e.feed.entry[t].media$thumbnail.url.split(/s72-c/).join("s" + imageSize + "-c")
                } else {
                  a = defaultImage
                }
                if (matches.length < maxSearched && campaignTracking === false) {
                  matches.push('<li><a href="' + o + '"><img src="' + a + '" alt="' + s + '" nopin="nopin"><div class="pp-home-title"><div class="pp-center"><div class="pp-center2"><div id="related-title">' + s + "</div></div></div></div></a></li>")
                } else if (matches.length < maxSearched && campaignTracking === true) {
                  matches.push('<li><a href="' + o + "?utm_source=" + campaignSource + "&utm_medium=" + campaignMedium + "&utm_campaign=" + campaignName + '"><img src="' + a + '" alt="' + s + '" nopin="nopin"><div class="pp-home-title"><div class="pp-center"><div class="pp-center2"><div id="related-title">' + s + "</div></div></div></div></a></li>")
                }
              }
            }
          }
        });
        if (matches.length >= minimum) {
          if (relatedTitle === true && labelInTitle === true) {
            insertBefore.before('<div><div class="related-posts"><h5>' + relatedTitleText + ' <span class="related-term">' + label + "</span></h5><ul></ul></div></div>")
          } else if (relatedTitle === true && labelInTitle === false) {
            insertBefore.before('<div class="related-posts"><h5>' + relatedTitleText + "</h5><ul></ul></div>")
          } else {
            insertBefore.before('<div class="related-posts"><ul></ul></div>')
          }
          matches.sort(function() {
            return .5 - Math.random()
          });
          for (var t = 0; t < maximum; t++) {
            $(".related-posts ul").append(matches[t])
          }
        }
        insertBefore.css("clear", "both");
        $(".related-posts ul li").css("max-width", imageSize);
        $(".related-posts ul li img").css("max-width:100%");
        if (roundImages === true) {
          $(".related-posts ul li img").css("border-radius", "50%")
        }
      }
    })
  }
});

Currently the script shows the first image on the post and I would very much like it if it could show the second image instead. I'm not well informed when it comes to JSON feed, but I tried to include the following and none of them worked:

e.feed.entry[t].media$thumbnail[1].url.split(/s72-c/).join("s" + imageSize + "-c") 

e.feed.entry[t].media$group.media$thumbnail[0].url.split(/s72-c/).join("s" + imageSize + "-c") 

if (e.feed.entry[t].media$group.media$thumbnail !== undefined) {

var thumb = t['media$thumbnail'][0]['url']; 

Is it possible to choose which thumbnail to show with JSON? And if it is how to do I do it with the script above?

Thanks in advance.

Answers:

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.