CCZ-CROSS 하단 카테고리 글 더보기에 썸네일(사진) 나오게 하는 방법

안녕하세요. 드리머즈입니다.

이번 포스팅에서는 CCZ-CROSS 스킨에서 하단 카테고리의 다른 글 영역?에 사진이 나오도록 하는 방법에 대해 보겠습니다.

현재 저는 CCZ-CROSS 스킨을 사용중입니다. 포스팅의 하단부에는 위 사진처럼 글로만 카테고리의 다른글이 보입니다. 그런데 저는 여기서도 사진(썸네일, Thumbnail)이 보였으면 더 좋을 것 같아 그 방법을 찾아봤습니다.

먼저 위 사진에서 보이는 카테고리의 다른 글 영역을 제거해야 합니다.

관리자>플러그인에서 카테고리 글 더 보기를 클릭합니다.

해제 버튼을 누르면 바로 해제됩니다.

관리자 > 꾸미기 > 스킨편집 > HTML 편집을 클릭해 skin.html에

코드를 추가할 준비를 합니다.

글 하단의 태그 영역 위에

썸네일이 보이는 카테고리의 다른 글 영역을 추가하고자 합니다.

그래서 아래의 코드를 <s_tag_label>위에 추가해야 합니다.

<!--[S]-->
<s_article_related>
    <div class="area_related">
            <strong class="tit_related">'블로그/스킨' 카테고리의 다른 글</strong>
 
            <s_article_related_rep>    
            <div class="list-row pos-right ratio-fixed ratio-4by3 crop-center lts-narrow clearfix ">
 
                <a href="" class="has-object t-photo link_related" >
 
                    <s_article_related_rep_thumbnail>
                        <!--<a class="has-object t-photo link_related ddd" href="">-->
                            <div class="thumbnail">
                                <div class="cropzone">
                                    <img src="//i1.daumcdn.net/thumb/C240x180/?fname=" alt="">
                                </div>
                            </div>
                        <!--</a>-->
                    </s_article_related_rep_thumbnail>
                </a>
                <div class="list-body">
                    <div class="flexbox">
                        <a class="list-link" href="">
                            <h3 class="list-head ie-nanum ci-link"></h3>
                            <!--<p class="list-summary">안녕하세요. 드리머즈입니다. 이번 포스팅에서는 CCZ-CROSS 스킨에서 하단 카테고리의 다른 글 영역?에 사진이 나오도록 하는 방법에 대해 보겠습니다. 현재 저는 CCZ-CROSS 스킨을 사용중입니다. 포스팅의 하단부에는 위 사진처럼 글로만 카테고리의 다른글이 보입니다. 그런데 저는 여기서도 사진(썸네일, Thumbnail)이 보였으면 더 좋을 것 같아 그 방법을 찾아봤습니다. 먼저 위 사진에서 보이는 카테고리의 다른 글 영역을 제거해야 합니다.관리자>플러그인에서 카테고리 글 더 보기를 클릭합니다. 해제 버튼을 누르면 바로 해제됩니다. 관리자 > 꾸미기 > 스킨편집 > HTML 편집을 클릭해 skin.html에코드를 추가할 준비를 합니다.글 하단의 태그 영역 위에썸네일이 보이는 카테고리의 다른 글 영역..</p>-->
                        </a>
                        <div class="list-meta ie-dotum">
                            <a href="/category/%EB%B8%94%EB%A1%9C%EA%B7%B8/%EC%8A%A4%ED%82%A8" class="p-category ci-color">블로그/스킨</a>
                            <span class="txt-bar"></span>
                            <abbr class="timeago ff-h dt-published" title="">
                            
                            </abbr>
                        </div>
                    </div>
                </div>
            </div>
            </s_article_related_rep>
            <!--[E]-->
            <div class="related_more">
                <a href="/category/%EB%B8%94%EB%A1%9C%EA%B7%B8/%EC%8A%A4%ED%82%A8" class="link_more">관련 글 더보기</a>
            </div>
    </div>
</s_article_related>
<!--[E]-->
 

코드가 조금 길긴 하지만 하나하나 살펴보면 어렵지 않습니다.

핵심 부분은 의 모양을 가진

티스토리 치환자라고 불리는 녀석들인데

포스팅 하단부의 참고 영역에

티스토리 공식 가이드가 있으니 참고하시면 도움이 될 겁니다.

위 코드를 만들면서.. 삽질을 했던 부분은

카테고리의 다른 글 링크에 해당하는 를 사용하는 부분이었습니다.

<s_article_related_rep_thumbnail>내부에서 를 사용하니..

가 무시?되더라구요.

<s_article_related_rep_thumbnail>의 외부에서 를 사용하니.. 정상적으로 동작했습니다 ㅜ.ㅜ

수정 후의 화면입니다.

카테고리의 다른 글 4개가 보이며.. 사진도 보입니다.

참 쉽죠?

포스팅은 여기까지 입니다~!!

하단 카테고리 영역에 썸네일 없음녀 레이아웃 깨지는 버그 수정 포스트

CCZ-CROSS 본문 하단 카테고리 다른글 썸네일 없는 경우 레이아웃 깨짐

참고

티스토리 스킨 치환자 공식가이드 : https://www.tistory.com/guide/skin/step3#2-9-8