Le web de Dominique Guebey – Images

Page web  : http://www.dg77.net/galerie/demo/galery.htm

Aller au principal/Skip to main content
   D o m i n i q u e   G u e b e y    J u n g l e      Images
VERSION EN FRANCAIS

XML-managed virtual gallery

Author : Dominique Guebey - http://www.dg77.net/galerie/demo/

Summary :
Advantages of this method | Structure and principles | Sample files set | DTD file, basic documentation | XML file, data storage | XSL file and XSL Transformation | HTML files produced by xslt | CSS file | Today's limits / future evolutions | Modifications / improvements Log | Documentation and resources about XML/XSLT | Terms of usage |

Introduction

This document describes a solution to create a virtual gallery, from informations organized in an XML file. HTML pages, readable with web browser, are automatically generated by an XSL transformation sheet (XSLT) given here.

Preliminary preparation of image files (conversion, formating, dimensioning…) is not subject of this, and is assumed to be already done.

Advantages of this method

Manualy editing an HTML file for each picture is quickly a boring work, which can turn to forced labour when you have need to change pages presentation or organization. An easy solution is to load the selected picture directly, without any frame, texte, back link etc., but it is technicaly and aestheticaly unsatisfying.

"Dynamic" generation methods are often proposed : but they involve use of server systems and/or specific programming languages or, worse, specifice software. More, these solutions generaly output pretty dirty html.

The present xml-based method consists in updating a plain XML file, a job you can do with a text editor, the simpliest computer's tool (don't mix with a word processor). Then, a standard program (XSLT processor) builds web pages. Beside perenity and portability, an interest of this method is that you do not have to do any programming nor "scripting" job, to display the data you registered.

XML is a non-proprietary standard, well stablished, easy to use, very flexible, for which many tools are freely available on all computer's platforms. The XML definition here given includes RDF and RDFPIC optional elements, that allow including metadata, following W3C standards, and use of predefined tools to index, identify and retrieve pictures on a Web knoledge basis.

Other applications are possible : with the same file a catalog can be generated, or building interelation with other documentation or database (with xslt or any other method) ; and from XML there are various means to output other documents types (pdf…).

Structure and principles

The gallery is made of an albums list, and/or a plates list ("planche"), and/or a pictures list ("image").

An album is compound with a plates list, and/or a pictures list.

A plate is made of a pictures list.

In a pictures list, a picture can illustrate each element (see "icone" element in xml definition). Choosing one of tehm opens a page with a picture ("img" element), but this is optional.

All preceeding elements (galerie, album, planche, image) begin with a "description" element. The description must have title and file elements. The later gives name of the file that will be created and diplayed ; if it is empty, no file will be generated, an option one can prefer for pictures.

Free text can be added on top or above a page. They can have links to other local or web page, or opening mail software ; presentation attributes can also be added (bold, underscore, italic, small or big characters), and you can also include pictures.

Author, copyright and keywords attributes can be added. These applies to lower levels if those do not have one (for instance, the author mentioned in the album will be applied to plates and pictures) ; so it will suffice to enter them only once.

Sample files set

Base files :

Tools and distribution :

Samples :

DTD file, base documentation

<!-- La galerie, composee d'albums, et/ou de planches, et/ou d'images -->
<!-- The gallery, made of books, and/or plates, and/or pictures -->
<!ELEMENT galerie (description,(album|planche|image)*)>
<!ATTLIST galerie xmlns CDATA #IMPLIED>
<!-- L'album, compose de planches, et/ou d'images -->
<!-- The book, made of plates, and/or pictures -->
<!ELEMENT album (description,(planche|image)*)>
<!-- La planche, composee d'images -->
<!-- The plate, made of pictures -->
<!ELEMENT planche (description,image*)>
<!-- L'image / The picture-->
<!ELEMENT image (description,ref?,icone?,img?,alticone?,altimage?,titicone?,titimage?)>

<!-- Description commune / Common description -->
<!ELEMENT description (titre,fichier,auteur*,copyright*,categorie?,motsclef?,
        texte*,textf*,ret?)>
