Partager via

[Umbraco 강좌] 9. 미디어 파일 관리

  • Article

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

소개

이번 강좌에서는 Umbraco에서 사용되는 미디어 파일(이미지, 파일, 동영상)을 CMS에 미리 올려두고, 필요한 페이지에서 손쉽게 가져다 쓸 수 있도록 하는 방법을 소개해 드리고자 합니다.

매번 콘텐트 페이지를 작성시 필요한 이미지 및 파일을 그때 그때 업로드 한 후 사용할 수도 있으며, 필요에 따라서는 미리 특정 페이지 작성시 필요한 미디어 파일들을 올려둔 후 사용할 수도 있습니다.

자아~ 그러면, 미디어 파일을 올려두고 페이지에 출력하는 기능을 단계별로 살펴보도록 하죠.

절차

Step 1: 미디어 파일 업로드하기

1. Umbraco의 [백오피스]로 접속 후 아래 그림의 왼쪽 아래의 [세부항목] 메뉴 중 [Media] 섹션을 선택합니다. 그런 후 왼쪽 카테고리의 [미디어]에 마우스 오른쪽 버튼을 클릭하여 [생성] 메뉴 항목을 클릭하여 미디어 파일을 업로드할 수 있습니다.

062111_2049_91.png

2. 미디어 생성 메뉴를 클릭하면 미디어 파일에 대한 CMS 내에서 사용할 이름을 정할 수 있는 화면이 나타납니다. [이름]과 [선택 미디어 타입]을 선택 후 [생성] 버튼을 클릭합니다. [선택 미디어 타입]은 파일, 폴더, 이미지로 구분이 됩니다. 아래 그림과 같이 [Photos]란 이름으로 폴더를 하나 생성합니다.

062111_2049_92.png

3. 다음으로 [Photos] 폴더에 이미지를 업로드 하기 위하여 마우스 오른쪽 버튼을 클릭하여 [생성] 메뉴를 클릭합니다.

062111_2049_93.png

4. 간단히 이름에 "a"를 입력 후 [선택 미디어 타입]을 [Image]로 선택 후 [생성] 버튼을 클릭합니다.

062111_2049_94.png

5. "a"란 이미지 속성에서 [Upload Image]에서 원하는 이미지 파일을 선택 후 [Save] 아이콘을 클릭하면 이미지가 업로드 됩니다.

062111_2049_95.png

6. 아래 그림은 업로드 된 이미지의 [속성] 탭에서 이미지 이름을 "a"에서 "RedPlus"로 변경하는 모습을 보여줍니다.

062111_2049_96.png

7. 이번에는 동일한 방법으로 [Languages] 폴더를 생성 후 "LanguagePack" 이름으로 [File]을 업로드 하는 모습입니다.

062111_2049_97.png

8. 앞서 적용해 보았던, 한글 언어팩 파일인 "ko.xml" 파일을 업로드 하였습니다.

062111_2049_98.png

Step 2: 미디어 파일 적용하기

1. 업로드 된 미디어 파일을 적용하기 위한 페이지를 하나 생성합니다. [언어팩]이라는 이름의 기본 페이지를 하나 생성합니다.

062111_2049_99.png

2. [언어팩] 페이지의 [Content] 탭에서 원하는 내용을 입력 후 앞서 업로드 한 이미지 파일을 적용하려면, 아래 그림의 이미지 선택 아이콘을 클릭 후 나타나는 [그림 삽입] 화면의 [선택] 탭에서 [RedPlus]와 같이 이름 지은 파일을 선택 후 [삽입] 버튼을 클릭하면 해당 페이지에 이미지가 적용됩니다.

062111_2049_910.png

3. 동일한 방법으로 에디터의 "언어팩 다운로드"란 텍스트에 링크를 걸고 언어팩을 다운로드하는 기능을 적용하려면, 아래 그림처럼, "언어팩 다운로드"를 블록으로 씌운 후 [하이퍼링크] 아이콘을 클릭 후 앞서 업로드 한 LanguagePack 미디어 파일을 선택 후 [삽입] 버튼을 클릭하면 적용됩니다. 전체적인 순서는 아래 그림을 참고하시기 바랍니다.

062111_2049_911.png

4. 위와 같이 설정 후 웹 사이트 메인 페이지로 접속 후 [언어팩] 메뉴를 클릭하면, 아래와 같이 이미지 파일과 하이퍼링크가 적용됨을 알 수 있습니다.

062111_2049_912.png

마무리

이처럼, Umbraco는 이미지 파일과 일반 파일에 대한 관리를 편리하도록 업로드 및 페이지 삽입 기능을 쉽게 운영할 수 있는 기능을 제공합니다. 미디어 파일이 많아지면, 폴더 단위로 관리하고, 이미지 및 파일을 언제든지 어느 페이지에서든 쉽게 가져다 쓸 수 있습니다.

만약, 최고 관리자가 아닌 일반 사용자의 권한이 [Content Editor] 등의 권한을 갖는다면, 웹 페이지의 모든 페이지에 대한 편집 기능을 갖는데, 이 때 추가적으로 미디어 파일에 대한 권한까지도 부여를 해준다면, 동적으로 미디어 파일을 업로드 하고, 페이지를 꾸미는 일까지도 할 수 있습니다.

다음 강좌에서는 이처럼, "admin"과 같은 최고관리자가 아닌 일반 사용자 계정으로 페이지를 만들고 꾸미는 내용에 대해서 살펴보도록 하겠습니다.

끝.

관련글