서브 페이지마다 이미지 변경하기
관련링크
-
231회 연결
짧은주소
- - 짧은주소: http://v2.eyoom.net/bbs/?t=2S4 주소복사
본문
샘플사이트 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차 카테고리들로 이동시 이미지가 각각 출력됩니다.
좋아요!
Progress Bar 20%
댓글목록
레오나르도님의 댓글
와우~ 감사합니다.
축하합니다. 첫댓글 포인트 81포인트를 획득하였습니다.
축하합니다. 행운의 포인트 57포인트를 획득하였습니다.
서종득님의 댓글
우어~ 감사합니다~~~^^
하늘씨앗님의 댓글
좋은 정보 감사합니다.
노랑물감님의 댓글
잘 되네요. 감사합니다~
artrior님의 댓글
http://alvarotrigo.com/fullPage/imgs/fullPage.png
studyhaza님의 댓글
감사합니다~~