themes/floatingcards/template.xsl

0001 <?xml version="1.0" encoding="UTF-8" ?>
0002
0003 <!--
0004  * ============================================================
0005  *
0006  * This file is a part of digiKam project
0007  * https://www.digikam.org
0008  *
0009  * Date        : 2009-11-30
0010  * Description : A dark theme with floating thumbnail and description
0011  *               cards for the digiKam html gallery tool.
0012  *
0013  * SPDX-FileCopyrightText: 2009 by Jiří Boháč <jiri at boha dot cz>
0014  *
0015  * SPDX-License-Identifier: GPL-2.0-or-later
0016  *
0017  * ============================================================
0018  -->
0019
0020 <!DOCTYPE stylesheet [
0021 ]>
0022
0023 <xsl:transform version="1.0"
0024         xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
0025         xmlns:exsl="http://exslt.org/common"
0026         extension-element-prefixes="exsl">
0027 <xsl:output method="xml" indent="yes"
0028         doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
0029         doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" />
0030
0031 <!-- **** image page ******************************************************************* -->
0032 <xsl:template name="imagePage">
0033 <xsl:param name="max_thumb_height" />
0034 <xsl:param name="max_thumb_width" />
0035         <html>
0036         <head>
0037                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
0038                 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
0039                 <title><xsl:value-of select="title"/></title>
0040                 <link rel="stylesheet" type="text/css" href="../floatingcards/style.css"/>
0041                 <link rel="stylesheet" type="text/css" href="../thumb_size.css"/>
0042         </head>
0043         <body class="image">
0044         <xsl:if test="$keyboard_navigation = 1">
0045         <script type="text/javascript" src="../floatingcards/image_nav.js"/>
0046         </xsl:if>
0047
0048         <div class="fix" id="fix">
0049
0050         <!-- navigation buttons at the top -->
0051         <div class="nav right">
0052                 <xsl:if test="position() &lt; last()">
0053                         <a href="{following-sibling::image[position()=1]/full/@fileName}.html" id="next">
0054                                 <img src="../floatingcards/next.png" alt="&gt;"/>
0055                         </a>
0056                 </xsl:if>
0057                 <xsl:if test="position() &gt; 1">
0058                         <a href="{preceding-sibling::image[position()=1]/full/@fileName}.html" id="prev">
0059                                 <img src="../floatingcards/prev.png" alt="&lt;"/>
0060                         </a>
0061                 </xsl:if>
0062         </div>
0063
0064         <div class="nav left">
0065                 <xsl:choose>
0066                         <xsl:when test="count(/collections/collection) &gt; 1">
0067                                 <a href="../{../fileName}.html" id="up">
0068                                 <img src="../floatingcards/up.png" alt="&lt;&lt;&lt;"/></a>
0069                         </xsl:when>
0070                         <xsl:otherwise>
0071                                 <a href="../index.html" id="up">
0072                                 <img src="../floatingcards/up.png" alt="&lt;&lt;&lt;"/></a>
0073                         </xsl:otherwise>
0074                 </xsl:choose>
0075         </div>
0076
0077         <!-- the image itself -->
0078         <div class="image"><div>
0079         <xsl:choose>
0080                 <xsl:when test="original/@fileName != ''">
0081                         <a href="{original/@fileName}">
0082                         <img src="{full/@fileName}" alt=""/>
0083                         </a>
0084                 </xsl:when>
0085                 <xsl:otherwise>
0086                         <img src="{full/@fileName}" alt=""/>
0087                 </xsl:otherwise>
0088         </xsl:choose>
0089         </div></div>
0090
0091         <h1>
0092                 (<xsl:value-of select="position()"/>/<xsl:value-of select="last()"/>)
0093                 <xsl:value-of select="title"/>
0094         </h1>
0095         <h2>
0096                 <xsl:value-of select="description"/>
0097         </h2>
0098         </div>
0099
0100         <!-- back/forward selection controls -->
0101
0102         <!-- the maximum expected window width to calculate the maximum number of thumbnails to display -->
0103         <xsl:variable name="max_screen_width" select="2000"/>
0104
0105         <!-- the div has a max-width of 80%, margins + padding + border of 38px -->
0106         <xsl:variable name="select_count" select="floor($max_screen_width * 0.8 div ($max_thumb_width + 38))"/>
0107
0108         <xsl:variable name="current" select='position()'/>
0109
0110         <xsl:if test="position() &gt; 1">
0111                 <div class="select back">
0112                 <ul>
0113                         <xsl:for-each select="../image[
0114                                         position() &gt;= $current - $select_count
0115                                         and position() &lt; $current]"
0116                         >
0117                         <xsl:sort select="position()" data-type="number" order="descending"/>
0118                                 <xsl:call-template name="thumbnail">
0119                                         <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
0120                                         <xsl:with-param name="pre_description"><xsl:value-of select="$current - position()"/>: </xsl:with-param>
0121                                         <xsl:with-param name="img_path"><xsl:value-of select="thumbnail/@fileName"/></xsl:with-param>
0122                                         <xsl:with-param name="link_path"><xsl:value-of select="full/@fileName"/>.html</xsl:with-param>
0123                                 </xsl:call-template>
0124                         </xsl:for-each>
0125                 </ul>
0126                 </div>
0127         </xsl:if>
0128
0129         <xsl:if test="position() &lt; last()">
0130                 <div class="select forward">
0131                 <ul>
0132                         <xsl:for-each select="../image[
0133                                         position() &gt; $current
0134                                         and position() &lt;= $current + $select_count]"
0135                         >
0136                                 <xsl:call-template name="thumbnail">
0137                                         <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
0138                                         <xsl:with-param name="pre_description"><xsl:value-of select="$current + position()"/>: </xsl:with-param>
0139                                         <xsl:with-param name="img_path"><xsl:value-of select="thumbnail/@fileName"/></xsl:with-param>
0140                                         <xsl:with-param name="link_path"><xsl:value-of select="full/@fileName"/>.html</xsl:with-param>
0141                                 </xsl:call-template>
0142                         </xsl:for-each>
0143                 </ul>
0144                 </div>
0145         </xsl:if>
0146
0147                 <xsl:if test="$preload = 1">
0148                         <img class="preload" src="{following-sibling::image[position()=1]/full/@fileName}" alt=""/>
0149                 </xsl:if>
0150
0151         </body>
0152         </html>
0153 </xsl:template>
0154
0155 <!-- **** collection page *************************************************************** -->
0156 <xsl:template name="collectionPage">
0157 <xsl:param name="max_thumb_height" />
0158 <xsl:param name="max_thumb_width" />
0159         <html>
0160         <head>
0161                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
0162                 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
0163                 <title><xsl:value-of select="name"/></title>
0164                 <link rel="stylesheet" type="text/css" href="floatingcards/style.css"/>
0165                 <link rel="stylesheet" type="text/css" href="thumb_size.css"/>
0166         </head>
0167         <body class="collection">
0168
0169         <!-- for multi-collection galleries, up is "index.html", otherwise "../" -->
0170         <xsl:variable name="up">
0171                 <xsl:choose>
0172                 <xsl:when test="count(/collections/collection) &gt; 1">index.html</xsl:when>
0173                 <xsl:otherwise>../</xsl:otherwise>
0174                 </xsl:choose>
0175         </xsl:variable>
0176
0177         <!-- header and navigation buttons -->
0178         <div class="nav left">
0179                 <a href="{$up}">
0180                 <img src="floatingcards/up.png" alt="&lt;&lt;&lt;"/></a>
0181         </div>
0182
0183         <h1><xsl:value-of select="name"/></h1>
0184
0185         <!-- list of image thumbnails -->
0186         <ul>
0187                 <xsl:variable name="folder" select='fileName'/>
0188                 <xsl:for-each select="image">
0189                         <xsl:call-template name="thumbnail">
0190                                 <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
0191                                 <xsl:with-param name="pre_description"><xsl:value-of select="position()"/>: </xsl:with-param>
0192                                 <xsl:with-param name="img_path"><xsl:value-of select="$folder"/>/<xsl:value-of select="thumbnail/@fileName"/></xsl:with-param>
0193                                 <xsl:with-param name="link_path"><xsl:value-of select="$folder"/>/<xsl:value-of select="full/@fileName"/>.html</xsl:with-param>
0194                         </xsl:call-template>
0195                         <exsl:document href='{$folder}/{full/@fileName}.html'
0196                                 method="xml" indent="yes"
0197                                 doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
0198                                 octype-public="-//W3C//DTD XHTML 1.0 Strict//EN">
0199                                         <xsl:call-template name="imagePage">
0200                                                 <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
0201                                                 <xsl:with-param name="max_thumb_width"><xsl:value-of select="$max_thumb_width"/></xsl:with-param>
0202                                         </xsl:call-template>
0203                         </exsl:document>
0204                 </xsl:for-each>
0205         </ul>
0206
0207         <p class="footer">
0208                 <a href="https://www.digikam.org/">digiKam</a> HTML Gallery (Floating Cards theme)
0209                 <a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0 Strict!</a>
0210                 <a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS!</a>
0211         </p>
0212         </body>
0213         </html>
0214 </xsl:template>
0215
0216
0217 <!-- **** collection list page ********************************************************** -->
0218 <xsl:template name="collectionListPage">
0219 <xsl:param name="max_thumb_height" />
0220 <xsl:param name="max_thumb_width" />
0221         <html>
0222         <head>
0223                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
0224                 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
0225                 <title><xsl:value-of select="$i18nCollectionList"/></title>
0226                 <link rel="stylesheet" type="text/css" href="floatingcards/style.css"/>
0227                 <link rel="stylesheet" type="text/css" href="thumb_size.css"/>
0228         </head>
0229         <body class="collectionlist">
0230
0231         <!-- header and navigation buttons -->
0232         <div class="nav left">
0233                 <a href="../">
0234                 <img src="floatingcards/up.png" alt="&lt;&lt;&lt;"/></a>
0235         </div>
0236         <h1>
0237                 <xsl:value-of select="$i18nCollectionList"/>
0238         </h1>
0239
0240         <!-- list of collection thumbnails -->
0241         <ul>
0242                 <xsl:for-each select="collections/collection">
0243                         <xsl:sort select="name" order="ascending" data-type="text" />
0244                         <!-- Use first image as collection image -->
0245                         <xsl:for-each select="image[1]">
0246                         <xsl:call-template name="thumbnail">
0247                                 <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
0248                                 <xsl:with-param name="force_description">
0249                                         <xsl:value-of select="../name"/> (<xsl:value-of select="count(../image)"/>)
0250                                 </xsl:with-param>
0251                                 <xsl:with-param name="img_path"><xsl:value-of select="../fileName"/>/<xsl:value-of select="thumbnail/@fileName"/></xsl:with-param>
0252                                 <xsl:with-param name="link_path"><xsl:value-of select="../fileName"/>.html</xsl:with-param>
0253                         </xsl:call-template>
0254                         </xsl:for-each>
0255
0256                         <exsl:document href="{fileName}.html"
0257                                 method="xml" indent="yes"
0258                                 doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
0259                                 octype-public="-//W3C//DTD XHTML 1.0 Strict//EN">
0260                                 <xsl:call-template name="collectionPage">
0261                                         <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
0262                                         <xsl:with-param name="max_thumb_width"><xsl:value-of select="$max_thumb_width"/></xsl:with-param>
0263                                 </xsl:call-template>
0264                         </exsl:document>
0265                 </xsl:for-each>
0266         </ul>
0267
0268         <p class="footer">
0269                 <a href="https://www.digikam.org/">digiKam</a> HTML Gallery (Floating Cards theme)
0270                 <a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0 Strict!</a>
0271                 <a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS!</a>
0272         </p>
0273         </body>
0274         </html>
0275 </xsl:template>
0276
0277 <!-- **** thumbnail template **************************************************************** -->
0278 <xsl:template name="thumbnail">
0279 <xsl:param name="max_thumb_height" />
0280 <xsl:param name="pre_description" />
0281 <xsl:param name="force_description" />
0282 <xsl:param name="link_path" />
0283 <xsl:param name="img_path" />
0284
0285         <!-- the image is automatically centered horizontally inside the card;
0286              for vertical centering, calculate the padding -->
0287         <xsl:variable name="padding_top">
0288                 <xsl:value-of select="floor(($max_thumb_height - thumbnail/@height) div 2)"/>
0289         </xsl:variable>
0290
0291         <xsl:variable name="padding_bottom">
0292                 <xsl:value-of select="$max_thumb_height - thumbnail/@height - $padding_top"/>
0293         </xsl:variable>
0294
0295         <li>
0296                 <a href="{$link_path}">
0297                 <!-- don't pollute the HTML with unnecessary zero paddings -->
0298                 <xsl:choose>
0299                         <xsl:when test="$padding_top > 0">
0300                                 <img style="margin: {$padding_top}px 0 {$padding_bottom}px 0;" src="{$img_path}" alt=""/>
0301                         </xsl:when>
0302                         <xsl:otherwise>
0303                                 <img src="{$img_path}" alt=""/>
0304                         </xsl:otherwise>
0305                 </xsl:choose>
0306                 <br/>
0307                 <xsl:choose>
0308                         <xsl:when test="string($force_description) != ''">
0309                                 <xsl:value-of select="$force_description"/>
0310                         </xsl:when>
0311                         <xsl:when test="string(description) != ''">
0312                                 <xsl:value-of select="$pre_description"/>
0313                                 <xsl:value-of select="description"/>
0314                         </xsl:when>
0315                         <xsl:otherwise>
0316                                 <xsl:value-of select="$pre_description"/>
0317                                 <xsl:value-of select="title"/>
0318                         </xsl:otherwise>
0319                 </xsl:choose>
0320                 </a>
0321         </li>
0322 </xsl:template>
0323
0324 <!-- **** main template **************************************************************** -->
0325 <xsl:template match="/">
0326
0327         <!-- determine the maximum thumbnail dimensions;
0328              the height needs to be passed to all templates for
0329              proper padding of thumbnails -->
0330         <xsl:variable name="max_thumb_width">
0331                 <xsl:for-each select="/collections/collection/image">
0332                         <xsl:sort select="thumbnail/@width" data-type="number" order="descending"/>
0333                         <xsl:if test="position()=1">
0334                                 <xsl:value-of select="thumbnail/@width"/>
0335                         </xsl:if>
0336                 </xsl:for-each>
0337         </xsl:variable>
0338         <xsl:variable name="max_thumb_height">
0339                 <xsl:for-each select="/collections/collection/image">
0340                         <xsl:sort select="thumbnail/@height" data-type="number" order="descending"/>
0341                         <xsl:if test="position()=1">
0342                                 <xsl:value-of select="thumbnail/@height"/>
0343                         </xsl:if>
0344                 </xsl:for-each>
0345         </xsl:variable>
0346
0347
0348         <!-- create thumb_size.css specifying thumbnail width/height
0349              based on the maximum thumbnail dimensions -->
0350         <exsl:document href='thumb_size.css' method="text">
0351 li {
0352         width: <xsl:value-of select="$max_thumb_width + 20"/>px;
0353         height: <xsl:value-of select="$max_thumb_height + 40"/>px;
0354 }
0355
0356 li a {
0357         min-height: <xsl:value-of select="$max_thumb_height + 21"/>px;
0358 }
0359
0360 div.select {
0361         min-height: <xsl:value-of select="$max_thumb_height + 72"/>px;
0362 }
0363         </exsl:document>
0364
0365         <!-- If there is only one collection in the gallery, make
0366              index.html the collection page; otherwise create a
0367              collection list page.  -->
0368         <xsl:choose>
0369                 <xsl:when test="count(collections/collection) &gt; 1">
0370                         <xsl:call-template name="collectionListPage">
0371                                 <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
0372                                 <xsl:with-param name="max_thumb_width"><xsl:value-of select="$max_thumb_width"/></xsl:with-param>
0373                         </xsl:call-template>
0374
0375                 </xsl:when>
0376                 <xsl:otherwise>
0377                         <xsl:for-each select="collections/collection">
0378                                 <xsl:call-template name="collectionPage">
0379                                         <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
0380                                         <xsl:with-param name="max_thumb_width"><xsl:value-of select="$max_thumb_width"/></xsl:with-param>
0381                                 </xsl:call-template>
0382                         </xsl:for-each>
0383                 </xsl:otherwise>
0384         </xsl:choose>
0385 </xsl:template>
0386
0387
0388 </xsl:transform>