티스토리 Flatinum 스킨 썸네일 오류 수정

티스토리가 파일서버가 바뀌면서 썸네일 노출이 안 되던 문제가 있었다.

특히 비공개 글에 대한 썸네일 위치가 달라진 것인지 비공개 글만 썸네일이 보이지 않았다.

Flatinum 스킨을 수정해서 사용하고 있는데 이 스킨의 동작 방식을 살펴볼 필요가 있다.

메인 페이지는 티에디션으로 꾸며저 있다.

각 카테고리로 들어가면 Flatinum 스킨이 만들어주는 갤러리형 목록을 보여준다.

이 목록은 스킨에서 수정하기 전의 원본 상태는 그냥 글 목록만 불러서 보여주는 것이고,

이 스킨에 포함된 자바스크립트가 각 글 목록을 하나씩 Jquery AJAX로 가져가다

그 안에 있는 썸네일을 추출하고 이 썸네일로 만든 갤러리 아티클들을 Masonry 라이브러리로 

갤러리 모양으로 배열하는 구조로 동작한다.

스킨에 포함된 파일들 중에 jquery-slimscroll이 사라졌다.

개발자 도구에서 보니 이 파일이 원래 특정 위치에서 link되어 들어와야 하는데 언제 사라졌는지 없다.

이게 없다고 썸네일이 안 보이지는 않을 것 같은데 특정 객체가 만들어지지 않는 탓에 

썸네일을 가져와 만들어지는 객체의 속성이 undefined로 떨어진다.

이 스킨이 사용하는 ygaln.js 파일의 내용은 간단하다.

목록에서 url link를 읽어다가 해당 페이지 문서를 ajax로 가져온다.

이 문서 내에 썸네일이 위치한 부분을 일정 부분 잘라낸다.

category가 시작되는 부분부터 해당 글이 끝나는 부분까지가 해당된다.

이 부분에 첫번째 이미지가 있는지 찾는데 http://cfile 스트링을 match로 찾는다.

(파일 위치가 바뀌어 위 url은 의미가 없음)

이미지가 여러 개 있으면 그 중 첫번째 이미지의 썸네일을 글목록의 이미지 src로 교체한다.

이미지의 class=dno는 제거.

위의 단계에서 match된 이미지가 없으면 다른 이미지 url을 찾는데 https://t1.daumcdn.net/ 이 있는지 찾는다.

(이것도 변경되어 /cfile/tistory/ 이 경로가 추가됨)

이 url은 티스토리가 이미지 파일서버를 바꾸면서 최근 바뀐 것이다. Flatinum 스킨의 원본에는 이 스트링이 다르므로

수정이 필요하다. 비공개글의 썸네일이 보이지 않던 이유는 이것 때문으로 판단된다.

이 url 매칭이 되면 이미지로부터 썸네일을 만들어 글목록의 img src에 넣어준다.

위 단계까지 match 결과가 없으면 동영상이 있는지 찾는데 youtube.com 스트링과 매칭을 한다.

이미지는 없고 동영상만 있는 글이 여기서 걸러진다.

youtube 동영상은 http://i.ytimg.com/vi/동영상코드/이미지파일이름 이런 구조의 썸네일을 지원한다.

해당 동영상의 embed url로부터 위의 썸네일을 추출하고 이것을 글목록의 img src에 넣는다.

그 다음에는 유튜브 동영상이 아닌 다음 videofarm.daum.net의 동영상과 매칭을 하고 

이것도 없으면 썸네일 없음으로 처리된다.

videofarm.daum.net 이것도 url이 변경되었을 것 같은데 써보지 않아서 뭘로 바뀌었을지는 모르겠다.

유튜브 동영상의 썸네일 추출하는 부분에서 html 스트링을 잘라낼 때 주의할 부분이 있는데

원래의 ygaln.js에서 찾던 끝부분 이전에 동영상 썸네일 없음을 의미하는 티스토리 아이콘이 추가되어

원래의 스크립트에서는 이 아이콘이 썸네일로 추출되는 문제가 있다.

그래서 끝부분을 이 아이콘이 나오기 전으로 잘라주어야 하는데

<div class="container_postbtn"> 이 스트링을 찾아서 자르면 될 것으로 보인다.

여기서 잘라내 유튜브 썸네일을 추출했더니 문제 없이 썸네일이 잘 노출되고 있다.

소나기 글이 사진과 동영상이 같이 들어 있는데 첫번째 이미지 썸네일이 노출된 것이고,

이미지 없이 동영상만 있으면 유튜브 동영상의 썸네일이 노출된다.