콘텐츠로 건너뛰기

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

티스토리 블로그는 티에디션 이외에는 공식적으로 썸네일 이미지를 지원하지 않기에 첫 페이지를 제외하고 검색이나 카테고리 목록 등에는 글 제목만으로 표현할 수 밖에 없습니다.
하지만 요즘은 티스토리용 반응형 스킨도 잘 만들어져 티에디션을 사용하지 않고도 블록으로 된 이미지 목록도 표현하고 사이드 바에도 썸네일과 함께 글 목록이 나오고 하여 방법을 찾다가  yongzz 사이트를 발견하고 공개된 jQuery 소스 사용하여 블로그 디자인에 맞게 이리저리 수정 적용한 결과 매우 만족하게 사용 중입니다.

티스토리 블로그 썸네일 글 목록

INKman's Blog thumb 001

현재 블로그에 검색 또는 카테고리 선택시 보여지는 목록입니다. 글 작성시 지정한 대표 이미지가 보여지고 이미지가 없을 때 카테고리의 블로그 이미지가 노출되는 등 약간의 문제가 있으나 뭐 매우 만족하고 사용 중입니다. 유튜브 동영상의 경우 대표 이미지도 노출하기 때문에 별도로 이미지를 추가하지 않아도 됩니다.

소스 코드의 원본인 듯한 사이트 : 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

INKman's Blog img 4

사이드바에 적용 가능하고 반응형 스킨은 티에디션 쪼그라드는 현상과 자동 폭 조절을 위해 편집으로 적용하여 사용 중입니다.

<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;
}

사이드바에도 동일한 방법을 코드를 적용하면 됩니다.

티에디션

INKman's Blog thumb 003

티에디션 관리 모드에서 적당한 아이템을 글을 선택합니다.

INKman's Blog thumb 004

디자인 탭에서 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>

본래 코드는 모두 지우고 위 코드만 적용합니다.

INKman's Blog thumb 005

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

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

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

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다