<!-- Obligatoire / Mandatory (title and file) -->
<!ELEMENT titre (#PCDATA)>
<!ELEMENT fichier (#PCDATA)>
<!-- Facultatif / Optional (author, copyright, category, keywords) -->
<!ELEMENT auteur (#PCDATA)>
<!ELEMENT copyright (#PCDATA | link)*>
<!ELEMENT categorie (#PCDATA)>
<!ELEMENT motsclef (#PCDATA)>
<!ELEMENT ret (#PCDATA)>
<!ATTLIST ret url CDATA #REQUIRED>

<!-- Elements propres a l'objet image / Specific data for pictures -->
<!-- Ref : ex numero diapositive, nomenclature museographique etc. / 
        Reference to identify the picture -->
<!ELEMENT ref (#PCDATA)>
<!-- La petite image qui sert dans l'index / Image file used in the picture lists -->
<!ELEMENT icone (#PCDATA)>
<!-- Attributs largeur/hauteur, cadre - Width/Height, frame and border (cf CSS) -->
<!ATTLIST       icone iconw CDATA #IMPLIED
                      iconh CDATA #IMPLIED
                      iconfram CDATA #IMPLIED
                      iconbord CDATA #IMPLIED>
<!-- L'image / Image file used in the separate HTML page -->
<!ELEMENT img (#PCDATA)>
<!-- Attribut largeur/hauteur Width/Height -->
<!ATTLIST       img imgw CDATA #IMPLIED
                    imgh CDATA #IMPLIED
                    imgfram CDATA #IMPLIED
                    imgbord CDATA #IMPLIED>
<!-- Alt… : le titre et le texte de remplacement / Title and Default texts -->
<!ELEMENT alticone (#PCDATA)>
<!ELEMENT altimage (#PCDATA)>
<!ELEMENT titicone (#PCDATA)>
<!ELEMENT titimage (#PCDATA)>

<!-- TEXTE -->
<!-- Texte en debut de page / Text before -->
<!ELEMENT texte (#PCDATA|link|u|i|b|small|big|image)*>
<!-- Texte en fin de page / Text after -->
<!ELEMENT textf (#PCDATA|link|u|i|b|small|big|image)*>
<!-- On peut inserer des liens dans un texte -->
<!-- A text may include links (mail or url) -->
<!ELEMENT link (#PCDATA)>
<!ATTLIST link type (mail|url) "url"
                  url CDATA #REQUIRED>
<!-- Texte souligne / Underlined -->
<!ELEMENT u (#PCDATA|i|b)*>
<!-- Texte en italique / Italic -->
<!ELEMENT i (#PCDATA|u|b)*>
<!-- Texte en gras / bold -->
<!ELEMENT b (#PCDATA|u|i)*>
<!-- Texte reduit / Small -->
<!ELEMENT small (#PCDATA|u|i|b)*>
<!-- Texte grossi / Big -->
<!ELEMENT big (#PCDATA|u|i|b)*>

This "Document Type Definition" with commentaries (lines begining with "<!-- ") gives basic information for each element and attribute. The DTD can be used by XML editors and XSLT programs (see sections about XML and XSL). These programs are called validating if they check conformity of file with DTD.

XML file, data storage

In the XML file, you have to add elements content, within their start and end tags, following the arborescent structure defined in the DTD. Let's remember the basics of XML :

The following is a simplified sample : 2 pictures directly diplayed on the gallery. This file can be retrieved to start working on (cf sample.xml) :

<?XML version="1.0" encoding="ISO-8859-1"?>
<!--?xml:stylesheet version="1.0" type="text/XSL" href="galerie.xsl"?-->
<!DOCTYPE galerie SYSTEM "galerie.dtd">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
      xmlns:rdfs="http://www.w3.org/TR/1999/PR-rdf-schema-19990303#"
      xmlns:s0="http://sophia.inria.fr/~enerbonn/rdfpiclang#"
      xmlns:s1="http://www.w3.org/2000/PhotoRDF/dc-1-0#"
      xmlns:s2="http://www.w3.org/2000/PhotoRDF/technical-1-0#">
<galerie xmlns="http://ns.dg77.net/XML/">
        <d:description>
                <titre>Titre général de la galerie</titre>
                <fichier>sample.htm</fichier>
                <texte>Texte initial, facultatif. Ci-dessus dans "fichier" nom
                                  (avec chemin éventuellement) du fichier HTML à sortir.</texte>
        </description>
        <image>
                <description>
                        <titre>Titre de la première image</titre>
                        <fichier>image01.htm</fichier>
                        <texte>Commentaire de l'image, sorti au-dessus. Dans
                                                        les éléments icone et img, mettre le (chemin)/nom
                                                        des fichiers images.</texte>
                </description>
                <icone>img01.jpg</icone>
                <img>img02.jpg</img>
        </image>
        <image>
                <description>
                        <titre>2e image</titre>
                        <fichier>image02.htm</fichier>
                        <textf>Commentaire de l'image, sorti après</textf>
                </description>
                <icone>img03.jpg</icone>
                <img>img04.jpg</img>
        </image>
</galerie>
</rdf:RDF>

The first line "<?xml" is mandatory ; it stipulates iso-8859-1 (latin alphabet with accents) ; it is better to use a good text editor (such as Jext) to master file encoding.

"<?xml stylesheet" specification makes possible to a browser with xslt capabilities to read directly the XML file and output data in html form after transforming it using xslt (see following). For the "gallery" application, it does not work, for the existing transformation only one file that must be separated into the specified html elements. Cf "html files output by xslt". "xsl:stylesheet" line is kept only for information/documentation.

"<!DOCTYPE" line is linked to the Document Type Definition (DTD file). SYSTEM says that the file is local. You can add another path to galerie.dtd.

As said in initial description, XML file is included in an RDF enveloppe. That allows to add external elements without modifying XML file definition.

In the "galerie" root element, a namespace is specified("xmlns" attribute) ; it allows further addition of element by other user. See following about XSLT.

The following is a more rich sample, a book with a plate and two pictures (cf demo.xml), and an RDFPIC description of a picture :

<?XML version="1.0" encoding="ISO-8859-1"?>
<!--?xml:stylesheet version="1.0" type="text/XSL" href="galerie.xsl"?-->
<!DOCTYPE galerie SYSTEM "galerie.dtd">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
      xmlns:rdfs="http://www.w3.org/TR/1999/PR-rdf-schema-19990303#"
      xmlns:s0="http://sophia.inria.fr/~enerbonn/rdfpiclang#"
      xmlns:s1="http://www.w3.org/2000/PhotoRDF/dc-1-0#"
      xmlns:s2="http://www.w3.org/2000/PhotoRDF/technical-1-0#">
<galerie xmlns="http://ns.dg77.net/XML/">
   <description>
          <titre>Galerie de démonstration</titre>
          <fichier>demo.htm</fichier>
          <texte><link type="url" url="../index.html">Ceci est un lien pour aller
                        ailleursen local</link><link type="url" url="http://www.w3.org">
                        Et ceci est un lien qui va sur Internet</link></texte>
          <texte>La galerie comporte un ou plusieurs albums, et/ou une ou plusieurs
                        planches, et/ou une ou plusieurs images.
                         <link type="mail" url="chmoltok@bigfoot.com">CONTACT</link>
          </texte>
          <textf><b>Texte en gras</b><i> Texte en italique</i>
                        <u> Texte souligné </u><small> Petits caractères</small>
                        <big> Gros caractères</big> </textf>
          <ret url="../index.html">RETOUR</ret>
   </description>
   <album>
          <description>
                 <titre>Album de démonstration</titre>
                 <fichier>album1.htm</fichier>
          <auteur>Dominique Guebey</auteur>
          <copyright>2003 Dominique Guebey</copyright>
          <motsclef>galerie,XML,XSLT,documentation,</motsclef>
                 <texte>L'album peut comporter une ou plusieurs planches, et/ou
                                des images.</texte>
          </description>
          <image>
                 <description>
                        <titre>image decorative</titre>
                        <fichier/>
                 </description>
                 <icone iconw="33">img90.jpg</icone>
                 <alticone>imagette decorative</alticone>
          </image>
          <planche>
                 <description>
                        <titre>Première planche</titre>
                        <fichier>planche1.htm</fichier>
                        <copyright>2003, Dominique Guebey</copyright>
                        <texte>On donne ci-dessous la liste des images,
                                        si-possible illustrée de vignettes</texte>
                 </description>
                 <image>
                        <description>
                           <titre>Première image de la première planche</titre>
                           <fichier>image01.htm</fichier>
                           <motsclef>racewalking</motsclef>
            <copyright>2003, cf 
                <link type="url" url="http://walk.bigfoot.net/marche/photo/usage.htm">
                conditions d'utilisation</link>
            </copyright>
                        </description>
                        <icone iconw="100">img01.jpg</icone>
                        <img imgw="500">img02.jpg</img>
                        <alticone>Texte de remplacement imagette</alticone>
                        <altimage>Texte alternatif de l'image</altimage>
                 </image>
                 <image>
                        <description>
                           <titre>2e image de la première planche</titre>
                           <fichier>image02.htm</fichier>
                           <texte>
                                  <u><b>Commentaire de l'image 2 de la planche 1</b>
                                  </u>
                           </texte>
                        <rdf:Description rdf:about="http://walk.bigfoot.net/marche/photo/stages.htm/st840004.jpg">
                          <s0:XMLlang>fr</s0:XMLlang>
                          <s1:creator>Dominique Guebey</s1:creator>
                          <s1:relation>Font Romeu</s1:relation>
                          <s1:identifier>#3416</s1:identifier>
                          <s1:description>Stage de marche hivernal, 
                          Denis Terraz, Martial Fesselier, Gerard Lelievre</s1:description>
                          <s1:title>Col du Calvaire</s1:title>
                          <s1:rights>http://walk.bigfoot.net/marche/photo/usage.htm</s1:rights>
                          <s1:subject>Sport</s1:subject>
                          <s1:format>image/jpeg</s1:format>
                          <s1:date>1984-02-25</s1:date>
                          <s2:camera>SLR 35mm Minolta X500</s2:camera>
                          <s2:lens>135mm</s2:lens>
                          <s2:film>Kodachrome 64</s2:film>
                        </rdf:Description>
                        </description>
                        <ref>#3416</ref>
                        <icone iconw="90">img03.jpg</icone>
                        <img imgw="720">img04.jpg</img>
                        <alticone>Texte alternatif de l'image</alticone>
                        <altimage>img04.jpg</altimage>
                 </image>
          </planche>
   </album>
</galerie>
</rdf:RDF>

XSL file and XSL Transformation

An XSL transformation reads an xml file, and output another file formated according specific rules. The XSLT file gives these rules and is itself an XML file. Generaly XSLT is used to build HTML, TXT or another XML file.

To match XML file, a namespace is defined, identified by "dg77" prefix (see "xmns:dg77=…") ; namespaces are useful to take advantage of the "extensibility" of XML : anybody can add one's own elements or attributes, simply adding his own namespace. No change will be necessary to the preexisting data structure.

XSL transformation involves an xslt processor. Many are available, often free software, see "resources" below. Among them, Xalan is a well-known xslt processo, as is the Xerces parser. They are available in both versions Java and C++, making them widely usable. If your company uses an IBM AS400 (alias "iSeries"), Xalan et Xerces can be found in the IFS, under /QIBM/ProdData/OS400/xml/lib. Ask system manager. Each .jar files can be copied on a floppy.

See under a sample command for Microsoft PC, used to launch Xalan in its Java version. Replace "c:\j2sdk1.4.1_01\lib\tools.jar" with your JRE (Java run-time) location ; xalan.jar and xerces.jar are granted to be in the "path", and galerie.xsl in the current directory. The first parameter (%1) contains the name of xml file, the second (%2) the name of file to output. Adapt/add path specification according to your system.

java -classpath c:\j2sdk1.4.1_01\lib\tools.jar;xalan.jar;xerces.jar
         org.apache.xalan.xslt.Process -in %1 -xsl galerie.xsl -out %2

HTML files produced by xslt

Files are generated as valid xhtml 1.1. This is not coquetterie but the normal way to preserv long term evolution. Moreover, as an XML file, you can use XSL-FO to build PDF files or other printable formats.

On top of each page a link to the preceding page is generated. For instance : if an "album" page contains plates or pictures list, each plate ou image page will begin with a link to come back to the album.

The name of the file to process is given to the Transformation Sheet as a parameter. If there is no filename given, all html files are generated within one block, it will be necessary to cut it into separate parts. XSLT 1.0 does not give capactity to output several files from one processing (although some processor have this faculty among their options). The choosen solution has the advantage of better compatibility. You can quickly get separated files with a simple text editor : choose "save as" for each html file, then reopen them and cut unuseful lines.

Commentaries lines give names of files. Each of them must begin with "DOCTYPE" line followed by "<html>" tag ; the last line is the "</html>" one. Sample :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
        "http://www.w3.org/TR/XHTML11/DTD/XHTML11.dtd">
<HTML xmlns="http://ns.dg77.net/XML/">
<!-- ******** Fichier a sortir : image02.htm ******** -->
<head>
<meta http-equiv="Content-Type" content="application/XML+XHTML; charset=iso-8859-1" />
<meta name="keyword" content="galerie,XML,XSLT,documentation," />
<link media="print" href="galerie_prt.css" type="text/css" rel="stylesheet" />
<link media="screen" href="galerie.css" type="text/css" rel="stylesheet" />
<title>2e image de la première planche</title>
</head>
<body class="image">
<h2>2e image de la première planche</h2>
<div class="navg">
<a href="planche1.htm">[RETOUR/<i xml:lang="en-us">BACK</i>]</a>
</div>
<p>
         <span class="u">
                <b>Commentaire de l'image 2 de la planche 1</b>
          </span>
</p>
<table class="tabcentr">
<tr>
<td class="cadre">
<img src="img04.jpg" width="720" alt="img04.jpg" />
</td>
</tr>
</table>
<p>#3416</p>
<hr />
<div class="noprint">
<a href="#debut">[DEBUT/<i xml:lang="en-us">TOP</i>]</a>
</div>
<div>Auteur : </div>
<div>Dominique Guebey</div>
<div>Copyright : 
                                2003</div>
<div>
<small>Page générée 
Sunday-14/03/04-20:12:10 
par XSLT, voir / <i xml:lang="en-us">XSLT page generation, see : </i>
<a href="http://walk.bigfoot.net/galerie/demo/index.htm">dg77.net</a>
<span class="prinx">[http://walk.bigfoot.net/galerie/demo/]</span>
</small>
</div>
</body>
</HTML>

Résultat :

[RETOUR/BACK]

2e image de la première planche

[RETOUR/BACK]

Commentaire de l'image 2 de la planche 1

img04.jpg

#3416

[DEBUT/TOP]
Auteur :
Dominique Guebey
Copyright : 2003
Page générée Sunday-14/03/04-20:12:10 par XSLT, voir / XSLT page generation, see : www.dg77.net [http://www.dg77.net/galerie/demo/index.html]

CSS file

All generated HTML files use a stylesheet. See <link title="style" href="galerie.css" type="text/css" rel="stylesheet" /> line in the given sample. The CSS file (Cascading Style Sheet) contains presentation attributes.

It is mandatory to have the benefit of some presentation elements (underlining, centering) and the given general style. This CSS can be adapted (background colour or picture, characters sets, margins…), according to your taste or needs.

The background for image page is aproximately a 18% grey, as said for Kodak "grey chart", according to Ansel Adams indications to expose prints. More in this direction, images can be surrounded, for instance, with a blank margin using "cadre" classe offered. To do this, simply specify it in iconfram/iconbord and imgfram/imgbord attributes (see DTD) above.

Today's limits / future evolutions

Modifications / improvements Log

Documentation and resources about XML/XSLT

Voir : http://www.dg77.net/tekno/links.htm#xsl

Terms of usage

These elements and this documentation page can be used, modified and distributed, even with paiment, provided than the same licence apply to these elements.