UTF-8 or ISO-8859-1

Questions, comments and general discussion about Galleroo
Locked
ndamour
Posts: 3
Joined: Thu May 17, 2007 12:59 am
Contact:

UTF-8 or ISO-8859-1

Post by ndamour » Thu May 17, 2007 2:02 am

Hi!
I discovered Galleroo a few days ago while I was looking for a customizable photo gallery builder under Windows, and I must say that it is a great job you did here. This is a exactly the tool I was looking for: taking over all the fuss about resizing the images and leaving me full control over the generated HTML code, in that I can edit the XSL sheets as I want it.
However, I came across a small inconvenience (a bug, would I even say) in the generation of the resulting HTML files.
Let's say I'm using the Pratim style. Its gallery.xsl looks defines the title variable:
<xsl:param name="title">Photo Gallery</xsl:param>
When opening Galleroo, I can set the value of this variable to whatever I like. Let's say, for example, that I want the title "Pictures à la carte" (note the a with a grave accent).
When I click on "Go!", Galleroo will first generate its galleroo.xml file correctly, with the following entry in the main object:
<name>Pictures & #224; la carte</name> (I added a space after "&" because otherwise the forum doesn't display the code as I want it)
With nice ASCII encoding everywhere. So far so good....
However, when the galleroo.html intermediate file is generated, it comes with the following:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pictures à la carte</title>
Where the 'à' is binary encoded (in the file) as a single byte: E0. This is not UTF-8 but ISO-8859-1 (Latin-1). And of course, when the intermediate galleroo.html file is split up into the several final files with the cutter, I end up with a HTML file having a header saying "UTF-8" but actually Latin-1 encoded. There are two solutions to this:
1) Either ensure that the generated galleroo.xml file is really UTF-8 encoded, as specified in this generated <meta> tag.
2) Modify this <meta> tag to have it be written like this:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
Unfortunately, this meta tag is not part of the gallery.xsl. Something else adds it.
Could you provide some insight about how Galleroo generates the intermediate galleroo.html file based on the galleroo.xml file?
The documentation says "You can create new XSL stylesheets to be used in the third step and thus create custom galleries. The more adventurous can also create a non-HTML intermediate file, an XSL-FO file, for example, and use it to create non-HTML galleries, such as PDF files". I would like to do this exactly. How?
Thank you for your support, and again thumbs up for your great useful work.
Nicolas.

xyster
Site Admin
Posts: 605
Joined: Thu May 19, 2005 10:15 pm
Contact:

Post by xyster » Sat May 26, 2007 10:53 am

