기본 노이미지, 보호글 썸네일 미출력 문제(엑박 또는 곰돌이) 안내
안녕하세요.
22년 11월 7일 기준 기본 노이미지, 보호글 썸네일이 출력되지 않는 문제가 있어 이를 수정하는 방법에 관해 안내드립니다.
스킨 옵션에서 노이미지, 보호글 썸네일을 지원하는 경우
관리 > 꾸미기 - 스킨 편집 > 우측에서 스크롤을 내려 [ 노이미지 - 이미지 업로드 ] 또는 [ 노이미지 썸네일 - 이미지 업로드 ] / [ 보호글 썸네일 - 이미지 업로드 ]
대체할 이미지를 업로드하거나, 없을 경우 기본으로 제공되는 이미지를 업로드합니다. (스킨 파일 중 noimg.jpg, secret.jpg )
스킨 옵션에서 노이미지, 보호글 썸네일을 지원하지 않는 경우
대체할 이미지가 있는 경우 아래 중 편한 곳에 업로드합니다.
글쓰기 에디터에 이미지 업로드
업로드한 이미지 위에 마우스 커서를 올린 후 우클릭 > 이미지 주소 복사
관리 > 꾸미기 - 스킨 편집 > HTML 편집 > 파일 업로드에 이미지 업로드
업로드한 파일 이름 위에 마우스 커서를 올린 후 우클릭 > 링크 주소 복사
대체할 이미지가 없는 경우 기본으로 제공되는 이미지 설정하기
관리 > 꾸미기 - 스킨 편집 > HTML 편집 > 파일 업로드
노이미지 : images/noimg.jpg 파일 이름 위에 마우스 커서를 올린 후 우클릭 > 링크 주소 복사
보호글 : images/secret.jpg 파일 이름 위에 마우스 커서를 올린 후 우클릭 > 링크 주소 복사
노이미지, 보호글 관련이 아니더라도 html이나 css에서 .jpg / .png / .gif 등을 검색했을 때 앞에 ./images/로 시작하는 부분이 있다면 전부 이 방식을 따라 주면 됩니다.
위 안내를 따라 주소를 복사한 후 아래 안내를 따라주세요
관리 > 꾸미기 - 스킨 편집 > HTML편집 > HTML에서 우측 소스 창을 한번 클릭 후 > 컨트롤+F
- 위 이미지를 참고하여 [ v ] 버튼을 클릭하면 위와 같은 바꾸기 창이 활성화됩니다.
- 2번 [ Find ] 에 노이미지는 [ ./images/noimg.jpg ] 보호글 썸네일은 [ ./images/secret.jpg ] 입력 (이 외에는 ./images/파일명.확장자 를 입력)
- [ Replace ] 에 [ 위에서 복사한 주소를 붙여 넣기 ]
- [ 4번 버튼 ]을 누르면 일괄 변경됩니다.
- 이후 [ 적용 ]
기타 : 기본 이미지를 블로그 프로필 사진으로 대체하는 방법
- 관리 > 왼쪽 블로그 이름 위 이미지 클릭 > 블로그 설정에서 이미지 업로드 또는
- 관리 > 관리 - 블로그 > 블로그 설정에서 이미지 업로드
관리 > 꾸미기 - 스킨 편집 > HTML편집 > HTML에서 우측 소스 창을 한번 클릭 후 > 컨트롤+F
- 위 이미지를 참고하여 [ v ] 버튼을 클릭하면 위와 같은 바꾸기 창이 활성화됩니다.
- 2번 [ Find ] 에 노이미지는 [ ./images/noimg.jpg ] 보호글 썸네일은 [ ./images/secret.jpg ] 입력
- [ Replace ] 에 [ [★##_image_##★] ] 입력 (별은 삭제!!!)
- [ 4번 버튼 ]을 누르면 일괄 변경됩니다.
- 이후 [ 적용 ]
보호글 썸네일은 아래 작업을 추가로 진행하세요.
이 안내는 스크립트를 이용해 목록 형태(갤러리형, 목록형 등)를 변경하는 스킨에 한정되며, 관리에서 목록 형태를 변경하는 스킨은 해당되지 않습니다.
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
감사합니다.