티스토리 블로그 갤러리형 목록/썸네일 목록/사이드바 썸네일

티스토리 블로그는 티에디션 이외에는 공식적으로 썸네일 이미지를 지원하지 않기에 첫 페이지를 제외하고 검색이나 카테고리 목록 등에는 글 제목만으로 표현할 수 밖에 없습니다.
하지만 요즘은 티스토리용 반응형 스킨도 잘 만들어져 티에디션을 사용하지 않고도 블록으로 된 이미지 목록도 표현하고 사이드 바에도 썸네일과 함께 글 목록이 나오고 하여 방법을 찾다가  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로 수정하여 적용하여 사용하시는 걸 추천 드립니다.

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 {   } 이런 식으로 선택자를 지정하면 됩니다.

코드들은 스킨 환경에 따라 적용 되지 않을 수도 있습니다.

티스토리 블로그 공감 버튼 이동하기