[Umbraco 강좌] 23. 사진 갤러리(Gallery) 만들기 2 : XSLT 사용하기

Article
07/07/2011

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

소개

이번 강좌는 지난 시간에 이어서 간단한 갤러리를 만드는데, 출력 모양을 결정 지을 부분에 대해서 XSLT를 사용하여 UI를 꾸며보도록 하겠습니다.

절차

1. [Gallery] 페이지를 클릭하면 아래 그림과 같이 2개의 이미지가 업로드 된 상태입니다. 이 2개의 이미지를 웹 브라우저로 실행했을 때 웹 페이지로 보여질 수 있도록 꾸며 보겠습니다.

2. [Developer] 섹션-[XSLT 파일]에 마우스 오른쪽 버튼을 클릭하여 [생성] 메뉴를 클릭하여 XSLT 생성 창을 띄웁니다.

3. XLST 생성 창에서 [lstPhotos]란 이름으로 XSLT를 만드는 데 처음부터 만드는 것이 아닌 Umbraco에서 미리 정의된 XSLT 템플릿 중에서 [List Sub Pages From Current Page] 항목을 선택한 후 [생성] 버튼을 클릭하여 XSLT 파일을 생성합니다.

4. [lstPhotos.xslt] 파일이 생성된 모습입니다. 현재는 따로 소스를 건드릴 필요가 없으므로 그대로 두고 저장합니다.

5. [백오피스]-[Settings]-[템플릿]-[Gallery]를 선택한 후 아래 그림과 같이 매크로가 출력될 영역을 지정한 후 앞서 만든 [lstPhotos] 매크로를 템플릿에 등록합니다.

아래 코드는 위에서의 편집기 내의 코드를 예시로 보여줍니다.

 <%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>

<asp:Content ContentPlaceHolderId="ContentPlaceHolderDefault" runat="server">

<umbraco:Macro Alias="LstPhotos" runat="server"></umbraco:Macro>

</asp:Content>

6. [Gallery] 콘텐트 페이지를 웹 브라우저로 실행하면, 위에서 지정한 XSLT 형태대로 UI가 출력됩니다. 아래 그림에서 단순한 텍스트가 아닌 이미지로 보여주고자 한다면 다음 단계로 계속 진행하면 됩니다.

7. 앞서 생성한 [lstPhotos.xslt] 파일을 열고 아래 그림과 같이 Yellow 박스 부분을 수정한 후 XSLT 파일을 저장합니다.

아래 코드는 위의 편집기의 수정된 내용을 예시로 보여줍니다.

 <?xml version="1.0" encoding="UTF-8"?>

 <!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>

<xsl:stylesheet

version="1.0"

xmlns:xsl="https://www.w3.org/1999/XSL/Transform"

xmlns:msxml="urn:schemas-microsoft-com:xslt"

xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"

exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">

<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<xsl:template match="/">

 <div class="pikachoose">

 <ul id="pikame" >

<xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']">

<li>

         <a href="{umbraco.library:NiceUrl("@id)}">

<img src="{uploadPhoto}" alt="{@nodeName}" width="500" height="250" />

</a>

<span><xsl:value-of select="@nodeName"/></span>

</li>

</xsl:for-each>

</ul>

</div>

</xsl:template>

</xsl:stylesheet>

8. 다시 [Gallyer] 페이지를 웹 브라우저로 실행하면 아래 그림처럼 이미지와 텍스트가 함께 리스트로 출력됨을 확인할 수 있습니다.

마무리

Umbraco CMS의 강점 중 하나는 XML과 XSLT를 사용하여 웹 페이지를 보여주는 부분에 있습니다. 따로 ASP.NET 웹 사용자 정의 컨트롤을 알지 못하더라도 업계 표준인 XML 코드를 사용하여 손쉽게 웹 페이지를 꾸밀 수가 있기 때문입니다.

다음 시간은 위 갤러리를 단순히 리스트로 출력하는 게 아닌 jQuery 플러그인을 사용하여 슬라이드쇼로 표현할 수 있도록 기능을 업그레이드 하도록 하겠습니다.

끝.

관련글

Partager via

[Umbraco 강좌] 23. 사진 갤러리(Gallery) 만들기 2 : XSLT 사용하기

Ressources supplémentaires