포스터 스킨_이미지 없을 때

티스토리 기본 스킨 포스터(Poster)에서 겉장(cover) 기능을 손보기로 했다. 리스트와 갤러리에서 이미지가 없는 글을 보이는 것이 맘에 들지 않아서 고쳤다. 먼저 리스트꼴은 아예 이미지가 나오지 않도록 바꾸기로 했다. 방법은 아래와 같이 붉은색 부분을 고치면 된다.

<s_cover name='cover-list'>
 <div class="cover-list">
  <div class="inner">
   <h2></h2>
   <ul>
   <s_cover_item>
    <li>
    <a href="">
    <figure>
    <s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C600x600/?fname=" onerror="this.style.display='none'" alt=""></s_cover_item_thumbnai
    </figure>
    <s_cover_item_article_info>
    <span class="category"></span>
    </s_cover_item_article_info>
    <span class="title"></span>
    <span class="excerpt"></span>
    </a>
    </li>
   </s_cover_item>
   </ul>
  </div>
 </div>
</s_cover>
   

다음으로 관련 글 보이기에서 이미지가 없을 때 대체 이미지를 넣기로 했다. 대체 이미지를 스킨에 올려두고 아래와 같이 CSS를 바꾸면 된다. 관련 글이 아닌 아이들도 같은 방식으로 고쳐 놓으면 겉장 보기에서도 대체 이미지로 보이게 할 수 있다.

.post-type-thumbnail .post-item .thum:before {
 background-image:url(./images/no_img.jpg);
 content: "NO IMAGE";
 position: absolute;
 top: 0;
 left: 0;
 z-index: 0;
 width: 100%;
 height: 100%;
 padding:50px;
 margin: -9px 0 0 0;
 text-align: center;
 font-family: 'Arial';
 font-weight: bold;
 font-size: 0.875em;
 color: #cbcbcb;
}

 

대체 이미지 no_img.jpg는 아래와 같은 걸로 준비했다.

아래와 같이 보인다.