티스토리 블로그는 티에디션 이외에는 공식적으로 썸네일 이미지를 지원하지 않기에 첫 페이지를 제외하고 검색이나 카테고리 목록 등에는 글 제목만으로 표현할 수 밖에 없습니다.
하지만 요즘은 티스토리용 반응형 스킨도 잘 만들어져 티에디션을 사용하지 않고도 블록으로 된 이미지 목록도 표현하고 사이드 바에도 썸네일과 함께 글 목록이 나오고 하여 방법을 찾다가 yongzz 사이트를 발견하고 공개된 jQuery 소스 사용하여 블로그 디자인에 맞게 이리저리 수정 적용한 결과 매우 만족하게 사용 중입니다.
티스토리 블로그 썸네일 글 목록
현재 블로그에 검색 또는 카테고리 선택시 보여지는 목록입니다. 글 작성시 지정한 대표 이미지가 보여지고 이미지가 없을 때 카테고리의 블로그 이미지가 노출되는 등 약간의 문제가 있으나 뭐 매우 만족하고 사용 중입니다. 유튜브 동영상의 경우 대표 이미지도 노출하기 때문에 별도로 이미지를 추가하지 않아도 됩니다.
소스 코드의 원본인 듯한 사이트 : http://masonry.desandro.com
Yongzz 사이트 소스 글 : http://www.yongzz.com/view.php?bbs=know&no=4
세로 크기를 측정하여 자동 배치되는 소스 글 : http://www.yongzz.com/view.php?bbs=know&no=6
사이드바에 적용 가능하고 반응형 스킨은 티에디션 쪼그라드는 현상과 자동 폭 조절을 위해 편집으로 적용하여 사용 중입니다.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var col = 3;
var width = 320;
</script>
<script src="http://cfs.tistory.com/custom/blog/149/1491216/skin/images/ygal.js"></script>jquery.min.js는 이미 적용 되어 있다면 생략하셔도 됩니다. var col은 한 열에 출력 될 수이며, 아래의 var width는 썸네일의 크기입니다. 저는 그냥 무시하고 CSS로 크기 조절 하여 사용합니다. ygal.js를 파일 업로드 하고 주소를 ./images/ygal.js로 수정하여 적용하여 사용하시는 걸 추천 드립니다.
/* fixed_img_col */
.fixed_img_col .hx {
margin: 0;
background: #035e4c;
padding: 6px 10px;
font-size: 15px;
line-height: normal;
color: #fff;
margin-top: 5px;
font-family: Verdana, Malgun Gothic, nanumgothic, sans-serif;
}
.fixed_img_col .hx em {
color: #fff;
font-size: 11px;
font-style: normal
}
.fixed_img_col ul {
overflow: hidden;
position: relative;
margin: 0;
padding: 0;
border: 1px solid #ddd;
border-left: 0;
border-right: 0;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
list-style: none;
*zoom: 1
}
.fixed_img_col ul:after {
display: block;
clear: both;
content: ""
}
.fixed_img_col li {
overflow: hidden;
float: left;
position: relative;
top: 1px;
width: 320px;
padding-left: 15px;
height: 260px;
border-bottom: 1px solid #eee
}
.fixed_img_col li.odd {
padding-left: 0
}
.fixed_img_col .thumb {
display: block;
overflow: hidden;
position: relative;
width: 318px;
height: 180px;
background: #eee;
color: #666;
line-height: 180px;
text-align: center;
white-space: nowrap;
border: 1px solid #e7e5e6
}
.fixed_img_col .thumb img {
display: block;
width: 318px;
height: 180px;
border: 0
}
.fixed_img_col a {
display: block;
width: 320px;
margin: 0 auto;
padding: 20px 0 0 0;
text-decoration: none;
cursor: pointer
}
.fixed_img_col a strong {
display: inline-block;
margin: 8px 0 0 0;
color: #333
}
.fixed_img_col p {
width: 320px;
margin: 0 auto;
font-size: 11px;
color: #767676
}
.fixed_img_col a:hover strong,
.fixed_img_col a:active strong,
.fixed_img_col a:focus strong {
text-decoration: underline
}
.fixed_img_col a:hover .thumb,
.fixed_img_col a:active .thumb,
.fixed_img_col a:focus .thumb {
border: 1px solid #999
}
.fixed_img_col .thumb .dno {
display: none
}
.fixed_img_col .w180 li {
width: 180px;
padding-left: 10px;
height: 165px
}
.fixed_img_col .w180 .thumb {
width: 172px;
height: 90px
}
.fixed_img_col .w180 .thumb img {
width: 172px;
height: 90px
}
.fixed_img_col .w180 a {
width: 180px
}스타일 시트는 꽤 복잡해 보이는데 적당히 능력 것 수정하여 사용하시던지 그냥 사용합니다.
<div class="fixed_img_col">
<h1 class="hx">[##_list_conform_##] <em>+[##_list_count_##]</em></h1>
<ul>
<s_list_rep>
<li> <a href="[##_list_rep_link_##]"> <span class="thumb"> <img src="img/@thumbSquare.jpg" alt=""
class="dno"> <span id="str">Loading..</span> </span> <strong>[##_list_rep_title_##]
<span class="cmt"> [##_list_rep_rp_cnt_##]</span> </strong> </a>
<p>[##_list_rep_regdate_##]</p>
</li>
</s_list_rep>
</ul>
</div><s_list>….</s_list> 안의 내용을 전부 들어내거나 원래 코드를 <!– 주석 –>으로 감싼 뒤에 위 코드를 넣어 주면 적용 완료 입니다. 복사하여 사용
응용 : 목록
다음은 제가 적용한 소스 코드입니다. 갤러리 형태의 목록을 현재 블로그 폭, 디자인에 맞춰 수정에 수정을 거듭하여 본래 작성자가 제공한 코드는 많이 사라졌습니다.
<s_list>
<div class="searchList">
<h3>Search results for <span class="from">[##_list_conform_##]</span><span class="lcnt">
[+[##_list_count_##]]</span></h3>
<ol>
<s_list_rep>
<div class="fixed_img_col">
<li> <a href="[##_list_rep_link_##]"> <span class="thumb"><img class="dno"></span></a>
<div class="text"> <a class="title"
href="[##_list_rep_link_##]">[##_list_rep_title_##]</a> <span
class="date">[##_list_rep_regdate_##]</span> <span
class="cnt">[##_list_rep_rp_cnt_##]</span> </div>
</li>
</div>
</s_list_rep>
</ol>
</div>
</s_list> jQuery 적용은 동일하며 6, 9번 줄만 적용하면 html 코드는 완료 입니다. <div class=”fixed_img_col”> 안에 [##_list_rep_link_##] 치환자가 포함된 a 태그안에 <span class=”thumb”><img class=”dno”> 적용하면 썸네일 이미지가 표현 됩니다.
<div class="fixed_img_col">
<a href="[##_list_rep_link_##]"><span class="thumb"><img class="dno"></span></a>
</div><s_list><s_list_rep>….</s_list_rep></s_list> 안에 위 코드만 있어도 목록 이미지가 표현 됩니다.
.searchList li {
float: left;
margin: 0 1% 20px;
width: 31%;
background: #2f343f;
border-radius: 5px;
box-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}
.searchList .thumb img {
width: 100%;
height: auto;
border-radius: 5px 5px 0 0;
overflow: hidden;
background: #fff;
}반응형 적용을 위해 li 태그에 폭을 지정하고 이미지는 100% 적용하였습니다.
사이드바
<s_sidebar_element>
<div class="sidebar_element recentPost">
<h3>Recent Post</h3>
<div class="fixed_img_col">
<ul>
<s_rctps_rep>
<li> <a href="[##_rctps_rep_link_##]"> <span class="thumb"><img></span> <span
class="title">[##_rctps_rep_title_##]. <span
class="cnt">[##_rctps_rep_rp_cnt_##]</span></span></a> </li>
</s_rctps_rep>
</ul>
</div>
</div>
</s_sidebar_element>.recentPost ul {
padding: 0;
border-top: 1px solid #d4d4d4;
border-bottom: 1px solid #fff;
}
.recentPost li {
border-top: 1px solid #fff;
border-bottom: 1px solid #d4d4d4;
}
.recentPost li a {
padding: 3px;
overflow: hidden;
}
.recentPost li .thumb img {
float: left;
margin: 0 10px 0 0;
width: 85px;
background: #1b2426;
vertical-align: top;
}
.recentPost li .title {
display: block;
padding: 5px;
}사이드바에도 동일한 방법을 코드를 적용하면 됩니다.
티에디션
티에디션 관리 모드에서 적당한 아이템을 글을 선택합니다.
디자인 탭에서 HTML 수정 모드에서 모조리 지우고 아래 코드를 적용하면 티에디션에도 유튜브 이미지가 적용 됩니다.
<div class="fixed_img_col" style="margin:0; ;padding:0">
<s_tabloid>
<s_article_rep>
<li style="overflow:hidden;">
<div class="thumb" style="float:left; padding:0 10px 0 0;"> <a href="[##_article_rep_link_##]"
title="[##_article_rep_title_##]"> <img
style="width:250px; Height:145px; border:1px solid #c3c9e0;"
src="http://[##_article_rep_thumb_host_##]/[##_thumb_type_##]/[##_article_rep_thumb_hash_##]"
alt="[##_article_rep_title_##]" /></a> </div>
<p> <a href="[##_article_rep_link_##]"
style="color:#3f3f3f; font-size:1em; font-weight:bold;">[##_article_rep_title_excerpt_##]</a>
</p>
<p style="padding:5px;"> <a href="[##_article_rep_link_##]"
style="color:#3f3f3f;">[##_article_rep_desc_excerpt_##]</a> </p> <span
style="font-size:0.85em;"><a href="[##_article_rep_category_link_##]"
style="color:#666;">[##_article_rep_category_##]</a></span> <span
style="font-size:0.85em; margin-left:7px; color:#666;">[##_article_rep_date_##]</span> <span
style="font-size:0.85em; margin-left:7px; color:#666;">[##_article_rep_comment_cnt_##]
comment</span>
</li>
</s_article_rep>
</s_tabloid>
</div>본래 코드는 모두 지우고 위 코드만 적용합니다.
HTML 코드 변경 후 적용된 티에디션 디자인 입니다.
#ttCanvas {
width: 100% !important;
}
.tt-span-1,
.tt-span-2,
.tt-span-3,
.tt-span-4,
.tt-span-5,
.tt-span-7,
.tt-span-8,
.tt-span-9,
.tt-span-10,
.tt-span-11,
.tt-span-12 {
width: 100% !important;
}위 코드를 스타일 시트에 추가하면 반응형 웹에서 티에디션 쪼그라듬 현상과 자동 폭 조절이 가능 해집니다 만은 스킨에 따라 효과가 없을 수도 있습니다. 이미지 크기는 미디어 쿼리에 #ttCanvas .thumb img { } 이런 식으로 선택자를 지정하면 됩니다.
코드들은 스킨 환경에 따라 적용 되지 않을 수도 있습니다.