• 북마크
  • 1:1문의
  • 새글
  • 회원가입
  • 로그인

이윰빌더

  • Home
  • 스터디
  • 이윰빌더

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

3,767 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
좋아요!
1
- 이윰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 페이지
번호 제목 글쓴이 날짜 추천
42 red123 아이디로 검색 2017.03.09 1,665 0
41 red123 아이디로 검색 2017.03.07 2,132 0
40 red123 아이디로 검색 2017.03.07 1,544 1
39 이윰EGG 아이디로 검색 2016.11.28 1,439 0
38 red123 아이디로 검색 2016.11.03 1,960 0
37 red123 아이디로 검색 2016.11.02 1,519 0
36 red123 아이디로 검색 2016.11.01 2,000 0
35 red123 아이디로 검색 2016.11.01 1,531 1
34 이윰EGG 아이디로 검색 2016.09.28 1,428 0
33 red123 아이디로 검색 2016.09.23 1,269 0
32 red123 아이디로 검색 2016.09.23 1,355 0
31 red123 아이디로 검색 2016.09.23 3,262 0
30 red123 아이디로 검색 2016.09.07 8,983 0
29 이윰EGG 아이디로 검색 2016.06.13 1,948 0
28 이윰EGG 아이디로 검색 2016.05.13 3,738 2
열람 이윰EGG 아이디로 검색 2016.04.18 3,768 5
26 red123 아이디로 검색 2016.04.08 2,870 0
25 칠천피트 아이디로 검색 2016.03.13 2,404 1
24 이윰EGG 아이디로 검색 2016.02.15 2,672 1
23 이윰EGG 아이디로 검색 2016.01.21 2,108 0
LOGIN
사이드 메뉴

최신글이 없습니다.

최신글이 없습니다.

출석 랭킹

오늘의 랭킹

회원사진

닉네임

개근왕

최다1위

shadow shadow
Ranking

    출력할 랭킹이 없습니다.

  • 01 shadow
    674,374
  • 02 신비
    335,419
  • 03 가을하늘
    204,735
  • 04 mame
    202,630
  • 05 이윰MOUNT
    199,181
  • 06 미스코리아
    163,939
  • 07 레오나르도
    147,576
  • 08 테크니션
    142,655
  • 09 이윰IN
    135,258
  • 10 비온뒤맑음
    127,882
  • 01 shadow
    28,938
  • 02 joosam
    23,606
  • 03 티보리
    21,954
  • 04 홍인
    18,644
  • 05 레오나르도
    18,088
  • 06 이윰IN
    17,983
  • 07 도깨비
    16,614
  • 08 이윰EGG
    16,105
  • 09 자이언트
    14,698
  • 10 미스트
    14,379