샘플사이트 Company E1 테마(http://theme.eyoom.net/?theme=company_e1)의 경우와 같이 각 메뉴별로 상단 이미지가 변경되는 것을 확인하실 수 있습니다.

이것을 사용하는 방법에 대해 Basic2 테마를 예로 들어 설명드리며 유료테마에서도 당연히 사용 가능합니다.

1. Page Title  영역을 아래와 같이 style="background-image:url('../image/board_title/gr_{subinfo.cate1}.jpg');" 를 넣어 줍니다.

(출력부분 및 파일경로, 파일명은 본인에게 맞게 수정하셔도 됩니다.)

<!--{* Page Title *}-->
<div class="board-title"  style="background-image:url('../image/board_title/gr_{subinfo.cate1}.jpg');">
    <div class="container">
        <h3 class="pull-left"><i class="fa fa-map-marker"></i> {subinfo.title}</h3>
        <ul class="pull-right breadcrumb">
            {subinfo.path}
        </ul>
    </div>
</div>
<!--{* End Board Title *}-->

2. 해당 경로에 맞게 이미지를 업로드 합니다.

이때 이미지 명은 위와 같이 한다면 gr_001.jpg, gr_002.jpg 순서로 업로드 합니다.

001은 첫번째 메뉴, 002는 두번째 메뉴순으로 진행 됩니다.

이는 이윰 커뮤니티 메뉴에서 메뉴코드를 보시면 이해가 되실 것 입니다.

3. css로 스타일에 맞게 수정합니다.

예)

background-repeat:no-repeat;

background-size:cover;

background-position:center center;

color:#fff;

위와 같이 해 주시면 각 메뉴 클릭시 서브페이지 마다 이미지가 변경될 것입니다.

추가설정

위의 경우는 1차 카테고리만 출력되며 2차 카테고리까지 다르게 출력을 원하는 경우는

gr_{subinfo.cate1}_{subinfo.cate2}.jpg 로 변경해 주며

이미지 파일명은 gr_001_001.jpg, gr_001_002.jpg, gr_001_003.jpg 순으로 하면 1차 카테고리 아래 2차 카테고리들로 이동시 이미지가 각각 출력됩니다.