ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Yzngal 스킨의 섬네일 이미지 미출력 문제 해결방법 공유
    일상다반사/블로그 관련 이야기 2018. 9. 1. 23:15
    728x90

    이 시간에 블로그에 글을 적는건 거의 처음인것 같습니다.

    티스토리 계정 만든 초기에는 틀이 잡히기 전이라 그때그때 생각나는걸 적어서 바로 올렸는데, 틀이 잡히고 나서는 미리 작성하고 탈고한걸 공개해 오고 있으니 말이죠.

    굳이 이렇게 급하게 언급하려 하는 것은 바로 블로그 스킨 중 일부가 오동작해 그 문제 해결방법을 공유하고 싶어서입니다.


    지난 금요일(8/31) 티스토리는 예고한 대로 모든 블로그에 https 연결을 활성화했습니다.

    그리고 기본적으로 https 연결은 페이지 내 모든 구성요소가 https로 연결되었을때 '보안 연결'을 표시해 줍니다.

    8월 초에 올라온 공지를 보고 블로그 스킨의 URL은 처리를 했었는데, 이번과 같이 스킨 내 기능 때문에 문제 생길건 예상을 못했네요.

    제가 스킨을 만든것도 아니고, 티스토리 스킨을 만들어본 적도 없지만 개발자도구 덕분에 해당 기능의 어느 부분에 문제가 있는지는 금방 찾을 수 있던걸 다행이라 해야 할지.



    시작하기에 앞서, 스킨 제작자는 같더라도 제가 수정할 js파일과 내용이 100% 동일한지 확인할 수 없으므로 수정한 파일이 아닌 소스 수정방법을 공유하겠습니다.

    파일을 통채로 올려놓으면 그걸 받아가셔서 어떤 일이 생길지 알수가 없어서 말이죠.


    js파일은 티스토리의 '스킨변경' 페이지[바로가기: https://블로그주소.tistory.com/manage/design/skin] 의 상단에서 '스킨 다운로드' 를 하신 뒤 다운로드 받아지는 압축파일 안에서 찾을 수 있습니다.

    해당 파일을 끝에 '_180901' 과 같이 문자를 추가하는 식으로 이름을 변경하고 나서 아래 과정을 따라해 주시기 바랍니다.


    원래는 동일한 파일을 덮어씌워 올려도 반영이 되어야 하는데, 서버측 캐시 문제인지 계속 이전 파일을 읽어오더군요.

    그래서 아예 파일이름을 다르게 새로 올릴 겁니다.


    수정은 메모장 보다는 notepad++ 과 같은 에디트 프로그램을 이용하시길 권합니다. 소스 찾기도 편하고 저장시 인코딩 등의 문제가 발생할 가능성이 적습니다.


    P.S

    2018.9.2 A.M 0:10 추가. 9.7 A.M 12:30 수정.

    제가 수정한 js파일을 첨부해둡니다.

    이후 수정한 내용을 다시 올립니다.


    ygaln_180906.js

    참고하시길.

    ///


    여기까지 준비되었다면 가장 먼저, ygaln.js 파일을 찾습니다.

    이 이름이 아니라면 y로 시작하는.. yzinit() 과 같이 초기화 함수가 선언되어 있는 파일을 찾아보시면 됩니다.

    이 파일에서 필요할 때에 섬네일을 만듭니다. 검색페이지, 카테고리 보기 같은 곳에서 말이죠.



    그리고 이 부분을 변경합니다.

    섬네일이 떠야 할 글의 URL로 HTML string을 가져와 그 안에서 첫번째 이미지를 찾는데, 최근 https 연결이 가능해지면서 티스토리측이 이미지 주소를 변경했나봅니다.

    그에 대한 대응입니다.



    그 외에는 위와 같이 https 연결로 URL을 생성하지 않는 부분을 https로 변경해 주었습니다. 임의로 URL을 만들어 보니 접속에 크게 문제는 없는것 같습니다.



    여기까지 하고 나서 해당 파일을 저장하시고, 스킨용 파일업로드 영역에 올립니다.

    꾸미기 > 스킨편집 [바로가기: https://블로그주소.tistory.com/manage/design/skin/edit#/ ] 의 오른쪽에서 'HTML편집' > 상단 파일업로드 탭 에서 수정한 js파일을 올려줍니다.


    그 뒤 상단의 HTML 탭(HTML / CSS / 파일업로드 중 HTML 탭) 으로 와, 이전 js파일 이름으로 'Ctrl + F' 를 눌러 검색합니다.

    제 경우는 ygaln.js로 찾았습니다. 그러면 아래와 같은 부분이 나올 것입니다.



    그 부분을 새로 올리신 파일명으로 바꿔줍니다.


    그 뒤, 저장하시고 블로그 메인으로 나와 섬네일이 뜨는 카테고리 페이지 등에 접근해 보시기 바랍니다.

    나오면 성공이고... 안나오면 다른 문제가 있나 살펴봐야겠지요.



    여기에 추가적으로, 지금은 해당 글의 첫번째 이미지 원본이 크기만 줄여져서 보여지고 있어 이 부분을 섬네일로 대체할 수 있는 방법을 찾고 있습니다.

    이건 딱히 필요하다 하시는 분이 없다면 저만 수정하고 말것 같지만 말이죠.

    아래를 참고하시길.


    2018.9.7 A.M 12:30 추가.

    이미지를 섬네일로 가공해서 표시할 수 있는 방법을 덧붙힙니다.


    브라우저는 개발자용 디버그 기능이 좋은 구글 크롬을 기준으로 하겠습니다. 양해해 주시기 바랍니다.

    또, 혹시 모르니 성공하기 전까지는 수정전 js파일을 백업해서 보관하시기 바랍니다.



    일단, 현재 카테고리 페이지에서 섬네일 이미지가 나오고 있다는 것을 전제로 합니다.

    그리고 올리고 계시는 이미지 중에서 가장 많은 비중을 차지하는 비율을 가진 이미지가 있는 카테고리로 갑니다.


    이 작업을 하는 이유는, 현재 사용중이신 스킨에서 가장 예쁘게 보이는 이미지 사이즈(가로세로 비율)를 찾기 위해서입니다.

    섬네일 URL에 특정 사이즈로 섬네일 이미지 크기가 고정되어 버립니다.

    저는 300 x 250으로 최적의 사이즈를 찾았는데, 쓰고계시는 스킨에까지 이 사이즈가 맞을지는 모르는 일이니까요.



    카테고리 등, 이미지 섬네일이 나오는 화면으로 들어가신 뒤에 섬네일 이미지를 오른쪽 클릭하여 '검사' 혹은 '요소 검사' 를 클릭합니다.

    그러면 하단에(하단이 아니기도 함) 디버그 도구가 열리고 이미지 영역의 소스코드가 보이는데,

    파란색으로 된 그 부분에 커서를 가져가면 위와 같이 상단 이미지 영역에 사이즈가 표시됩니다.


    제 경우는 원래 300 x 255였습니다.

    저건 수정한 뒤라서 사이즈가 약간 줄었습니다만, 어쨌든 300 x 255라고 떴다고 보고 다음 과정으로 가시겠습니다.



    이제, 먼저 위에서 섬네일 사이즈를 살폈던 그 글로 들어갑니다. 한번 더 디버그 툴을 써야 하니 디버그 툴은 닫지 마시구요.



    그리고 아까 섬네일에 떴던 이미지를 다시 오른쪽 클릭해 '검사' 혹은 '요소 검사' 클릭해줍니다.

    아까처럼 그 부분의 스크립트가 표시될텐데, src= 이라는 부분이 이미지의 URL 주소입니다.

    바로 옆의 파란 주소부분을 더블클릭하면 복사 가능한 상태가 됩니다. 잘 복사해두시길.



    이제 아래의 URL로 테스트를 하겠습니다. 아까 파악한 사이즈를 섬네일 서버가 지원하는지 여부를 확인할 겁니다.

    이게.. 무조건 입력한다고 다 받아들이진 않더군요. 사전에 지원하는 사이즈인지 확인이 필요합니다.


    https://i1.daumcdn.net/thumb/C300x255/?fname=https://t1.daumcdn.net/cfile/tistory/2406B34658611E8207


    위 URL을 복사하셔서, 왼쪽의 '300x255' 부분에는 먼저 위에서 찾은 이미지 사이즈를, 오른쪽의 주소에는 방금 위에서 찾은 이미지 주소를 넣어줍니다.

    그리고 브라우저에 입력하고 Enter.



    결과는 아래 경우중 하나일 겁니다.


    1. 가운데 조그마한 이미지가 뜬다 => 사용 가능한 사이즈


    2. 요상한 에러 화면이 뜬다(지원하지 않는 사이즈라는것 같다) => 가로 혹은 세로 픽셀의 일의자리가 0이 아니라면 가장 가까운 0으로 줄여 써본다.

    안된다면 십단위로 10씩 줄여본다(가로 혹은 세로 비슷비슷하게 줄이시는게 좋습니다)



    제 경우는 2번이었습니다. 그래서 세로 사이즈를 250으로 줄였죠.


    https://i1.daumcdn.net/thumb/C300x250/?fname=https://t1.daumcdn.net/cfile/tistory/2406B34658611E8207


    이렇게 작동하는 주소를 찾았습니다. 이제 이걸 스크립트에 추가하겠습니다.



    이번 수정사항은 먼저 위에서 시도했던 작업보다는 살짝 더 난이도가 있을지도 모르겠습니다.

    어쨌든 d.attr("src" 부분에서 넣으려고 하는 a.~~ 의 a 에 있는 첫번째 이미지의 URL을 먼저 찾은 섬네일 서버를 타게 바꿔 주는게 목표지요.

    꼭 d.attr 로 안되어 있을수도 있는데, 'src' 에다 무언가 입력하려고 하는것 같은 부분을 찾으시면 됩니다. 그리고 그 앞에 섬네일 서버 URL을 추가해 주는거죠.


    그 다음엔 저장하고 이 수정한 파일을 올리시면 됩니다. 바로 윗부분에서 파일 올리는 방법과 동일합니다.

    파일명이 동일하면 캐시로 인해 반영에 시간이 걸릴 수 있으니, 바로 결과를 보고 싶으시면 파일명을 바꿔 업로드하신 뒤 'HTML 편집'에서 js 파일명을 수정해주시길.



    그리고 카테고리 목록 페이지로 가 봅니다. 정상적으로 적용되었다면 섬네일 서버를 거쳐 이미지가 표시됩니다.

    이는 원본 이미지의 사이즈가 살짝 모나더라도(좌우 혹은 상하로 길다던가) 항상 같은 사이즈로 표시되기에 섬네일 화면이 조금 더 깔끔하네요.

    확실히 확인하고 싶으시면, 섬네일 이미지를 오른쪽 클릭해 '검사' 혹은 '요소 검사' 클릭한 뒤 src= 부분의 주소를 보면 됩니다.

    먼저 입력한 'i1.daumcdn.net/thumb' 부분이 보이면 잘 적용된 것입니다.



    ..이 부분도 잘 안되면 덧글 남겨주시길. 최대한 도와드리겠습니다.


    ///



    작성시간이 짧은 관계로 비교적 스킨 HTML 수정에 밝으신 분들 위주로 글을 작성하게 된 점은 마음에 걸리네요.

    일단 이번 글은 여기까지입니다.

    저와 같은 제작자분의 스킨을 쓰고 계신다면, 잘 안되는 부분을 도와드리겠습니다. 덧글 남겨주시길.


    그럼 수정에 도움 되셨길 빕니다.

    댓글 31

    • BUTA NEKO 2018.09.01 23:40 신고

      걍 덥어 씌울께요 파일 좀 주시면 감사하겠습니다. 아진짜 하다가 빡쳐서 깨지고 오류나고

      • SCV 2018.09.02 00:12 신고

        본문 중간부분에 업로드해 놓았습니다.

      • BUTA NEKO 2018.09.02 00:15 신고

        어찌하긴 했는데 제가 해서 해결된건지 관리자 분들이 해결했는지 모르겠네요. 만약 관리자 분들이 하것이 아니라면 SCV님의 이걸 보고 JS파일 수정한것으로 해결된것이고 아니면 관리자 분들이 해결해준것 같습니다. 뭔지는 몰라도 감사드려요.

      • SCV 2018.09.02 00:24 신고

        일단 해결되었다고 하시니 다행이군요. 고생하셨습니다 :)

      • BUTA NEKO 2018.09.02 00:31 신고

        넵 우선 해결은 되었습니다 무조건 감사드려요

    • 익명 2018.09.03 13:56

      비밀댓글입니다

      • SCV 2018.09.03 22:19 신고

        비슷하게 구현한 분들이 많은가보네요. 해결 보셔서 다행입니다 :)

        섬네일 건은.. 티스토리 SSL 전환쪽 글에 문의겸 덧글 남겼는데 답글이 없어서 고객센터와 포럼에 다시 문의 남겼습니다.
        꼭 해결하고 싶은데 스킨 만들어본적이 없어서 시간은 좀 걸릴것 같네요. 답변 받으면 다시 답글 남기겠습니다.

      • talv 2018.09.03 23:31 신고

        앗 그러셨군요! 답글 주신다니 정말 감사드려요
        꼭 해결되었으면 하고 바래봅니다ㅠㅠ 좋은 밤 되세요!

      • SCV 2018.09.07 01:00 신고

        해결은 했는데, 이번건 조금 난이도가 있을지도 모르겠네요.
        글 하단에 추가했으니 참고하시길. 잘 해결보시길 빕니다!

      • talv 2018.09.07 19:52 신고

        안녕하세요! 말씀해주신 대로 했더니 문제가 해결되었습니다ㅠㅠ 정말 정말 감사드려요. 처음에 주석처리랑 밑에 d.attr부분 추가하는 것 빼먹어서 안 되나 싶었는데 한 번 더 수정하니까 바로 되었어요!
        제가 검색을 못하는 건지 아무리 검색해도 해결방법이 안 나오고 그래서 포기할까도 싶었는데.. 블로그 몇 번 옮기면서도 유지했던 스킨이라 애착이 있었거든요ㅠㅠ근데 이렇게 계속 사용할 수 있게 되어서 너무 기뻐요ㅠㅠ 귀찮으실텐데 상세히 올려주신 거 다시 한 번 감사드리고 항상 하시는 일 잘 되길 바랄게요. 좋은 주말 보내세요^_^!!

    • 아이리스. 2018.10.31 03:09 신고

      정말 감사합니다.
      오랫동안 사용한던 스킨을 Yzngal로 바꾸면서
      섬네일 이미지가 나타나지 않아 아쉬웠었는데
      올려주신 자료로 썸네일 이미지 미출력 문제를 해결하였습니다..

      • SCV 2018.11.01 23:12 신고

        옛, 해결 보셨다니 다행입니다 :)
        확실히 지금처럼 예쁜 갤러리 느낌이셨으면 섬네일 하나도 안나와서 애좀 태우셨겠습니다;

    • 지노아빠 2019.12.01 13:58 신고

      파일 덥어 씌워서 성공했습니다.
      감사합니다.

    • 순무꾸 2020.03.25 19:49 신고

      파일을 다운받고 업로드했는데 해결이 안되네요ㅠㅠ 티스토리 블로그 어려워요.... 썸네일만 있으면 딱 좋을텐데

      • 순무꾸 2020.03.25 20:57 신고

        옛날 소스파일이랑 지금 소스파일이랑 달라진걸까요??

      • SCV 2020.03.25 21:52 신고

        지금 들어가보니 스킨 제작자분이 다른것 같네요?
        같은분이 만드셨어도 버전이나 작업시기에 따라서 다를수도 있습니다. 지금은 겸사겸사 스킨을 교체한 상태라 도움 드리기 힘들겠네요.. ㅠㅠ

      • 순무꾸 2020.03.25 22:08

        네ㅠㅠ 파일 구성이 다르더라고요. 그래도 다행이 맘에드는 스킨 찾아서 적용 했습니다ㅎㅎ 블로그 초보라 허덕이고 있네요.
        답글 달아주셔서 감사합니다~

    • ase 2020.11.07 22:10

      저도 이 스킨 맘에들어서 계속쓰고있었지만 이미지 안나오는거 떄문에 영 찝찝했는데 덕분에 시원해졌네요 감사합니다!

    • 익명 2021.04.03 01:41

      비밀댓글입니다

      • SCV 2021.04.07 22:56 신고

        요즘 시험공부니 뭐니 해서 퇴근시간에도 바쁘네요. 답글이 늦어서 죄송합니다.

        같이 붙혀주신 js 파일을 보니, 제가 이때 쓰던 스킨처럼 [블로그 글에서 첫번째 사진을 읽어서 그 이미지를 불러오려고 하는]듯 한데, 어떤 부분이 변경되어서 이미지를 못찾는지를 알기가 여기까지만으론 좀 힘듭니다.

        괜찮으시면 스킨을 쓰고있는 블로그를 링크해줄 수 있으신가요?

        몇번 답글을 주고받아야 하는 지루한 싸움(?)이 될 수도 있는데, 일단 수정에 대한 힌트는 드려 보겠습니다.
        (이 글을 적었을 때엔 제 블로그에 스킨이 적용되어 있어 데이터 흐름 같은걸 개발툴로 따라가면서 고쳤습니다; )

      • 2021.04.08 17:36

        비밀댓글입니다

      • SCV 2021.04.08 23:15 신고

        일단 한시간 정도 둘러봤는데, 제가 접속했을때 뜨는 글 6개 기준으로는 아래 부분 수정하고 다음과정이 필요한지 보는게 좋을것 같습니다.

        if(a.indexOf("image",0) < 0){
        en = 0;
        }else{

        이런 부분이 있는데,

        if(a.indexOf("img",0) < 0){
        en = 0;
        }else{

        이렇게 말이죠.

        일단 이렇게 바꿔서 섬네일이 뜬다고 해도, 구 에디터와 신 에디터로 작성한 글은 이미지의 URL이 달라져 구 에디터의 섬네일은 계속 안나올 겁니다.
        (아마 티스토리는 이런 현상이 발생할 것을 예상해 섬네일 표시 이렇게 만드는걸 권장하지 않았을 겁니다; )

        수정하고 답글 부탁드립니다.

      • 2021.04.11 02:27

        비밀댓글입니다

    • 아이리스 2021.04.09 17:55

      SCV님이 올려놓으신 자바 스크립트로
      썸네일 미출력 문제를 해결했던 아이리스입니다
      요즘 신에디터로 바뀌면서 신에디터로 작성한 글
      최근게시물은 나오는데 전체 보기 썸네일 오류가 나고 있습니다
      올려 놓으신 자료를 보고
      바뀐 이미지 주소로 수정해 보았는데도 변화가 없었습니다

      다음측에 문의를 했었는데
      개인적으로 수정이 어려우면 다음에서 제공하는 스킨으로
      바꾸라는 답변만 들었습니다

      포럼에도 질문을 올렸는데 해결하지 못했습니다

      계속 Yzngal스킨을 사용하고 싶은데
      어디를 어떻게 수정해야 썸네일 이미지가 나오는지
      염치없지만 부탁드립니다..^^

      ps: 여러번 왔었는데 흔적이 없으셔서 그냥 되돌아 갔었는데
      오늘 댓글을 다신걸 보고 저도 용기를 냈니다..^^

      https://perfume700.tistory.com/category

      • SCV 2021.04.11 00:21 신고

        2년 반 사이에 티스토리 안에서도 많은 변화가 있었나봅니다. 먼저 위 덧글 남기기 위해 살펴보았을 때에도 이미지 URL 패턴이나 본문 구조 변화가 살짝 보이더군요.

        일단 쓰고계시는 스킨의 ygaln_180906.js 파일을 아래와 같이 수정하고 나서 한번 더 동작을 보겠습니다.
        기존 스킨으로 복원할 수가 없는 상황이라, 쓰고계시는 블로그의 스킨으로 동작을 확인하였습니다.
        수정전 부분을 그대로 복사해서 텍스트 검색(Ctrl+F) 하시면 나올겁니다.

        수정전1
        tl=b.indexOf('<div class="entry-ccl"',0);

        수정후2
        tl = b.indexOf('<meta property="og:image" content="',0);

        if(tl<0)
        tl=b.indexOf('<div class="entry-ccl"',0);


        수정전2
        var e = 'https://t1'; // http://cfile

        수정후2
        var e = 'https://img1'; // https://t1


        일단 위 두 부분을 수정하시고 답글 남겨주시면, 제가 추가로 확인할게 있나 확인해 보겠습니다.

    • 아이리스 2021.04.11 22:05

      바쁘신 중에도 이렇게 살펴주셔서 감사합니다~^^
      수정해 부분을 수정해서 적용해 보았는데
      전체보기 썸네일 이미지는 제 프로필 사진으로 나옵니다

      • SCV 2021.04.11 22:20 신고

        일단 제쪽에서는 수정하셨다고 한 파일의 내용이 수정전과 동일하게 확인되네요.
        다시한번 확인 부탁드립니다.

    • 아이리스 2021.04.11 22:41

      파일을 덮어씌운 후 적용을 클릭하지를 않았네요..^^
      마지막이라 생각하고 도움을 청한거였는데
      감사하다는 말씀 밖에는 드릴말이 없네요
      이제야 한시름 놓이네요
      덕분에 다시 티스토리 할 맛 날 것 같아요~^^

Designed by Tistory. Edit By SCV