Hi Nicolas,
If I remember correctly, the encoding directive is put in there by the XSL processor, in this case xsltproc.
Since the XML is being properly generated I suspect this might be an issue with the way xsltproc handles the file. The XSL spec. doesn't really allow you to emit the tag at will (which is a pity).
Beyond the code aesthetic issue is there a display problem with the gallery?
Below is an old XSL-FO stylesheet that may not be compatible with the current version of Galleroo (I haven't tested it recently). You would run this stylesheet to create an XSL-FO style sheet. Even if doesn't work anymore, it should give you an idea of how to do it. You need to download a third-party XSL-FO processor to generate the actual PDF.

Code: Select all

<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:fo="http://www.w3.org/1999/XSL/Format"
                version="1.0">
<xsl:output method="xml" indent="yes" /> 

<!-- doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN" indent="yes" -->

<!-- Lister Gallery XSL XML->XSL:FO stylesheet 1.0
     written: 	22/6/03
     modified:  
     author: 	xyster

     comments: 	
-->

<xsl:param name="rows-per-index" select="3" />
<xsl:param name="columns-per-index" select="6" />
<xsl:param name="title">Photo Gallery</xsl:param>
<xsl:param name="sub-title" />
<xsl:param name="text-color">#000000</xsl:param>
<xsl:param name="background-color">#FFFFFF</xsl:param>
<xsl:param name="link-color">#6666FF</xsl:param>

<xsl:variable name="thumbs-per-index" select="$rows-per-index * $columns-per-index" />

<xsl:template match="list">
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">

    <fo:layout-master-set>
        <fo:simple-page-master master-name="album">
            <fo:region-body margin="0.5in" />
            <fo:region-after extent="0.5in"/>
        </fo:simple-page-master>
    </fo:layout-master-set>

           	<!-- gallery -->
        	<xsl:for-each select="media/object/children">
                <!-- thumbnails -->
                <xsl:for-each select="object/children/object[position() mod $thumbs-per-index = 1]">
                    <xsl:call-template name="index">
                        <xsl:with-param name="pix" select="following-sibling::object[position() < $thumbs-per-index] | self::object" />
                        <xsl:with-param name="index-index" select="position()" />
                        <xsl:with-param name="index-last" select="last()" />
                    </xsl:call-template>
                </xsl:for-each>

                <!-- generate the picture pages -->
                <xsl:for-each select="object/children/object[position() mod $thumbs-per-index = 1]">
                    <xsl:call-template name="pages">
                        <xsl:with-param name="pix" select="following-sibling::object[position() < $thumbs-per-index] | self::object" />
                        <xsl:with-param name="parent-index" select="position()" />
                        <xsl:with-param name="index-last" select="last()" />
                    </xsl:call-template>
                </xsl:for-each>

            </xsl:for-each>
</fo:root>

</xsl:template>
        
        


<xsl:template name="index">
    <xsl:param name="pix" />
    <xsl:param name="index-index" />
    <xsl:param name="index-last" />

    <xsl:comment> Transformed from XML with Lister Gallery XSL stylesheet 1.0 </xsl:comment>
    <xsl:comment> Source path='<xsl:value-of select="/list/media/basepath" />' </xsl:comment>

    <fo:page-sequence master-reference="album">
    
    <fo:static-content flow-name="xsl-region-after">
        <fo:block text-align="center" color="{$text-color}" background-color="{$background-color}">
            <fo:leader leader-length="4in"
                       leader-pattern="rule"
                       alignment-baseline="middle"
                       rule-thickness="1.0pt" color="black" />
        </fo:block>
    </fo:static-content>

    <fo:flow flow-name="xsl-region-body">

    <!-- title -->
    <fo:block text-align="center" color="{$text-color}" background-color="{$background-color}">
       <xsl:value-of select="$title" /> - <xsl:value-of select="$sub-title" /> (page <xsl:value-of select="$index-index" /> of <xsl:value-of select="$index-last" />)
    </fo:block>

    <!-- subtitle -->
    <fo:block text-align="center" color="{$text-color}" background-color="{$background-color}">
    <xsl:value-of select="$sub-title" /> 
    </fo:block>
    
    <fo:block text-align="center" color="{$text-color}" background-color="{$background-color}">
        <fo:leader leader-length="2in"
                   leader-pattern="rule"
                   alignment-baseline="middle"
                   rule-thickness="1.0pt" color="black" />
    </fo:block>
    
    <!-- thumbnail table -->
    <fo:block text-align="center" color="{$text-color}" background-color="{$background-color}">
    <xsl:call-template name="table">
        <xsl:with-param name="pix" select="$pix[position() <= $thumbs-per-index]" />
    </xsl:call-template>
  	</fo:block>
  	
  	<fo:block text-align="left" color="{$text-color}" background-color="{$background-color}">
  	
  	<!-- lister signature -->
  	<fo:inline font-size="50%">
  	    Generated by <fo:basic-link external-destination="url('http://www.xyster.net/')"
                      text-decoration="underline" color="{$link-color}"><xsl:value-of select="/list/generator" /></fo:basic-link>
    </fo:inline>
    
    </fo:block>

    </fo:flow>
    </fo:page-sequence>

</xsl:template>

<xsl:template name="table">
    <xsl:param name="pix" />
    <fo:table border="0.1pt solid black" text-align="center">
    <fo:table-body>
        <!-- jump $columns-per-index objects each time and splat
             out the table columns
        -->     
        <xsl:for-each select="$pix[position() mod $columns-per-index = 1]">
            <fo:table-row>
            <xsl:call-template name="table-columns-thumbs">
                <xsl:with-param name="pix" select="following-sibling::object[position() < $columns-per-index] | self::object" />
            </xsl:call-template>
            </fo:table-row>
            <fo:table-row>
            <xsl:call-template name="table-columns-names">
                <xsl:with-param name="pix" select="following-sibling::object[position() < $columns-per-index] | self::object" />
            </xsl:call-template>
            </fo:table-row>
        </xsl:for-each>    
    </fo:table-body>
    </fo:table>
</xsl:template>

<xsl:template name="table-columns-thumbs">
    <xsl:param name="pix" />
    
    <!-- our job is easy down here. Simply go over all the 
         objects given us and splat them out in their cells
    -->     
    <xsl:for-each select="$pix">
        <fo:table-cell padding="6pt" border="0.1pt solid black">
            <fo:block color="{$text-color}" background-color="{$background-color}">
                <fo:basic-link internal-destination="full_{attrib/name}"><fo:external-graphic id="thumb_{attrib/name}" src="url('{attrib/thumb-path}/{attrib/thumb-name}')" /></fo:basic-link>
            </fo:block>
        </fo:table-cell>
    </xsl:for-each>
</xsl:template>

<xsl:template name="table-columns-names">
    <xsl:param name="pix" />
    
    <!-- our job is easy down here. Simply go over all the 
         objects given us and splat them out in their cells
    -->     
    <xsl:for-each select="$pix">
        <fo:table-cell padding="6pt" border="0.1pt solid black">
            <fo:block color="{$text-color}" background-color="{$background-color}">
                <fo:basic-link internal-destination="full_{attrib/name}" text-decoration="underline" color="{$link-color}">
                    <xsl:value-of select="attrib/name" />
                </fo:basic-link>    
            </fo:block>    
        </fo:table-cell>
    </xsl:for-each>
</xsl:template>

<xsl:template name="pages">
    <xsl:param name="pix" />
    <xsl:param name="parent-index" />
    <xsl:param name="index-last" />
    
    <xsl:for-each select="$pix">
        <fo:page-sequence master-reference="album">
            <fo:flow flow-name="xsl-region-body">
                <!-- image name -->
                <fo:block text-align="center" color="{$text-color}" background-color="{$background-color}">
                    <xsl:value-of select="attrib/name" />
                </fo:block>

                <!-- image -->
                <fo:block text-align="center" color="{$text-color}" background-color="{$background-color}">
                    <fo:external-graphic id="full_{attrib/name}" src="url('{attrib/full-path}/{attrib/name}')"
                        content-height="40em" content-width="40em" overflow="visible"/>
                </fo:block>
        
                <!-- back link -->
                <fo:block text-align="center" color="{$text-color}" background-color="{$background-color}">
                    <fo:basic-link internal-destination="thumb_{attrib/name}" text-decoration="underline" color="{$link-color}">back</fo:basic-link> 
                </fo:block>    
            </fo:flow>
        </fo:page-sequence>
    </xsl:for-each>    
</xsl:template>

</xsl:stylesheet>
[/code]

ndamour
Posts: 3
Joined: Thu May 17, 2007 12:59 am
Contact:

Post by ndamour » Sun May 27, 2007 9:56 pm

Hi!

I investigated this issue a little bit further, and you seem to be right: xsltproc is the one responsible for that. In fact, if your stylesheet contains the following declaration:
<xsl:output method="html" />
Then xsltproc plays clever and the next time he sees a <head> tag in a <html> tag, it adds the following inside it:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
I write "plays clever", but this is a bit unfair with xsltproc, as it is actually doing nothing more than to implement the XSLT specification, which requires such a behaviour in its paragraph 16.2: http://www.w3.org/TR/xslt#section-HTML-Output-Method

So... To answer your question, this is not only a code aesthetic issue, since the browsers actually do use this meta tag to render the generated html files, the consequence being that my title is displayed as "Pictures ? la carte". Not good.

However, there are ways to prevent this behaviour xsltproc from adding this header:
1- tell xsltproc to use a ISO-8859-1 encoding by the following: <xsl:output method="html" encoding="ISO-8859-1"/>
2- trick xsltproc and tell him to output xml by the following: <xsl:output method="xml"/>
A third solution leaves the <xsl:output method="html"/> declaration intact:
3- It is possible to ensure that the first subfile in the galleroo.html wil be a valid html file containing only UTF-8 (or even ASCII) characters.

After some experimentations, here are the concrete applications of these 3 solutions:
1- Solution 1 somehow gets the Galleroo processing flow confused, so that after the correct generation of the galleroo.xml file, only an empty galleroo.html file will be generated, although command-line invocation of xsltproc.exe like this: C:\Program Files\Galleroo>xsltproc styles\Nico\gallery.xsl galleroo.xml >> output.html works properly. Pity, but this makes solution 1 unusable.
2- Solution 2 works just fine, the only thing to pay attention to being that the generated galleroo.html will contain the following first header line: <?xml version="1.0"?>, so that your first html chunk in galleroo.html shouldn't be a css file (as it is in the stylesheet of Pratim for example), but an x(h)tml file.
3- Solution 3, at last, is the one I prefer: you know what's going to land in the dummy file for sure, and that you won't run into problems. I, for myself, generate the following info.html file:

Code: Select all

  <!-- Generate an info page containing the generation date -->
  <!-- This page is as good as useless, but its actual purpose is to be
  the first HTML code generated: as such, it will receive the xml header -->
  <xsl:call-template name="nico-emit-info-page" />

  [...]

  <!-- Template used to generate the info page -->
  <xsl:template name="nico-emit-info-page">
    <html>
      <body>
        <p>
        This gallery has been generated using
        <a href="http://www.xyster.net"><xsl:value-of select="$source-root/list/generator" /></a>
        and an XSLT stylesheet designed by <a href="mailto:nicolas.damour@free.fr">Nicolas Damour</a>.
        </p>
        <p>
        Generation date: <xsl:value-of select="date:day-name()" />
        <xsl:text> </xsl:text> <xsl:value-of select="date:day-in-month()" />
        <xsl:text> </xsl:text> <xsl:value-of select="date:month-name()" />
        <xsl:text> </xsl:text> <xsl:value-of select="date:year()" />
        </p>
      </body>
    </html>
    <!-- cutter output -->
    <xsl:text>
</xsl:text>
    <xsl:comment>CUTHERE: <xsl:value-of select="galleroo:rplstr(concat($html-file-prefix, 'info'), '-', '\-')" />.html ?</xsl:comment>
    <xsl:text>
</xsl:text>
  </xsl:template>

  

And everything works fine: I have only one UTF-8 encoded info.html file (with actually only ASCII characters), and for the rest of them I manually add, in my stylesheet, ISO-8859-1 headers, like this:

Code: Select all

    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
      <meta name="author" content="{$author}"/>
      <!-- Define the month as a 2-digit string -->
      <xsl:variable name="monthMM"><xsl:value-of select="str:padding(2-string-length(date:month-in-year()),'0')" /><xsl:value-of select="date:month-in-year()" /></xsl:variable>
      <!-- Define the day as a 2-digit string -->
      <xsl:variable name="dayDD"><xsl:value-of select="str:padding(2-string-length(date:day-in-month()),'0')" /><xsl:value-of select="date:day-in-month()" /></xsl:variable>
      <meta name="date" scheme="ISO-8601" content="{date:year()}-{$monthMM}-{$dayDD}"/>
      <meta name="description" content="{$title}"/>
      <link type="text/css" rel="stylesheet" href="{$html-file-prefix}gallery.css" />
      <xsl:if test="string-length($custom-css-file) != 0">
      <link type="text/css" rel="stylesheet" href="{$custom-css-file}" />
      </xsl:if>
      <title><xsl:value-of select="$title" /> - <xsl:value-of select="$sub-title" /><xsl:if test="$index-last > 1"> (page <xsl:value-of select="$index-index" /> / <xsl:value-of select="$index-last" />)</xsl:if></title>
    </head>
    <!-- Index Header -->
    <body class="index-page">
    [...]
    </body>
    </html>
  

And my titles actually display nicely "Pictures à la carte". Great.

This would have been perfect but for one thing. Apart from the meta-information I enter in the Galleroo interface (like my title), I am also using (iptc) meta-information out of the picture files themselves. This information is nicely available in the galleroo.xml file where it is, as is everything else (as well as my title "Pictures à la carte"), ASCII-encoded, using HTML character entities.

The problem is that this information shows up as UTF-8 encoded in the generated galleroo.html file. Which is no good, since I finally got my ISO-8859-1 headers in....

So it seems that in contrary to what I was thinking, in my stylesheet I cannot use such declarations:
<xsl:value-of select="$title" />
But that I have to stick to the generated galleroo.xml file and use instead the following:
<xsl:value-of select="$source-root/list/media/object/children/object/attrib/name" />

And in the end, I will then have UTF-8 everywhere, so I won't need the tricks mentioned earlier :)

All for the best!

As a contribution, here is the stylesheet I then finally use:

Code: Select all

  
<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
                xmlns:exsl="http://exslt.org/common" 
                xmlns:func="http://exslt.org/functions"
                xmlns:dyn="http://exslt.org/dynamic"
                xmlns:math="http://exslt.org/math"
                xmlns:str="http://exslt.org/strings"
                xmlns:date="http://exslt.org/dates-and-times"
                xmlns:g="."
                xmlns:galleroo="."
                xmlns:nico="."
                extension-element-prefixes="dyn func exsl math str date g galleroo nico" 
                version='1.1'>
<xsl:include href="../Lib/galleroo.xsl" />

<xsl:output method="html" indent="yes"/>

<!-- doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN" indent="yes" -->

<!-- The following XSL parameters are what will appear in Galleroo as options for this
     style, in addition to the mandatory options shared by all styles.
     The parameter block must be contiguous without any spaces (either empty lines or comments) 
     in it for Galleroo to detect all options. 
     Parameter defaults must be specified as a value in between the tags. Specifying
     a default using the select attribute is not supported.
-->

<xsl:param name="title">Galerie photo</xsl:param>
<xsl:param name="sub-title" />
<xsl:param name="rows-per-index">4</xsl:param>
<xsl:param name="columns-per-index">5</xsl:param>
<xsl:param name="text-color">#CCCCCC</xsl:param>
<xsl:param name="background-color">#808080</xsl:param>
<xsl:param name="background-image" />
<xsl:param name="link-color">#FFFFFF</xsl:param>
<xsl:param name="visited-link-color">#CCCCCC</xsl:param>
<xsl:param name="active-link-color">#0000FF</xsl:param>
<xsl:param name="previous-image">previous.gif</xsl:param>
<xsl:param name="next-image">next.gif</xsl:param>
<xsl:param name="home-image">home.gif</xsl:param>
<xsl:param name="blank-image">blank.gif</xsl:param>
<xsl:param name="sort-by">name</xsl:param>
<xsl:param name="sort-order">ascending</xsl:param>
<xsl:param name="thumb-size">120</xsl:param>
<xsl:param name="thumb-quality">98</xsl:param>
<xsl:param name="thumb-border">1px solid</xsl:param>
<xsl:param name="thumb-spacing">10px</xsl:param>
<xsl:param name="do-display-captions">no</xsl:param>
<xsl:param name="image-size">600</xsl:param>
<xsl:param name="image-quality">98</xsl:param>
<xsl:param name="image-border">1px solid</xsl:param>
<xsl:param name="do-three-stage">no</xsl:param>
<xsl:param name="html-file-prefix" />
<xsl:param name="do-auto-play-movies">no</xsl:param>
<xsl:param name="custom-css-file" />
<xsl:param name="font">medium Arial</xsl:param>
<xsl:param name="gallery-root">../index.html</xsl:param>
<xsl:param name="author">Nicolas Damour</xsl:param>

<xsl:variable name="thumbs-per-index" select="$rows-per-index * $columns-per-index" />

<!-- This function extracts the name of an image without its file extension -->
<func:function name="nico:file-rootname">
  <xsl:param name="fullname" />
  <xsl:variable name="tmpname">
    <xsl:for-each select="str:tokenize($fullname,'.')[position()!=count(str:tokenize($fullname,'.'))]"><xsl:value-of select="."/>.</xsl:for-each>
  </xsl:variable>
  <func:result select="substring($tmpname, 1, string-length($tmpname)-1)" />
</func:function>

<!-- This function returns a caption for an image -->
<func:function name="nico:nico-image-caption">
  <xsl:param name="attrib" />
  <xsl:choose>
    <xsl:when test="$attrib/user-caption != ''">
      <func:result><xsl:value-of select="$attrib/user-caption" /></func:result>
    </xsl:when>
    <xsl:when test="galleroo:iptc($attrib, 'caption') != ''">
      <func:result><xsl:value-of select="galleroo:iptc($attrib, 'caption')" /></func:result>
    </xsl:when>
    <xsl:otherwise>
      <func:result select="''" />
    </xsl:otherwise>
  </xsl:choose>
</func:function>

<!-- Cutter slide page output (with a filename restricted to the file rootname) -->
<xsl:template name="nico-emit-cutter-slide">
    <xsl:param name="html-file-prefix" />
    <xsl:text>
</xsl:text>
    <xsl:comment>CUTHERE: <xsl:value-of select="galleroo:rplstr(concat($html-file-prefix, nico:file-rootname(attrib/name)), '-', '\-')" />.html ?</xsl:comment>
    <xsl:text>
</xsl:text>
</xsl:template>

<xsl:template match="list">

  <!-- Generate an info page containing the generation date -->
  <!-- This page is as good as useless, but its actual purpose is to be
  the first HTML code generated: as such, it will receive the xml header -->
  <xsl:call-template name="nico-emit-info-page" />

  <!-- Generate the gallery.css -->
  <xsl:call-template name="nico-emit-css-file">
    <xsl:with-param name="name" select="'gallery'" />
    <xsl:with-param name="html-file-prefix" select="$html-file-prefix" />
    <xsl:with-param name="background-image" select="$background-image" />
    <xsl:with-param name="background-color" select="$background-color" />
    <xsl:with-param name="font" select="$font" />
    <xsl:with-param name="text-color" select="$text-color" />
    <xsl:with-param name="link-color" select="$link-color" />
    <xsl:with-param name="active-link-color" select="$active-link-color" />
    <xsl:with-param name="visited-link-color" select="$visited-link-color" />
    <xsl:with-param name="thumb-border" select="$thumb-border" />
    <xsl:with-param name="image-border" select="$image-border" />
  </xsl:call-template>
  
  <!-- Copy over the pix to a new *sorted* list -->
  <xsl:variable name="sorted-pix" select="galleroo:sort-pix(media/object/children/object/children/object, $sort-by, $sort-order)" />    

  <!-- Generate the index pages -->
  <xsl:for-each select="exsl:node-set($sorted-pix)/*[position() mod $thumbs-per-index = 1]">
    <xsl:call-template name="index">
      <xsl:with-param name="pix" select="following-sibling::object[position() < $thumbs-per-index] | self::object" />
      <xsl:with-param name="allpix" select="exsl:node-set($sorted-pix)/*" />
      <xsl:with-param name="index-index" select="position()" />
      <xsl:with-param name="index-last" select="last()" />
      <xsl:with-param name="indexstartpix" select="exsl:node-set($sorted-pix)/*[position() mod $thumbs-per-index = 1]" />
    </xsl:call-template>
  </xsl:for-each>

</xsl:template>

<!-- Template used to generate the info page -->
<xsl:template name="nico-emit-info-page">
  <html>
    <body>
      <p>
      This gallery has been generated using
      <a href="http://www.xyster.net"><xsl:value-of select="$source-root/list/generator" /></a>
      and an XSLT stylesheet designed by <a href="mailto:nicolas.damour@free.fr">Nicolas Damour</a>.
      </p>
      <p>
      Generation date: <xsl:value-of select="date:day-name()" />
      <xsl:text> </xsl:text> <xsl:value-of select="date:day-in-month()" />
      <xsl:text> </xsl:text> <xsl:value-of select="date:month-name()" />
      <xsl:text> </xsl:text> <xsl:value-of select="date:year()" />
      </p>
    </body>
  </html>
  <!-- cutter output -->
  <xsl:text>
</xsl:text>
  <xsl:comment>CUTHERE: <xsl:value-of select="galleroo:rplstr(concat($html-file-prefix, 'info'), '-', '\-')" />.html ?</xsl:comment>
  <xsl:text>
</xsl:text>
</xsl:template>


<!-- Template used to generate the index pages -->
<xsl:template name="index">
  <xsl:param name="pix" />
  <xsl:param name="allpix" />
  <xsl:param name="index-index" />
  <xsl:param name="index-last" />
  <xsl:param name="indexstartpix" />

  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      <meta name="author" content="{$source-root/list/media/object/children/object/attrib/author}"/>
      <!-- Define the month as a 2-digit string -->
      <xsl:variable name="monthMM"><xsl:value-of select="str:padding(2-string-length(date:month-in-year()),'0')" /><xsl:value-of select="date:month-in-year()" /></xsl:variable>
      <!-- Define the day as a 2-digit string -->
      <xsl:variable name="dayDD"><xsl:value-of select="str:padding(2-string-length(date:day-in-month()),'0')" /><xsl:value-of select="date:day-in-month()" /></xsl:variable>
      <meta name="date" scheme="ISO-8601" content="{date:year()}-{$monthMM}-{$dayDD}"/>
      <meta name="description" content="{$source-root/list/media/object/children/object/attrib/name}"/>
      <link type="text/css" rel="stylesheet" href="{$html-file-prefix}gallery.css" />
      <xsl:if test="string-length($custom-css-file) != 0">
      <link type="text/css" rel="stylesheet" href="{$custom-css-file}" />
      </xsl:if>
      <title><xsl:value-of select="$source-root/list/media/object/children/object/attrib/name" /> - <xsl:value-of select="$source-root/list/media/object/children/object/attrib/sub-title" /><xsl:if test="$index-last > 1"> (page <xsl:value-of select="$index-index" /> / <xsl:value-of select="$index-last" />)</xsl:if></title>
    </head>
    <!-- Index Header -->
    <body class="index-page">
      <table border="0" cellpadding="10px" style="empty-cells: show">
      <tr>
        <td style="width: 50px; text-align: center; vertical-align: middle; overflow: hidden">
          <xsl:if test="$index-index != 1">
          <a class="nav" href="{$html-file-prefix}{galleroo:index-html-name($index-index - 1)}">
            <img src="{$previous-image}" style="border: 0px" title="Previous" alt="Previous"/>
            <br/>Previous
          </a>
          </xsl:if>
        </td>
        <td style="width: 50px; text-align: center; vertical-align: middle; overflow: hidden">
          <xsl:if test="$gallery-root != 'none'">
          <a class="nav" href="{$gallery-root}">
            <img src="{$home-image}" style="border: 0px" title="Home" alt="Home"/>
            <br/>Home
          </a>
          </xsl:if>
        </td>
        <td style="width: 50px; text-align: center; vertical-align: middle; overflow: hidden">
        <xsl:if test="$index-index != $index-last">
          <a class="nav" href="{$html-file-prefix}{galleroo:index-html-name($index-index + 1)}">
            <img src="{$next-image}" style="border: 0px" title="Next" alt="Next"/>
            <br/>Next
          </a>
        </xsl:if>
        </td>
        <td rowspan="2"></td>
        <td rowspan="2" style="text-align: left; vertical-align: middle; font-size: larger">
          <!-- Title -->
          <span style="font-size: larger"><span style="font-size: larger"><xsl:value-of select="$source-root/list/media/object/children/object/attrib/name" /></span></span><br/>
          <!-- Subtitle -->
          <xsl:value-of select="$source-root/list/media/object/children/object/attrib/sub-title" /><br/>
          <span style="font-size: smaller">
          <xsl:value-of select="count($allpix)"/> images<xsl:if test="$index-last > 1"><xsl:text disable-output-escaping="yes">&ensp;</xsl:text>-<xsl:text disable-output-escaping="yes">&ensp;</xsl:text>Page <xsl:value-of select="$index-index" /> / <xsl:value-of select="$index-last" /></xsl:if>
          </span>
        </td>
      </tr>
      <tr>
        <td colspan="3" class="nav">
          <xsl:if test="count($indexstartpix) > 1">
            Index: 
            <xsl:for-each select="$indexstartpix">
              <xsl:text disable-output-escaping="yes">&ensp;</xsl:text>
              <xsl:choose>
                <xsl:when test="position() != $index-index">
                  <a href="{$html-file-prefix}{galleroo:index-html-name(position())}">
                  <xsl:value-of select="position()" />
                  </a>
                </xsl:when>
                <xsl:otherwise>
                  <xsl:value-of select="position()" />
                </xsl:otherwise>
              </xsl:choose>
            </xsl:for-each>
          </xsl:if>
        </td>
      </tr>
      </table>
      <!-- Thumbnail table -->
      <div>
      <xsl:call-template name="table">
        <xsl:with-param name="pix" select="$pix[position() <= $thumbs-per-index]" />
        <xsl:with-param name="thumb-spacing" select="$thumb-spacing" />
      </xsl:call-template>
      </div>
    </body>
  </html>
    
  <!-- Cutter output -->
  <xsl:call-template name="gal-emit-cutter-index">
    <xsl:with-param name="index" select="$index-index" />
    <xsl:with-param name="html-file-prefix" select="$html-file-prefix" />
  </xsl:call-template>

  <!-- Generate the picture pages -->
  <xsl:call-template name="pages">
    <xsl:with-param name="pix" select="$pix" />
    <xsl:with-param name="allpix" select="$allpix" />
    <xsl:with-param name="parent-index" select="$index-index" />
  </xsl:call-template>
    
</xsl:template>

<xsl:template name="nico-emit-css-file">
  <xsl:param name="name" />
  <xsl:param name="html-file-prefix" />
  <xsl:param name="background-image" />
  <xsl:param name="background-color" />
  <xsl:param name="font" />
  <xsl:param name="text-color" />
  <xsl:param name="link-color" />
  <xsl:param name="active-link-color" />
  <xsl:param name="visited-link-color" />
  <xsl:param name="thumb-border" />
  <xsl:param name="image-border" />

  <!-- Leave room for post creation, user customization -->
@import url("base.css");
body {
  <xsl:call-template name="gal-emit-css-attribute">
    <xsl:with-param name="name" select="'background-image'" />
    <xsl:with-param name="value" select="$background-image" />
    <xsl:with-param name="type" select="'url'" />
  </xsl:call-template>

  <xsl:call-template name="gal-emit-css-attribute">
    <xsl:with-param name="name" select="'background-color'" />
    <xsl:with-param name="value" select="$background-color" />
  </xsl:call-template>

  <xsl:call-template name="gal-emit-css-attribute">
    <xsl:with-param name="name" select="'color'" />
    <xsl:with-param name="value" select="$text-color" />
  </xsl:call-template>

  <xsl:call-template name="gal-emit-css-font-attributes">
    <xsl:with-param name="font" select="$font" />
  </xsl:call-template>
}

img.picture {
  <xsl:call-template name="gal-emit-css-attribute">
    <xsl:with-param name="name" select="'border'" />
    <xsl:with-param name="value" select="$image-border" />
  </xsl:call-template>
}

img.thumbnail {
  <xsl:call-template name="gal-emit-css-attribute">
    <xsl:with-param name="name" select="'border'" />
    <xsl:with-param name="value" select="$thumb-border" />
  </xsl:call-template>
}

td.thumbnail { text-align: center }

.nav { font-size: 75%; }

.caption { font-size: 70%; text-align: center }

table.thumb-table { border: 0px; empty-cells: show }

a {
  <xsl:call-template name="gal-emit-css-attribute">
     <xsl:with-param name="name" select="'color'" />
     <xsl:with-param name="value" select="$link-color" />
  </xsl:call-template>
}

a:visited {
  <xsl:call-template name="gal-emit-css-attribute">
    <xsl:with-param name="name" select="'color'" />
    <xsl:with-param name="value" select="$visited-link-color" />
  </xsl:call-template>
}

a:active {
  <xsl:call-template name="gal-emit-css-attribute">
    <xsl:with-param name="name" select="'color'" />
    <xsl:with-param name="value" select="$active-link-color" />
  </xsl:call-template>
}

a:hover {
  <xsl:call-template name="gal-emit-css-attribute">
    <xsl:with-param name="name" select="'color'" />
    <xsl:with-param name="value" select="$active-link-color" />
  </xsl:call-template>
}

<!-- Cutter output -->
  <xsl:text>
</xsl:text>
  <xsl:comment>CUTHERE: <xsl:value-of select="galleroo:rplstr(concat($html-file-prefix, $name), '-', '\-')" />.css ?</xsl:comment>
  <xsl:text>
</xsl:text>

</xsl:template>

<xsl:template name="pages">
  <xsl:param name="pix" />
  <xsl:param name="allpix" />
  <xsl:param name="parent-index" />

  <xsl:for-each select="$pix">
  <xsl:variable name="position" select="($parent-index - 1) * $thumbs-per-index + position()" />
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      <meta name="author" content="{$source-root/list/media/object/children/object/attrib/author}"/>
      <!-- Define the month as a 2-digit string -->
      <xsl:variable name="monthMM"><xsl:value-of select="str:padding(2-string-length(date:month-in-year()),'0')" /><xsl:value-of select="date:month-in-year()" /></xsl:variable>
      <!-- Define the day as a 2-digit string -->
      <xsl:variable name="dayDD"><xsl:value-of select="str:padding(2-string-length(date:day-in-month()),'0')" /><xsl:value-of select="date:day-in-month()" /></xsl:variable>
      <meta name="date" scheme="ISO-8601" content="{date:year()}-{$monthMM}-{$dayDD}"/>
      <xsl:variable name="page-title">
        <xsl:value-of select="$source-root/list/media/object/children/object/attrib/name" />
        <xsl:if test="string-length(galleroo:image-title(attrib)) != 0">
        <xsl:text> </xsl:text>-<xsl:text> </xsl:text><xsl:value-of select="galleroo:image-title(attrib)" />
        </xsl:if>
      </xsl:variable>
      <meta name="description" content="{$page-title}"/>
      <link type="text/css" rel="stylesheet" href="{$html-file-prefix}gallery.css" />
      <xsl:if test="string-length($custom-css-file) != 0">
      <link type="text/css" rel="stylesheet" href="{$custom-css-file}" />
      </xsl:if>
      <title><xsl:value-of select="$page-title" /></title>
    </head>
    <body class="picture">
    
      <table style="width: 100%; height: 100%; empty-cells: show; border: 0px" cellpadding="0" cellspacing="0">
        <tr>
          <!-- Navigation menu -->
          <!-- The width of the td is equal to the max of ($thumb-size + 10) and 160 -->
          <td style="width: {((number($thumb-size) + 10 + 160) div 2) + math:abs(number($thumb-size)+10 - 160)}px; text-align: center; vertical-align: top">
            <table style="width: 100%; empty-cells: show; border: 0px" cellpadding="0" cellspacing="0">
              <tr>
                <td style="text-align: center">
                  <table style="width: 100%; empty-cells: show; border: 0px" cellpadding="0" cellspacing="0">
                    <tr>
                      <!-- Link to previous picture -->
                      <td style="width: 50px; text-align: center; vertical-align: middle; overflow: hidden">
                        <xsl:if test="$position > 1">
                        <a class="nav" href="{$html-file-prefix}{nico:file-rootname($allpix[position() = ($position - 1)]/attrib/name)}.html">
                          <img src="{$previous-image}" style="border: 0px" title="Previous" alt="Previous"/>
                          <br/>Previous
                        </a>
                        </xsl:if>
                      </td>
                      <!-- Link to parent index page -->
                      <td style="width: 50px; text-align: center; vertical-align: middle; overflow: hidden">
                        <a class="nav" href="{galleroo:index-html-name($parent-index)}">
                          <img src="{$home-image}" style="border: 0px" title="Index" alt="Index"/>
                          <br/>Index
                        </a>
                      </td>
                      <!-- Link to next picture -->
                      <td style="width: 50px; text-align: center; vertical-align: middle; overflow: hidden">
                        <xsl:if test="$position < count($allpix)">
                        <a class="nav" href="{$html-file-prefix}{nico:file-rootname($allpix[position() = ($position + 1)]/attrib/name)}.html">
                          <img src="{$next-image}" style="border: 0px" title="Next" alt="Next"/>
                          <br/>Next
                        </a>
                        </xsl:if>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <!-- Image navigation -->
              <xsl:call-template name="image-nav-bar">
                <xsl:with-param name="pix" select="$allpix" />
                <xsl:with-param name="position" select="($parent-index - 1) * $thumbs-per-index + position()" />
                <xsl:with-param name="thumb-spacing" select="$thumb-spacing" />
              </xsl:call-template>
            </table>
          </td>
          <!-- Spacer -->
          <td style="width: 30px"></td>
          <!-- Main picture section -->
          <td style="vertical-align: top">
            <span style="font-size: larger">
            <!-- Page header -->
            <span style="font-size: larger">
            <span style="font-size: larger">
            <xsl:value-of select="$source-root/list/media/object/children/object/attrib/name" />
            <xsl:text disable-output-escaping="yes">&emsp;</xsl:text>
            </span>
            <xsl:value-of select="$source-root/list/media/object/children/object/attrib/sub-title" />
            <br/>
            </span>
            <!-- Image title -->
            Image <xsl:value-of select="$position"/>/<xsl:value-of select="count($allpix)"/><xsl:text disable-output-escaping="yes">&emsp;</xsl:text>
            <xsl:value-of select="galleroo:image-title(attrib)" /><br/>
            </span>
            <!-- Image caption -->
            <xsl:value-of select="nico:nico-image-caption(attrib)" />
            <!-- The full size image/video -->
            <div style="text-align: left; margin-top: 10px; margin-left: 60px">
              <xsl:choose>
                <!-- Video -->
                <xsl:when test="attrib/format = 'video'">
                  <embed class="slide" src="{attrib/full-path}/{attrib/name}" mute="0" enablecontextmenu="1" showdisplay="0" autostart="{$do-auto-play-movies = 'yes'}" playcount="1" showcontrols="1" />
                  <!--
                   commented out pretty number output until xsltproc is fixed.
                   <a href="{attrib/full-path}/{attrib/name}"><xsl:value-of select="galleroo:pretty-name(attrib/name)" /> (<xsl:number value="attrib/file-size div 1024" grouping-separator="," grouping-size="3" />KB)</a>
                  -->
                  <a href="{attrib/full-path}/{attrib/name}"><xsl:value-of select="galleroo:pretty-name(attrib/name)" /> (<xsl:number value="attrib/file-size" /> Bytes)</a>
                </xsl:when>
                <!-- Image -->
                <xsl:otherwise>
                  <img class="slide" src="{attrib/full-path}/{attrib/name}" border="0" />
                </xsl:otherwise>
              </xsl:choose>
              <!-- Comment -->
              <br/>
              <div style="align:left; padding:1em;">
                <xsl:value-of select="galleroo:image-comment(attrib)" /><br />
              </div>
            </div>
          </td>
        </tr>
      </table>

    </body>
  </html>

  <!-- Cutter output -->
  <xsl:call-template name="nico-emit-cutter-slide">
    <xsl:with-param name="html-file-prefix" select="$html-file-prefix" />
  </xsl:call-template>

  </xsl:for-each>
</xsl:template>

<xsl:template name="image-nav-bar">
  <xsl:param name="pix" />
  <xsl:param name="position" />
  <xsl:param name="thumb-spacing" />
  
  <!-- Before previous thumbnail -->
  <xsl:if test="$position >= 3">
  <tr><td style="height: {$thumb-spacing}"/></tr>
  <tr><td style="text-align: center; vertical-align: top">
  <xsl:call-template name="image-nav-bar-thumbnail">
    <xsl:with-param name="image" select="$pix[position() = ($position - 2)]"/>
    <xsl:with-param name="anchor" select="'yes'"/>
  </xsl:call-template>
  </td></tr>
  </xsl:if>
  <!-- Previous thumbnail -->
  <xsl:if test="$position >= 2">
  <tr><td style="height: {$thumb-spacing}"/></tr>
  <tr><td style="text-align: center; vertical-align: top">
  <xsl:call-template name="image-nav-bar-thumbnail">
    <xsl:with-param name="image" select="$pix[position() = ($position - 1)]"/>
    <xsl:with-param name="anchor" select="'yes'"/>
  </xsl:call-template>
  </td></tr>
  </xsl:if>
  <!-- Current thumbnail -->
  <tr><td style="height: {$thumb-spacing}"/></tr>
  <tr><td style="text-align: center; vertical-align: top">
  <xsl:call-template name="image-nav-bar-thumbnail">
    <xsl:with-param name="image" select="$pix[position() = $position]"/>
    <xsl:with-param name="anchor" select="'no'"/>
  </xsl:call-template>
  </td></tr>
  <!-- Next thumbnail -->
  <xsl:if test="$position <= (count($pix) - 1)">
  <tr><td style="height: {$thumb-spacing}"/></tr>
  <tr><td style="text-align: center; vertical-align: top">
  <xsl:call-template name="image-nav-bar-thumbnail">
    <xsl:with-param name="image" select="$pix[position() = ($position + 1)]"/>
    <xsl:with-param name="anchor" select="'yes'"/>
  </xsl:call-template>
  </td></tr>
  </xsl:if>
  <!-- After next thumbnail -->
  <xsl:if test="$position <= (count($pix) - 2)">
  <tr><td style="height: {$thumb-spacing}"/></tr>
  <tr><td style="text-align: center; vertical-align: top">
  <xsl:call-template name="image-nav-bar-thumbnail">
    <xsl:with-param name="image" select="$pix[position() = ($position + 2)]"/>
    <xsl:with-param name="anchor" select="'yes'"/>
  </xsl:call-template>
  </td></tr>
  </xsl:if>
</xsl:template>

<xsl:template name="image-nav-bar-thumbnail">
  <xsl:param name="image" />
  <xsl:param name="anchor" />
  <xsl:choose>
    <xsl:when test="$anchor = 'yes'">
      <a href="{$html-file-prefix}{nico:file-rootname($image/attrib/name)}.html">
        <span class="caption">
          <img class="thumbnail" width="{$image/attrib/thumb-x-size}" height="{$image/attrib/thumb-y-size}" src="{$image/attrib/thumb-path}/{$image/attrib/thumb-name}" />
          <xsl:if test="$do-display-captions = 'yes'">
          <br/>
          <xsl:value-of select="galleroo:image-title($image/attrib)" />
          </xsl:if>
        </span>
      </a>
    </xsl:when>
    <xsl:otherwise>
      <div style="border: 1px solid; padding: 2px">
        <span class="caption">
          <img class="thumbnail" width="{$image/attrib/thumb-x-size}" height="{$image/attrib/thumb-y-size}" src="{$image/attrib/thumb-path}/{$image/attrib/thumb-name}" />
          <xsl:if test="$do-display-captions = 'yes'">
          <br/>
          <xsl:value-of select="galleroo:image-title($image/attrib)" />
          </xsl:if>
        </span>
      </div>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>

<xsl:template name="table">
  <xsl:param name="pix" />
  <xsl:param name="thumb-spacing" />
  <table class="thumb-table" align="center" cellspacing="0" cellpadding="0" border="0">
  <!-- Jump $columns-per-index objects each time and splat out the table columns -->     
  <xsl:for-each select="$pix[position() mod $columns-per-index = 1]">
    <xsl:if test="position() != 1">
    <tr style="height: {$thumb-spacing}"><td colspan="{$columns-per-index*2-1}"></td></tr>
    </xsl:if>
    <tr>
    <xsl:call-template name="table-columns-thumbs">
      <xsl:with-param name="pix" select="following-sibling::object[position() < $columns-per-index] | self::object" />
      <xsl:with-param name="thumb-spacing" select="$thumb-spacing" />
    </xsl:call-template>
    </tr>
    <xsl:if test="$do-display-captions = 'yes'">
    <tr>
    <xsl:call-template name="table-columns-names">
      <xsl:with-param name="pix" select="following-sibling::object[position() < $columns-per-index] | self::object" />
      <xsl:with-param name="thumb-spacing" select="$thumb-spacing" />
    </xsl:call-template>
    </tr>
    </xsl:if>
  </xsl:for-each>    
  </table>
</xsl:template>

<xsl:template name="table-columns-thumbs">
  <xsl:param name="pix" />
  <xsl:param name="thumb-spacing" />
  <!-- Our job is easy down here. Simply go over all the objects given us and splat them out in their cells -->     
  <xsl:for-each select="$pix">
    <xsl:if test="position() != 1">
    <td style="width: {$thumb-spacing}"></td>
    </xsl:if>
    <td class="thumbnail" width="{attrib/thumb-x-size}">
      <a href="{$html-file-prefix}{nico:file-rootname(attrib/name)}.html"><img class="thumbnail" width="{attrib/thumb-x-size}" height="{attrib/thumb-y-size}" src="{attrib/thumb-path}/{attrib/thumb-name}" /></a>
    </td>
  </xsl:for-each>
</xsl:template>

<xsl:template name="table-columns-names">
  <xsl:param name="pix" />
  <xsl:param name="thumb-spacing" />
  <!-- Our job is easy down here. Simply go over all the objects given us and splat them out in their cells -->     
  <xsl:for-each select="$pix">
    <xsl:if test="position() != 1">
    <td style="width: {$thumb-spacing}"></td>
    </xsl:if>
    <td class="caption" width="{attrib/thumb-x-size}">
      <a href="{$html-file-prefix}{nico:file-rootname(attrib/name)}.html">
        <xsl:value-of select="galleroo:image-title(attrib)" />
      </a>
    </td>
  </xsl:for-each>
</xsl:template>

</xsl:stylesheet>

  
  

Thank you again for your great piece of software,

Nicolas.

Locked