Loading the content...

이윰빌더

  • Home
  • 스터디
  • 이윰빌더

서브 페이지마다 이미지 변경하기

3,771 2016.04.18 17:59

짧은주소

본문

샘플사이트 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차 카테고리들로 이동시 이미지가 각각 출력됩니다.

 

 

5
좋아요!
- 이윰EGG 메일보내기 아이디로 검색 - 회원등급 : 새싹/Level 13 - 포인트 : 108,979
레벨 13
경험치 16,105

Progress Bar 20%

- 가입일 : 2015-09-18 16:01:20
- 서명 : 이윰EGG입니다. 잘 부탁드립니다.
- 자기소개 :
댓글목록

레오나르도님의 댓글

와우~ 감사합니다.

축하합니다. 첫댓글 포인트 81포인트를 획득하였습니다.

축하합니다. 행운의 포인트 57포인트를 획득하였습니다.

서종득님의 댓글

우어~ 감사합니다~~~^^

하늘씨앗님의 댓글

좋은 정보 감사합니다.

노랑물감님의 댓글

잘 되네요. 감사합니다~

artrior님의 댓글

http://alvarotrigo.com/fullPage/imgs/fullPage.png

studyhaza님의 댓글

감사합니다~~

Total 42건 1 페이지
제목
red123 아이디로 검색 2017.03.09 1,666 0
red123 아이디로 검색 2017.03.07 2,134 0
red123 아이디로 검색 2017.03.07 1,544 1
이윰EGG 아이디로 검색 2016.11.28 1,439 0
red123 아이디로 검색 2016.11.03 1,962 0
red123 아이디로 검색 2016.11.02 1,520 0
red123 아이디로 검색 2016.11.01 2,002 0
red123 아이디로 검색 2016.11.01 1,531 1
이윰EGG 아이디로 검색 2016.09.28 1,430 0
red123 아이디로 검색 2016.09.23 1,270 0
red123 아이디로 검색 2016.09.23 1,357 0
red123 아이디로 검색 2016.09.23 3,265 0
red123 아이디로 검색 2016.09.07 8,986 0
이윰EGG 아이디로 검색 2016.06.13 1,949 0
이윰EGG 아이디로 검색 2016.05.13 3,739 2