위 이미지처럼 티스토리 썸네일이 아무것도 없을 때, 만약 글에 유튜브 영상이 포함되어 있다면 자동으로 해당 유튜브의 썸네일을 썸네일로 표시하는 스크립트입니다.

대부분 스킨 제작자가 썸네일을 첨부하지 않았을 때를 대비해 짜둔 스크립트가 존재할 텐데, 이 스크립트는 해당 스크립트와 충돌할 가능성이 있으니 주의해주세요.

HTML

<a href="[##_article_rep_link_##]" class="indexArticle">
    <div class="index_thumbnail">
        <img src="<s_article_rep_thumbnail>https://i1.daumcdn.net/thumb/R700x0/?fname=[##_article_rep_thumbnail_raw_url_##]</s_article_rep_thumbnail>" class="index_img" alt="[##_article_rep_title_##]">
    </div>
    <div class="tit_post">[##_article_rep_title_##]</div>
    <div class="detail">
        <div class="category">[##_article_rep_category_##]</div>
        <div class="cnt-wrap"><img class="heart" src="./images/heart.svg">
            <s_rp_count><span class="cnt">[##_article_rep_rp_cnt_##]</span></s_rp_count>
        </div>
    </div>
    <div class="date hidden">[##_article_rep_date_##]</div>
</a>

임의로 제가 사용했던 인덱스 포스트의 HTML 태그입니다.

다른 건 제쳐놓고, <s_article_rep_thumbnail> 이 들어가는 부분은 반드시 위와 같이 수정해주셔야 합니다.
보통 외부로 빠져있을 건데, img src 안에 전부 구겨 넣어주세요.

해당 치환자가 두 번 들어가면 스킨이 깨집니다. 필히 src 안에 한 번만 집어넣으셔야 아무런 오류 없이 사용하실 수 있습니다.

Javascript

thumbErr = (elemurlcallback=> {
  const ajax = new XMLHttpRequest;
  let parsertarget;

  ajax.open("GET"url),
  ajax.send(null),
  ajax.onreadystatechange = () => {
    (4 === ajax.readyState&& (
      parser = new DOMParser().parseFromString(ajax.responseText.replace(/src/g"NOsrc"), "text/html"),
      target = parser.querySelector("iframe[NOsrc*='youtube']"),
      elem.src = `${target !== null ? `https://i.ytimg.com/vi/${target.getAttribute("NOsrc").replace("https://www.youtube.com/embed/""")}/original.jpg` : "https://i.imgur.com/I0QZbvs.png"}`,
      callback && (
        elem.onload = () => {
          callback()
        }
      )
    )
  }
}

해당 자바스크립트를 head 태그 안에 넣어주세요.
head 태그 안에 넣지 않으면 오류가 발생할 수 있습니다.

응용하면 네이버 TV, 카카오 TV, 사운드 클라우드 등 다양한 썸네일을 가져올 수 있겠지만, 일단 전 유튜브만 작업해뒀습니다.

다시 HTML

onerror="thumbErr(this, '[##_article_rep_link_##]')"

1번에서 작업했던 img 태그에 위 내용을 추가해주시면 끝입니다.

onerror="thumbErr(this, '[##_article_rep_link_##]'), $('.article-wrapper').masonry('layout')"

Masonry 등의 스크립트를 사용하시면, 유튜브 썸네일을 불러왔을 때 레이아웃이 깨질 수 있으므로, callback 함수도 추가할 수 있도록 해뒀습니다.

유튜브 썸네일 로딩이 끝났을 때 callback 함수를 실행합니다. 본인이 사용하는 스킨에 맞게 위 코드처럼 작업하시면 됩니다.

profile

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

(?)

  1. 오~ 이게 절실했었는데... 꿀팁입니다~
    추천!
    https://i.imgur.com/1vHOPFK.jpg

    1. 유튜브 영상은 잘 안 올리시지 않나요 ㅋㅋㅋㅋ

      확실히 활용도는 높긴 합니다. 검색 엔진 최적화가 제대로 안 돼서 문제지만요 ㅠㅠ

      https://i.imgur.com/wTjtvNN.mp4

  2. 잘 적용했습니다!! 근데, 한 가지 문제가 생겨서...

    보시면 이상하게 옆에처럼 노이미지 해둔 것만 떠야하는데, 오류 이미지가 뜨고 나서 노이미지가 되서 사진이 길어져 정렬이 망가지네요...

    보시면 유튜브 내용 들어가있는 것도 아니고 그냥 트위터 링크 적어둔 거 뿐이고...

    또 유튜브 글들도 카테고리에서 보면 정상적인데 검색하면 위처럼 되더라구요...

    개발자 도구를 통해서 보면 사진 맨 뒤에 width=250 height=250이 넣어져있습니다...

    + 검색글 유튜브도 xboxreplace_250.png라는 사진 잠시 떴다가 썸네일 뜨네요...

    1. 본문에도 적어뒀지만, 스킨 제작자분이 넣어놓으신 스크립트랑 충돌하는 게 아닐까 싶습니다..ㅠㅠ
      블로그를 들어가서 보려 해도 유튜브로 리다이렉트만 돼서 볼 수도 없네요 ㅎㅎ;;

      그리고 블로그 주소 찍힌 스크린샷 혹시 지워야 하시면 말씀해주세요.

    2. 스크립트 중에 썸네일이랑 겹칠 만한 게 노이미지 밖에 없고 주석처리해뒀는데... 하나하나 다 지워보면서 확인해볼게요!! 어차피 다 비공개거나 보호글이라 볼 것도 없는 스토리라서 ㅎㅎ!

    3. 썸네일 치환자가 두 번 들어가서 생긴 문제일 수도 있으니 썸네일 치환자가 한 번만 들어갔는지도 확인해주세요.

      말씀처럼 글들이 대부분 비공개 혹은 보호 글이면 애초에 썸네일이 없어서 발생하는 문제일 수도 있을 것 같네요.

    4. 확인해보니까 썸네일 치환자 두 번 쓰이진 않았네요...

    5. 여러 스킨에 적용해봤는데 자꾸 사이즈가 달라져서 그냥 자바스크립트로 RemoveAttr 해서 높이랑 넓이 지워버렸습니다!! 감사합니다~

    6. 잘 해결된 거 같고, 위 댓글에 사진들을 지우고싶습니다~ 지워주실 수 있으신가욥?

    7. 사진 모두 제거해뒀습니다. 즐거운 블로깅 되시길 🙂

    8. 감사합니다!

  3. 허억... 정말 글을 올려주셨군요!! 컴퓨터가 고장나 지금 당장은 시도 못하지만, 고쳐지면 꼭 해보겠습니다!! 감사합니다!!!

    1. 넵~ 천천히 따라 하시면 크게 어렵진 않을 겁니다.