[자바스크립트] 티스토리 썸네일 불러오기

원본은 뭐하라님의 스크립트입니다.

원본 스크립트가 og:image의 경로 변경 때문에 제대로 작동하지 않아서 수정했습니다.

댓글 작성자의 사진도 제대로 가져오질 못하는 것 같아 삭제했습니다.

아래 html을 보시면 아시겠지만, "tf", "article_thumb"란 class를 가진 a태그 아래에 있는 "thumb"란 class를 가진 img의 src를 변경합니다.

이전 글, 다음 글의 링크 혹은 최근 글 목록, 공지 목록 등에 활용하실 수 있습니다.

HTML

<a href="" class="tf article_thumb">
    <img src="" alt="thumbnail" class="thumb" onerror="this.src='/favicon.ico'">
</a>

onerror의 경로는 원하시는 이미지의 경로로 변경하시면 됩니다.

JS

$(function() {
  function b(j) {
    var k = document.createElement("a");
    return k.href = j, k.pathname
  }
 
  function c(j) {
    var k = {},
      l = {};
    $.ajax({
      url: j,
      success: function(m) {
        m = m.replace(/src/g, "NOsrc");
        var n = $(m);
        k.thumb = $(n).filter("meta[property='og:image']").attr("content"), k.thumb || (k.thumb = $(n).find("article img").first().attr("NOsrc")), f[j] = k, h++, h === g.length && d()
      },
      error: function() {}
    })
  }
 
  function d() {
    $(".tf.article_thumb").each(function(j, k) {
      var l = f[b(k.href)].thumb;
      $(k).children(".thumb").attr("src", "https://i1.daumcdn.net/thumb/C50x50/?fname=" + l)
    })
  }
  var f = {},
    g = [],
    h = 0;
  (function() {
    var j = [];
    $.each($(".tf"), function(l, m) {
      j.push(b(m.href))
    }), $.each(j, function(l, m) {
      -1 === $.inArray(m, g) && g.push(m)
    });
    for (var k = 0; k < g.length; ++k) c(b(g[k]))
  })()
});

C50x50을 원하시는 크기로 변경해주세요.

R0x0 : 원본 비율을 유지하며 지정된 크기로 가져옵니다.

C0x0 : 원본 비율을 무시하고 지정된 크기로 잘라서 가져옵니다.