티스토리 썸네일 부분 수정 좀 도와줘ㅠ

─────────────────────────────────── 

 

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 티스토리 썸네일 등으로도 검색해봤는데, 해결은 못했어..

+

그리구 이건 테스트 블로그 주소야 내가 놓친 부분 있을 거 같아서 적어둘게ㅠㅠ

/ 테스트 블로그 주소는 펑했어!