───────────────────────────────────
1.질문 분야 : (ex : XE) 티스토리 스킨
2.질문하기 전에 검색해본 내용 : ( ex : XE에서 ***를 검색했는데 관련 내용이 없고 찾을 수 없어ㅠㅠ) 티스토리 스킨 썸네일, 티스토리 섬네일, og:image, 썸네일 치환자, 썸네일 스크립트 등
3.질문 내용 : (질문내용을 자세하게 적어주세요. html/css/js 코딩 관련 질문은 소스 첨부 필수!)
───────────────────────────────────
원래 썸네일이 잘 나오던 스킨이였는데, 오늘 들어가보니까 갑자기 안 나오더라고..
그래서 이것 저것 검색을 해봤더니, 확실하진 않은데 아마도 티스토리 보안 접속 https 업데이트 때문인가싶어.
https://notice.tisto★ry.com/2444 이 글 댓글에도 같은 문제 겪고 있는 사람들 댓글이 있고, 관련 글 올라온 블로그들도 있고ㅠ
저 글 댓글이나 다른 블로그들이나 http 를 https 로 수정, http://cfile 를 https://t1 로 수정 등.. 이 해결법으로 제시되어있는데, 문제는 내가 쓰고 있는 스킨엔 http 가 쓰인 곳이 없어서 이걸 적용할 곳이 없다는 것..
저 업데이트 이후에 모든 갤러리 스킨에서 문제가 생긴 건 아닌 거 같아서, 내가 가지고 있는 다른 갤러리 스킨들을 적용해보고 정상적으로 나오는 스킨의 소스를 보니 티스토리 치환자 [##_article_rep_thumbnail_raw_url_##] 를 사용한 거길래 원래 소스 부분을 지우고 img src="//i1.daumcdn.net/thumb/C120x120/?fname=[##_article_rep_thumbnail_raw_url_##]" 이런 식으로 넣어봤지만 [##_article_rep_thumbnail_raw_url_##] 이 부분에 불러와야 할 이미지 주소를 아예 못 불러오더라고.. (난 이런 쪽 전혀 모르고 그냥 배포해주는 스킨 받아서 기본적인 수정만 하는 정도야ㅠㅠㅠ)
다른 스크립트도 찾아서 https://scvs★pace.kr/1223 살짝 수정해서 넣어봤는데 이것도 안 되구ㅠㅠ
애초에 뭘 수정해야하는지 잘 모르고 막무가내로 이것 저것 해보고 있으니 당연히 해결이 안 되는 듯ㅠㅠ... 흑흑.. 어떻게든 내 힘으로 해결해보려고 밤새 붙잡고 있다가 도저히 되질 않아서 결국 여기 도움 청해봐..
해당 부분 소스는 댓글에 쓸게
+
계속 내용값은 필수입니다 라는 창이 뜨면서 댓글 등록이 안 돼서 그냥 본문에 추가해!
<s_list>
<s_list_rep>
<!-- list -->
<div class="list">
<div class="listWrap">
<s_article_rep_thumbnail>
<div class="fixed_img_col">
<ul>
<li>
<a href="[##_list_rep_link_##]">
<div class="thumb">
<img src="./images/xxx.png">
</div>
</a>
<div class="list-title">
<span>
title: <a href="[##_list_rep_link_##]">[##_list_rep_title_##]</a>
</span>
</div>
<div class="list-date">
<span>
date:<br>[##_list_rep_regdate_##]
</span>
</div>
</li>
</ul>
</div>
</s_article_rep_thumbnail>
</div>
</div>
</s_list_rep>
</s_list>
<img src="./images/xxx.png">
이건 이미지 없는 글일 때 나오는 썸네일 주소
/////////////////////
/* list */
.list { border-bottom: 4px solid #000; }
.list li { display: flex; align-items: center;}
.listWrap { margin: 0 auto; max-width: 1230px; padding-top: 20px; padding-bottom: 20px; }
.fixed_img_col ul { list-style-type: none; overflow: hidden; }
.fixed_img_col li { list-style-type: none; margin-right: 10px; width: 100%; }
.fixed_img_col li a { display: block; cursor: cell; }
.fixed_img_col li a .thumb img { -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; float: left; width: 120px; height: 120px; border: 4px solid #000; padding: 4px; margin-right: 50px; }
.fixed_img_col li a .thumb img:hover { -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; opacity: 0.5; border: 4px solid #000; padding: 4px; }
.list-title { display: inline-block; float: left; margin-top: 22px; margin-bottom: 22px; width: 65%; }
.list-title span { font-family: 'Montserrat', 'Noto Sans KR', sans-serif; font-size: 26px; color: #000; font-weight: 700; line-height: 1.5; }
.list-date { display: inline-block; width: 200px; float: right; margin-top: 22px; margin-bottom: 22px; padding-left: 50px; max-width: 200px; border-left: 2px dotted #000; }
.list-date span { font-family: 'Montserrat', 'Noto Sans KR', sans-serif; font-size: 26px; color: #000; font-weight: 700; line-height: 1.5; }
/////////
이건 js 파일 안에 있는 내용이야
$(document).ready(function(){
$(".fixed_img_col li").each(function(){
var url = $(this).find('a').attr('href');
var thumbImg = $(this).find('.thumb img');
var size = 'C120x120';
$.ajax({
url: url,
dataType: 'html',
success: function(html){
var q = '<meta property="og:image" content="(.*?)"'
var img = '';
if (html.match(q) != null) {
img = html.match(q)[0];
img = img.substring(35, img.length-1);
if(img.substr(7,1) == 'c') {
img = img.replace('original', size);
img = img.replace('C74x107', size);
img = img.replace('S74x74', size);
img = img.replace('image', size);
thumbImg.attr('src', img);
}
}
}
});
});
});
/////////
저기에 og:image 가 쓰여서 og:image 티스토리 썸네일 등으로도 검색해봤는데, 해결은 못했어..
+
그리구 이건 테스트 블로그 주소야 내가 놓친 부분 있을 거 같아서 적어둘게ㅠㅠ
/ 테스트 블로그 주소는 펑했어!
s list 안에있는 코드 전부 복사해서 메모장같은곳에 붙여넣기하고 코드에서 다 지워
그리고 s article있을텐데 그 안쪽에 있는 내용물 전부 퍼머링크? 그걸로 감싸준다음 퍼머링크 윗부분에 인덱스아티클 넣고 그 사이에 복사했던 코드 붙여넣으면 됨....