Home

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

티스토리 블로그는 티에디션 이외에는 공식적으로 썸네일 이미지를 지원하지 않기에 첫 페이지를 제외하고 검색이나 카테고리 목록 등에는 글 제목만으로 표현할 수 밖에 없습니다. 하지만 요즘은 티스토리용 반응형 스킨도 잘 만들어져 티에디션을 사용하지 않고도 블록으로 된 이미지 목록도 표현하고 사이드 바에도 썸네일과 함께 글 목록이 나오고 하여 방법을 찾다가  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;/*@title-font-family=font-family:*/ 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 {   } 이런 식으로 선택자를 지정하면 됩니다.


본래 Yongzz 작성글에 소개된 코드가 아닌 코드들은 스킨 환경에 따라 적용 되지 않을 수도 있습니다.

more

댓글을 달아 주세요

  1. app
    2014.11.09 09:38
    좋은 정보 감사합니다.^^ 저도 이 블로그처럼 만들고 싶은데.. 어렵네요.ㅠ.ㅜ

    갤러리형 목록과 관련하여 알려주신 '응용 : 목록'의 소스코드를 그대로 따라서 해보았는데요.


    1.이 블로그에는 각 포스팅의 이미지가 동일한 사이즈로 한줄에 3개씩 정렬이 되어있는데,

    저는 적용해보니 크기가 다 달라 규칙성이 없이 뒤죽박죽으로 나열됩니다.

    아마 제 생각에는 글 제목의 길이 차이 때문인 것 같은데, 모두 같은 크기로 만들려면 어떻게 해야 하나요?


    2.글 제목의 폰트와 색깔은 어떻게 설정해야하는지요?


    조언부탁드립니다.
    • 2014.11.09 11:55 신고
      가로폭 지정이 빠졌나보네요
      가로폭이 31% 안되면 .searchList .thumb { width:폭; } 추가 해보세요

      제목 태그는 title 입니다.
      예) .searchList .title { color:#f1f1f1; font-family:Nanum Gothic; font-size: 11px; }
    • app
      2014.11.10 14:25
      답변 감사합니다.^^

      가로폭을 31%로 지정을 하면 카테고리 목록의 가장 상단에 노출되는 포스팅의 경우에는 정확히 한줄에 3개가 들어가긴 하는데, 그 아래부터는 각 포스팅의 '세로 길이' 차이로 뒤죽박죽이 되어버리네요.

      조금 더 자세히 말씀 드리자면 INKman님의 블로그는 이미지 아래 제목 한줄과 날짜 한줄이 표기가 되면서 모든 포스팅이 균등한 크기로 정렬이 되는 반면에, 제 블로그는 제목이 한줄로 축약되지 않고 긴 제목의 경우에는 2줄 이상으로 표기가 되면서, 전체적인 세로 길이가 각 포스팅별로 다르게 나타나 불규칙적인 정렬이 이루어지고 있습니다.

      제 생각에는 이미지 아래 글자가 들어가는 음영부분의 크기를 동일하게 설정하거나, 또는 노출되는 제목의 글자수를 일정하게 제한하는 설정이 필요한 것 같은데.. 다시 한번 조언부탁드립니다.ㅠ.ㅜ
    • 2014.11.10 15:45 신고
      제목이 길어 두줄로 나오는것과 한줄로 나오것 때문에 세로 길이 차이로 깔끔하게 표현되지 않는 것이 맞다 라면...

      제 블로그 기준으로 display: block; 과 height: 20px; 만 있으면 제목에 세로길이는 제한됩니다.


      .searchList .title {
      display: block;
      color: #fff;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      }

      현재 저의 블로그는 위 속성을 적용하여 사용중이고요


      white-space: nowrap; <-- 줄바꿈 금지
      text-overflow: ellipsis; <-- 말줄임 ....
      overflow: hidden; <-- 범위를 벗어나면 자르기

      위 3개 속성은 한셋트로 ... 제목을 한 줄로 말줄임 표현입니다.
    • app
      2014.11.10 18:21
      감사합니다.^^ 말씀하신대로 설정하였더니 한 줄에 3개씩 동일한 사이즈로 깔끔하게 정렬이 되었네요. 다만 포스팅의 수가 3배수(3,6,9...)가 아닌 경우에는 하단에 페이지를 나타내는 표시가 위로 올라오는 문제가 있습니다.

      예를 들어 검색 결과에 해당하는 글이 2개인 경우, 오른쪽에 공백이 생기는데, 그 공간에 페이지 표시가 보여집니다. 그림으로 나타내면..

      ┌------┐ ┌------┐ ------------------
      │.......│ │.......│ 이전 < 1 > 다음
      └------┘ └------┘

      포스팅의 수와 관계없이 페이지 표시를 항상 아래에 위치시키려면 어떻게 해야할까요?

      ┌------┐ ┌------┐
      │.......│ │.......│
      └------┘ └------┘
      --------------------------------
      이전 < 1 > 다음
    • 2014.11.10 18:49 신고
      float 때문인것 같은데 제 코드 그대로 사용하셨다면 .searchList ol:after { display:block; clear:both; content:""; } 한 번 추가해보시고 안되면

      <s_paging> 페이징 태그가 <div class="paging"> 라면
      .Paging { clear:both; } 이런식으로 clear:both; 또는 display:block; 속성을 추가해보세요.

      그래도 안되시고 블로그 공개가 가능하시다면 uo909@daum.net으로 블로그 주소한번 줘보세요. 보고하면 추정 없이 할 수 있어 빠르고 정확하게 똭! 적용 되시길 바래요~ :)


    • 2014.11.10 20:23
      비밀댓글입니다
  2. 2014.12.06 12:24 신고
    아래에서 2번재 코드를 제 블로그에 붙여넣기 했습니다.

    그런데 이미지 썸네일 크기는 바뀌는데요

    문제가 글제목, 타이틀 등의 글자 크기 폰트 종류를 바꾸는 에디터가 작동을 안하더라고요 ㅠㅠ
    활성화가 안됩니다.

    • 2014.12.07 00:24 신고
      티에디션의 경우 원래 HTML 태그를 변경하였기 때문에 편집기로는 안되고 코드를 찾아서 변경해줘야 합니다.

      <a href="[\##_article_rep_link_##]" style="color:#3f3f3f;[color=red] font-size:1em; font-weight:bold;[/color]">[\##_article_rep_title_excerpt_##]</a> 여기가 제목으로 폰트 관련 코드를 수정하면 됩니다.

      <a href="[\##_article_rep_link_##]" style="color:#3f3f3f;">[\##_article_rep_desc_excerpt_##]</a> 요약글

      <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;"> comment</span> 댓글수
    • 2014.12.07 01:15 신고
      말씀하신대로 수정했습니다

      근데 썸네일 이미지 해상도가 깨지는데 이건 어떻게 수정할 수 있나요?
      본문 글을 클릭하면 원래 이미지가 뜨는데요 썸네일로 뜨는 이미지가 깨지네요 ㅠㅠ
  3. 2014.12.06 15:02
    비밀댓글입니다
  4. 안녕하세요
    2015.03.25 19:00
    안녕하세요 네이버 검색중에 님의 블로그 글을보고... 썸네일 목록을 적용해봤는데요

    윈도우7이나 크롬 환경에서는 썸네일 목록 이미지가 제대로 잘 표현되는데요

    익스플로러 7 환경에서는 썸네일 목록 이미지가 안보이더라구요

    근데 님의 블로그는 익스플로러 7 에서도 첨에는 안보이는거 같았는데 1초후에는 썸네일 목록 이미지가 잘보이네요

    왜 저는 익스플로러 7 에서는 썸네일 이미지가 표현이 안될까요...

    혹시 이글을 보신다면... 익스플로러 7 에서 썸네일 목록 이미지가 보일수있는 방법좀 알려주시면 정말 감사하겠습니다
    • 2015.03.25 23:20 신고
      안녕하세요, 저의 능력 밖이라 도움드리기 힘들 것 같네요

      아래 사이트를 참조해 보세요

      [ur=http://www.yongzz.com/view.php?bbs=know&no=4]http://www.yongzz.com/view.php?bbs=know&no=4[/ur]

      [ur=http://www.yongzz.com/view.php?bbs=know&no=6]http://www.yongzz.com/view.php?bbs=know&no=6[/ur]
  5. 2015.06.22 17:45
    비밀댓글입니다

.

Secret