[Umbraco 강좌] 22. 사진 갤러리(Gallery) 만들기 1

Cikk
07/07/2011

이 내용은 ASP.NET MVP로 활동하고 계신 박용준님이 작성하신, 오픈소스 기반 웹사이트 제작 엔진인 Umbraco로 처음 웹사이트를 구축 및 개발하기 위한 시리즈 강좌입니다. 많은 도움 되시길 바랍니다.
==================================================================================================

소개

이번 강좌에서는 지금까지 다룬 내용에 대한 복습으로 간단한 사진 갤러리를 만드는 과정을 3회차에 걸쳐서 보여드리도록 하겠습니다.

절차

Step 1: 문서 타입 생성하기(Photo와 Gallery 문서타입)

1. [백오피스]-[Settings]-[문서 타입]에 마우스 오른쪽 버튼 클릭하여 [Photo]란 이름으로 문서 타입을 생성합니다. [Photo] 타입과 연관되는 템플릿은 따로 생성하지 않습니다.

2. [Photo] 문서 타입에 [Photo] 탭(색인)을 생성합니다.

3. [Photo] 문서 타입에 하나의 속성인 [Upload Photo] 속성을 아래와 같이 생성합니다.

4. 이번에는 [Gallery] 문서 타입을 생성합니다. [Create matching template] 체크박스를 체크하여 연관되는 템플릿을 생성합니다.

5. [Gallery] 문서 타입에 [Photos] 탭(색인)을 생성합니다.

6. [Gallery] 문서 타입에 [Photos]란 이름의 속성을 아래 그림과 같이 추가합니다. 이 때 속성의 [Type] 항목을 [Folder Browser]로 설정하여 하나 이상의 사진을 보여줄 수 있도록 합니다.

7. [Gallery] 문서 타입의 [Info] 탭에서 보여지는 아이콘, 썸네일, 설명 등을 아래 그림과 같이 설정합니다. 물론, 독자의 판단하게 다른 값을 선택해도 무관합니다.

8. [Gallery] 문서 타입 하위로 [Photo] 문서 타입의 콘텐트 페이지를 생성하도록 아래와 같이 설정합니다.

9. [Homepage] 문서 타입 하위로 [Gallery] 문서 타입의 콘텐트 페이지를 생성하도록 아래와 같이 설정합니다.

Step 2: 갤러리 출력을 위한 콘텐트 페이지 생성하기

1. [백오피스]-[컨텐츠]-[Simple website]에 마우스 오른쪽 버튼을 클릭하여 [Gallery] 페이지를 아래 그림과 같이 생성합니다.

2. [Gallery] 콘텐트 페이지에 마우스 오른쪽 버튼을 클릭하여 [생성] 메뉴를 클릭하여 하위 페이지인 [One] 페이지를 아래 그림과 같이 생성합니다.

3. 생성된 [One] 페이지에 샘플 사진을 하나 업로드 합니다.

4. [Gallery] 페이지 하위로 [Two] 페이지를 아래 그림과 같이 생성합니다.

5. 생성된 [Two] 페이지에 샘플 사진을 하나 업로드 합니다.

6. 2개의 하위 페이지를 갖는 [Gallery] 페이지를 클릭하여 아래 그림과 같이 2개의 사진이 보여짐을 알 수 있습니다.

Step 3: Gallery 템플릿 편집하기

1. [백오피스]-[Settings]-[템플릿]-[Gallery]를 선택한 후 편집기에서 아래 그림과 같이 마스터 템플릿은 임시로 [Homepage]로 선택한 후 아래 편집기의 내용은 Master 지시문을 제외하고 모두 지웁니다.

2. [Gallery] 콘텐트 페이지를 웹 브라우저로 실행한 모습입니다. 아래 메인 영역이 사진 갤러리가 들어올 자리입니다.

마무리

사진 갤러리를 위한 기본 구성 단계를 보여드렸습니다.

문서 타입을 만들고, 문서 타입에서 사용하는 레이아웃인 템플릿 페이지를 구성한 후 최종 웹 브라우저로 출력될 영역인 콘텐트 페이지 등을 만드는 단계를 복습 차원에서 다시 보여드렸습니다.

다음 시간에는 이 곳에 사진을 출력하는 기능으로 테스트 해보도록 하겠습니다.

끝.

관련글

Megosztás a következőn keresztül:

[Umbraco 강좌] 22. 사진 갤러리(Gallery) 만들기 1

További források