다음을 통해 공유

[Orchard 강좌] 7. 미디어(이미지...) 관리

  • 아티클

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

 

소개

요즘의 웹은 크게 3가지 리소스로 표현이 되는 듯 합니다. 첫 번째 HTML, 두 번째 CSS, 세 번째 미디어(Media) 파일들… 그리고 미디어 파일들에는 이미지, 플래시 미디어 등을 표시합니다.

이 때 미디어 파일을 Orchard CMS에 미리 올려두고, 필요한 페이지에서 손쉽게 가져다 쓸 수 있도록 하는 방법을 소개해 드리고자 합니다.

절차

1. [대시보드]-[미디어] 메뉴를 클릭합니다. 메인 영역에 [미디어] 설정 화면이 나타납니다. [폴더추가]와 같은 버튼을 클릭하여, 미디어 파일을 종류 또는 업무별로 구분해서 저장해 놓을 수 있습니다. 특정 폴더를 생성한 후 해당 폴더 링크를 클릭하면 폴더에 대한 관리 화면으로 이동할 수 있습니다.

image_thumb_1.png

2. [미디어]의 [폴더 관리] 화면은 아래와 같습니다. 이곳에는 추가적인 폴더를 생성하거나 이미지와 같은 미디어 파일을 업로드하기 위한  [미디어 추가] 버튼을 클릭할 수 있습니다. 업로드된 미디어 파일에 대해서는 필요없다면 [삭제] 기능을 적용하여 삭제할 수 있습니다.

image_thumb_2.png

3. 동일한 방법으로 “Pictures”란 이름으로 미디어를 관리하는 폴더를 하나 더 생성하였습니다.

image_thumb_5.png

4. “Pictures” 폴더로 이동해서 [미디어 추가] 버튼을 클릭하여, Orchard에서 사용할 이미지를 업로드합니다.

image_thumb_6.png

5. [미디어 추가] 메뉴에서는 하나의 이미지를 업로드하는 기존 방식에 추가적으로, 압축파일(Zip파일)에 여러 개의 이미지를 한꺼번에 저장해 놓은 후 압축된 파일을 업로드할 때 [Zip 압축 풀기] 체크박스를 체크한 후 업로드를 하게 되면 지정된 폴더로 이미지 파일이 압축이 해제되어 업로드가 진행됩니다.

image_thumb_7.png

6. 단순히 하나의 이미지 파일을 업로드한다면, 아래 그림처럼, 원하는 이미지 경로를 [찾아보기] 버튼을 클릭하여 선택한 후 [업로드] 버튼을 클릭하면 됩니다.

image_thumb_10.png

7. 업로드되는 미디어 파일들의 기본 저장 위치는 아래 그림과 같이 Orchard-Media-Default-Pictures 폴더에 저장됩니다.

image_thumb_14.png

8. 메인 페이지에서 미리 업로드한 미디어 파일을 사용하고자한다면, 페이지 편집 메뉴를 클릭하여 편집 화면으로 이동합니다.

image_thumb_15.png

9. Orchard에서 기본으로 제공하는 위지윅 에디터는 아래 그림의 아이콘을 클릭하여 이미지 파일을 에디터에 삽입할 수 있습니다.

image_thumb_16.png

10. 이미지 선택 메뉴에서 특정 폴더를 생성하고 이미지를 업로드할 수도 있고, 이미 업로드된 이미지에 대한 삽입을 진행할 수도 있습니다.

image_thumb_17.png

11. 아래 그림은 [이미지 선택] 메뉴를 거친 후 메인 페이지에 적용했던 제 사진(?) 이미지를 제거한 후 제과점에서 제가 직접 찍어온 케익 사진을 올려본 모습니다.

image_thumb_18.png

결론

자~ 이렇게해서 Orchard에 사진과 같은 이미지 파일을 손쉽게 올리고 등록하는 방법에 대해서 설명을 드렸습니다. 여기까지만 진행해도 웬만한 디자인적인 페이지를 만드는데는 어려움이 없을 줄 압니다.

끝.

관련글