기본 노이미지, 보호글 썸네일 미출력 문제(엑박 또는 곰돌이) 안내

Tistory/전달 사항 2022. 11. 7.

안녕하세요.

22년 11월 7일 기준 기본 노이미지, 보호글 썸네일이 출력되지 않는 문제가 있어 이를 수정하는 방법에 관해 안내드립니다.

 

 

스킨 옵션에서 노이미지, 보호글 썸네일을 지원하는 경우

관리 > 꾸미기 - 스킨 편집 > 우측에서 스크롤을 내려 [ 노이미지 - 이미지 업로드 ]  또는 [ 노이미지 썸네일 - 이미지 업로드 ]  / [ 보호글 썸네일 - 이미지 업로드 ]

대체할 이미지를 업로드하거나, 없을 경우 기본으로 제공되는 이미지를 업로드합니다. (스킨 파일 중 noimg.jpg, secret.jpg )

 

 

스킨 옵션에서 노이미지, 보호글 썸네일을 지원하지 않는 경우

 

대체할 이미지가 있는 경우 아래 중 편한 곳에 업로드합니다.

글쓰기 에디터에 이미지 업로드

업로드한 이미지 위에 마우스 커서를 올린 후 우클릭 > 이미지 주소 복사

 

관리 > 꾸미기 - 스킨 편집 > HTML 편집 > 파일 업로드에 이미지 업로드

업로드한 파일 이름 위에 마우스 커서를 올린 후 우클릭 > 링크 주소 복사

 

 

대체할 이미지가 없는 경우 기본으로 제공되는 이미지 설정하기

관리 > 꾸미기 - 스킨 편집 > HTML 편집 > 파일 업로드

노이미지 : images/noimg.jpg 파일 이름 위에 마우스 커서를 올린 후 우클릭 > 링크 주소 복사

보호글 : images/secret.jpg 파일 이름 위에 마우스 커서를 올린 후 우클릭 > 링크 주소 복사

노이미지, 보호글 관련이 아니더라도 html이나 css에서 .jpg / .png / .gif 등을 검색했을 때 앞에 ./images/로 시작하는 부분이 있다면 전부 이 방식을 따라 주면 됩니다.

 

위 안내를 따라 주소를 복사한 후 아래 안내를 따라주세요

관리 > 꾸미기 - 스킨 편집 > HTML편집 > HTML에서 우측 소스 창을 한번 클릭 후 > 컨트롤+F

  1. 위 이미지를 참고하여 [ v ] 버튼을 클릭하면 위와 같은 바꾸기 창이 활성화됩니다.
  2. 2번 [ Find ] 에 노이미지는 [ ./images/noimg.jpg ] 보호글 썸네일은 [ ./images/secret.jpg ] 입력 (이 외에는 ./images/파일명.확장자 를 입력)
  3. [ Replace ] 에 [ 위에서 복사한 주소를 붙여 넣기 ]
  4. [ 4번 버튼 ]을 누르면 일괄 변경됩니다.
  5. 이후 [ 적용 ]

 

 

기타 : 기본 이미지를 블로그 프로필 사진으로 대체하는 방법

  • 관리 > 왼쪽 블로그 이름 위 이미지 클릭 > 블로그 설정에서 이미지 업로드 또는
  • 관리 > 관리 - 블로그 > 블로그 설정에서 이미지 업로드

 

관리 > 꾸미기 - 스킨 편집 > HTML편집 > HTML에서 우측 소스 창을 한번 클릭 후 > 컨트롤+F

 

  1. 위 이미지를 참고하여 [ v ] 버튼을 클릭하면 위와 같은 바꾸기 창이 활성화됩니다.
  2. 2번 [ Find ] 에 노이미지는 [ ./images/noimg.jpg ] 보호글 썸네일은 [ ./images/secret.jpg ] 입력
  3. [ Replace ] 에 [ [★##_image_##★]  ] 입력 (별은 삭제!!!)
  4. [ 4번 버튼 ]을 누르면 일괄 변경됩니다.
  5. 이후 [ 적용 ]

 

 

보호글 썸네일은 아래 작업을 추가로 진행하세요.

이 안내는 스크립트를 이용해 목록 형태(갤러리형, 목록형 등)를 변경하는 스킨에 한정되며, 관리에서 목록 형태를 변경하는 스킨은 해당되지 않습니다.

html에서 [ ./images/secret.jpg ] 검색 후 앞 뒤에 있는 [ <s_article_rep_thumbnail> ] [ </s_article_rep_thumbnail> ] 를 삭제합니다.

아래 소스는 예시이나 스킨마다 차이가 있을 수 있는 점 참고 바랍니다.

<s_article_rep_thumbnail><!-- 삭제 -->
	<span class="thumb-img"> 
    	<img src="//i1.daumcdn.net/thumb/C200x200/?fname=[변경한이미지주소]">
    </span>
</s_article_rep_thumbnail><!-- 삭제 -->

 

 

귀찮아! 그냥 한 번에 스크립트로!!

가능하면 번거롭더라도 앞서 안내드린 방법대로 수정을 권장합니다.

아래 안내드리는 소스는 스킨에 따라 스크립트로 변경하는 것이기 때문에 스킨에 따라, 로딩 속도에 따라 변경되는 과정이 눈에 보일 수 있습니다.
또한 스킨에 따라 적용되지 않는 부분이 있을 수 있으며, 제가 제작하지 않은 스킨에서는 더더욱 적용되지 않을 수 있습니다.

 

적용 방법

  • 복사한 뒤 html의 가장 아래에 있는 </s_t3>의 바로 위에 붙여 넣기 하거나
  • 묘연 스킨의 경우 아래 소스 중 <script>와 </script>를 제외한 나머지를 복사 > 스킨 파일 중 myo_script.js 파일을 메모장 등으로 열은 뒤 붙여 넣기 > 저장 > 파일 업로드
<script>
  $(function() {

    var change = $('[href*="/skin/"]').attr('href'),
      changeLastIndex = change.lastIndexOf('/'),
      changeUrl = change.substring(0, changeLastIndex + 1);

    // 이미지 변경
    $('img[src*="fname=./images"]').each(function() {
      var ori = $(this).attr('src'),
        lastIndex = ori.lastIndexOf('/'),
        oriName = ori.substring(lastIndex - 6, ori.length),
        oriUrl = ori.substring(0, lastIndex - 8);
      $(this).attr('src', oriUrl + changeUrl + oriName);
    });

    // 배경 변경
    $('[style*="background-image"][style*="./images/"]').each(function() {
      var back = $(this).css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1'),
        lastIndex = back.lastIndexOf('/'),
        backName = back.substring(lastIndex - 6, back.length);
      $(this).css('background-image', "url(" + changeUrl + backName + ")");
    });

  });

</script>

차후 티스토리에서 오류가 수정된다면 위 소스를 지우기만 하면 됩니다.

 

 

본 문제는 티스토리의 잠시 오류일 수도, 앞으로 적용되는 변경점일 수도 있어 언제 정상적으로 적용되는지 저로써는 알 수 없으며 이에 관한 상세한 문의는 카카오 고객센터 측으로 문의 바랍니다.

https://cs.kakao.com/requests?service=175&locale=ko 

 

고객센터

카카오 고객센터를 통해 각 서비스 도움말을 확인해보세요.

cs.kakao.com

 

 

감사합니다.

728x90
반응형
저작자표시 비영리 변경금지

티스토리툴바