HTML-galerij

Overzicht

De HTML-galerij is een hulpmiddel voor exporteren van een set albums of afbeeldingen naar een HTML-pagina.

Dit krachtige hulpmiddel kan uw albums exporteren naar een galerij met HTML-compliant webafbeeldingen. U kunt gemakkelijk de afbeeldingen of mappen exporteren naar een HTML-pagina en veel ontwerpen en parameters voor de weergave van HTML instellen. UTF-8 codering wordt gebruikt voor de beste internationalisatie.

De assistent gebruiken

De selectiemodus voor de HTML galerijpagina

Om het hulpmiddel te starten, gebruik Hulpmiddelen ‣ HTML-galerij aanmaken Ctrl+Alt+Shift+H of het bijbehorende pictogram uit het tabblad Hulpmiddelen in de rechter zijbalk. Het hulpmiddel toont een weergave om de te exporteren inhoud te selecteren: ofwel uit de huidige selectie van items of uit een lijst met albums. De modus selectie van Albums biedt u het selecteren van items uit albums die u wilt exporteren naar HTML. Activeer de respectievelijke albums uit de hiërarchisch geneste lijst. U kunt de volgende drie tabs Tags, Zoekopdrachten en Labels gebruiken om uw selectie gebaseerd op tags, labels of vorige zoekresultaten in digiKam te verfijnen.

De HTML galerijpagina om items te selecteren

De volgende stap is het selecteren van een Thema om de galerij te genereren.

De HTML galerijpagina om het thema te selecteren

Afhankelijk van het gekozen thema kunt u extra opties hebben voor het fijn afstemmen van het uiterlijk van de galerij.

De volgende schermafdruk toont de configuratie van de themaparameters (hier bijvoorbeeld voor het thema Klassiek).

De HTML galerijpagina om de themaparameters af te regelen

Voor alle geselecteerde thema’s kunt u de instellingen voor de afbeeldingen en miniaturen in de galerij aanpassen.

De HTML galerijpagina om de eigenschappen van afbeeldingen en miniaturen af te regelen

In de sectie Volledige afbeeldingseigenschappen kunt u ofwel de gewijzigde afbeeldingen of de origineel gebruikte afbeelding opslaan.

Voor gewijzigde afbeeldingen kunt u als uitvoerformaat JPEG (kleinste bestandsgrootte, maar met verlies) en PNG (zonder verlies en vrije licentie) en specifieke compressiemogelijkheden van de afbeelding. Als schijfruimte van belang is activeer de compressie van de doelafbeelding en verlaag het compressieniveau van de standaard van de host-applicatie.

Met activering van het vakje Max. grootte kunt u de maximum grootte van de doelafbeelding (in pixels) instellen met de draaischakelaar rechts. Afbeeldingen groter dan deze waarde zullen daarnaar omlaag geschaald worden, maar kleinere afbeeldingen zullen niet gewijzigd worden.

Notitie

Als het JPEG bestandsformaat is geselecteerd voor grootte wijzigen van de doelafbeeldingen, zal alle Exif-informatie worden behouden uit de originele JPEG bestanden.

De sectie Miniatuureigenschappen biedt u het instellen van het Formaat, de Kwaliteit en Grootte voor de miniaturen in de galerij.

De HTML galerijpagina om de uitvoer te configureren

Deze pagina definieert de instellingen van waar en hoe de galerij met al zijn geassocieerde afbeeldingen op te slaan. Selecteer een map of voeg een nieuwe map toe met schrijftoegang waar u de galerij om in te schrijven wilt hebben. Twee submappen met de naam van uw albummap en de themanaam zal gemaakt worden die alles bevatten.

Een voortgangsdialoog wordt getoond om terugkoppeling te geven aan de gebruiker. Druk op de knop Annuleren als u het proces in deze fase wilt afbreken.

De HTML galerijpagina om de voortgang te tonen tijdens het genereren van de galerij

Tenslotte wordt de gegenereerde HTML-galerij getoond in een browser.

De browser die de HTML galerij aan het einde toont

Een nieuw thema aanmaken

Het hulpmiddel HTML-galerij kan gemakkelijk erg verschillende sites produceren gebaseerd op thema’s. Dit hoofdstuk verklaart hoe een nieuw thema aan te maken.

Hoe te beginnen

Een thema is een map die minstens twee bestanden bevat:

• Een Bureaubladbestand die het thema beschrijft.

• Een bestand template.xsl om de HTML-bestanden te genereren.

Wanneer het hulpmiddel actief is, doet het hetvolgende:

• Maakt een uitvoermap.

• Voor elke afbeeldingenverzameling:

  • Maakt een map aan.

  • Genereert miniaturen (standaard vierkant).

  • Genereert volledige afbeeldingen.

  • Optioneel kopieert originele afbeeldingen.

• Kopieert de themamap naar de uitvoermap.

• Genereert een XML-bestand die de afbeeldingenverzameling beschrijft: gallery.xml.

• Genereert de HTML-bestanden door template.xsl op gallery.xml toe te passen.

Het Bureaubladbestand

Het bureaubladbestand beschrijft het thema. De informatie die het bevat wordt gebruikt in de selectiepagina van het thema van het hulpmiddel.

Het is een INI bestand en het er uit als dit:

[Desktop Entry]
Type=Theme
Name=Hello World
Comment=A demonstration theme

[X-HTMLGallery Author]
Name=The Author
Url=http://example.com/themes/helloworld

[X-HTMLGallery Preview]
Name=Preview's Caption
Url=preview.png

Het bureaubladbestandsformaat wordt gebruikt om vertalingen van items te faciliteren. Als u kijkt in het bureaubladbestand voor een van de thema’s geleverd met het hulpmiddel, dan zult u iets als het volgende vinden:

[Desktop Entry]
Name=Simple
Name[br]=Eeun
Name[cs]=Jednoduchý
Name[cy]=Syml
Name[da]=Simpel
...

Het mooie hiervan is dat wanneer uw thema geïntegreerd raakt in standaard thema’s van de HTML Gallery, zullen vertalers voor u het bureaubladbestand internationaliseren.

Het bestand afbeeldingsvoorbeeld gebruikt om het thema in de assistent te illustreren zal geplaatst worden in de hoofdmap van het thema.

Een nieuw thema wordt aangemaakt uit een andere

De gemakkelijkste manier om te starten is het kopiëren van een thema en het te wijzigen. Mappen zijn gewoonlijk te vinden onder Linux in /usr/share/apps/digikam/themes/. Schrijven in deze map vereist toegang als root, we zullen daar dus niet ons thema aanmaken - in plaats daarvan doen we het volgende vanuit een console:

Maak een themamap aan in uw thuismap:

mkdir -p ~/.local/share/digikam/themes/

• Ga naar deze map:

cd ~/.local/share/digikam/themes/

Kopieer het thema sneeuw naar deze map, onder een nieuwe naam sneeuw2:

cp -r /usr/share/apps/digikam/themes/snow snow2

Hernoem het bureaubladbestand volgens:

cd snow2
mv snow.desktop snow2.desktop

Bewerk sneeuw2.desktop om alle items Name[…] te verwijderen en vervang Name=Sneeuw door Name=Sneeuw 2.

U bent klaar, u kunt nu digiKam openen en het hulpmiddel HTML Gallery starten, het thema Sneeuw 2 zou moeten verschijnen in de themalijst.

HTML genereren met XSL-regels

Het bestand template.xsl is verantwoordelijk voor het genereren van de HTML bestanden uit het bestand gallery.xml. Het is een standaard ini-stijl bestand en ziet er uit als dit:

<?xml version="1.0" encoding="UTF-8"?>
<collections>
 <collection>
  <name>Name of first collection</name>
  <fileName>collection_folder</fileName>
  <comment>Collection comment</comment>
  <image>
   <title>Image Title</title>
   <description>Image Description</description>
   <date>2009-08-27T09:53:26</date>
   <full fileName="pict1279.jpeg" height="450" width="600"/>
   <thumbnail fileName="thumb_pict1279.jpeg" height="80" width="80"/>
   <!-- If there is an original image, you will get the 'original' tag -->
   <original fileName="original_pict1279.jpeg" height="3000" width="4000"/>

  </image>
  <image>
   <title>Image Title</title>
   <date>2009-08-27T09:55:33</date>
   <description>Image Description</description>
   <full fileName="pict1280.jpeg" height="450" width="600"/>
   <thumbnail fileName="thumb_pict1280.jpeg" height="80" width="80"/>
   <original fileName="original_pict1279.jpeg" height="3000" width="4000"/>
  </image>
  ...
 </collection>

 <collection>
  <name>Name of second collection</name>
  ...
 </collection>
</collections>

We zullen de XSLT-syntaxis hier niet uitleggen, u zou in staat moeten zijn om de documentatie die u nodig hebt op het internet te vinden. We bevelen aan om met de XSLT-inleiding hier XSLT te leren.

Het is het niettemin waard op te merken dat u gebruik kan maken van EXSLT, een set extensies aan XSLT. Speciaal, het exslt:documentelement is heel erg nuttig omdat het u in staat stelt om meerdere documenten te genereren uit hetzelfde bestand.

Hulpmiddel HTML-galerij legt geen beperkingen op aan de organisatie van HTML-bestanden. U kunt één bestand per afbeelding genereren of slechts één per verzameling. U kunt zich voorstellen dat een thema dat slechts één HTML-bestand bevat en JavaScript gebruikt om de verschillende afbeeldingen te tonen, er is ook een thema dat frames gebruikt. U kunt zelfs CSS-bestanden on-the-fly genereren als u dat wilt.

Over vertalingen

U zou geen tekst moeten hard coderen in het sjabloon, maar u zou, in plaats daarvan, de i18n parameters moeten gebruiken. Bijvoorbeeld in plaats van dit gebruiken:

<a href="previous">Previous</a>
| <a href="next">Next</a>

Doe dit:

<a href="previous"><xsl:value-of select="$i18nPrevious"/></a>
| <a href="next"><xsl:value-of select="$i18nNext"/></a>

Het is uitgebreider, maar op deze manier zal uw gebruiker gelokaliseerde HTML-uitvoer krijgen.

Als u i18n parameters in attributen wilt gebruiken, doe het zoals dit:

<a href="previous" title="{$i18nPrevious}"><img src="previous.png"/></a>
| <a href="next" title="{$i18nNext}"><img src="next.png"/></a>

Voor nu, de beschikbare algemene i18n parameters zijn:

• i18nPrevious

• i18nNext

• i18nCollectionList

• i18nOriginalImage

• i18nUp

En de afbeeldingseigenschappen zijn:

• i18nexifimagemake (“Make”)

• i18nexifimagemodel (“Model”)

• i18nexifimageorientation (“Afbeeldingsoriëntatie”)

• i18nexifimagexresolution (“X-resolutie van afbeelding”)

• i18nexifimageyresolution (“Y-resolutie van afbeelding”)

• i18nexifimageresolutionunit (“Resolutie-eenheid van afbeelding”)

• i18nexifimagedatetime (“Datum tijd van afbeelding”)

• i18nexifimageycbcrpositioning (“YCBCR Positionering”)

• i18nexifphotoexposuretime (“Belichtingstijd”)

• i18nexifphotofnumber (“F-getal”)

• i18nexifphotoexposureprogram (“Belichtingsindex”)

• i18nexifphotoisospeedratings (“ISO-snelheid”)

• i18nexifphotoshutterspeedvalue (“Waarde sluitersnelheid”)

• i18nexifphotoaperturevalue (“Waarde lensopening”)

• i18nexifphotofocallength (“Brandpuntsafstand”)

Als u meer i18n parameters wilt, dien een verzoek in bij het Projectteam.

Afbeeldingen en CSS-bestanden

U bent vrij om afbeeldingen, CSS-bestanden of andere bestanden in uw thema te gebruiken. Stop ze gewoon in de themamap en het hulpmiddel zal ze in de uitvoermap kopiëren.

Originele afbeeldingen

Zoals eerder uitgelegd, als de gebruiker de optie Originele afbeeldingen invoegen selecteert, zal het bestand gallery.xml de tags <original /> bevatten. Als deze tag aanwezig is zou de afbeeldingspagina een koppeling moeten bevatten naar om de originele afbeelding te downloaden.

Hier is een voorbeeld:

<xsl:if test="original/@fileName != ''">
      <p>
           <a href="{original/@fileName}"><xsl:value-of select="$i18nOriginalImage"/></a>
      </p>
 </xsl:if>

Niet-vierkante miniaturen

Standaard zijn miniaturen bijgesneden zodat ze vierkant zijn en hebben ze allemaal een identieke grootte. Dit maakt het gemakkelijker om de HTML/CSS stijl te maken. Als uw thema echter gereed is om om te gaan met miniaturen van verschillende groottes, voeg dan dit fragment toe aan uw bureaubladbestand:

[X-HTMLGallery Options]
Allow-non-square-thumbnails=true

De gebruiker zal dan in staat zijn om te selecteren of vierkanten al dan niet vierkant moeten zijn. Voor niet-vierkante miniaturen wordt de gespecificeerde miniatuurgrootte de grootte van de langere zijde van de miniatuur.

Themaparameters

U zou misschien een manier voor de gebruiker willen leveren om uw thema aan te passen, u zou bijvoorbeeld een paar alternatieve CSS-bestanden kunnen leveren of de gebruiker de achtergrondkleur laten kiezen. Dat is gemakkelijk te doen.

Een parameter declareren

Eerst moet u uw parameter declareren. Bewerkt uw bureaubladbestand en voeg iets toe als dit:

[X-HTMLGallery Parameter bgColor]
Name=Background Color
Type=color
Default=#123456

Start nu het hulpmiddel en selecteer uw thema, na indrukken van volgende, zou u een optiepagina moeten zien met een kleurknop geïnitialiseerd op de kleur #123456.

Parameterwaarde gebruiken

In template.xsl kunt u de waarde van uw parameter ophalen zoals dit:

<xsl:value-of select="$bgColor"/>

Om de achtergrondkleur van de tag body te wijzigen, zou u zoiets moeten schrijven als dit:

<body bgcolor="{$bgColor}">
...
</body>

Referentie naar parameter

Hier is een meer complete beschrijving van de manier om een parameters te declareren. Een parameter wordt gedeclareerd dooreen sectie genaamd X-HTMLGallery Parameter eenNaam. eenNaam zou vervangen moeten worden door de naam die u wilt gebruiken in template.xsl.

• De sleutel Name definieert de tekst die getoond zal worden in de optiepagina. Omdat dit een bureaubladbestand is, kan het vertaald worden zoals de andere sleutels.

• De sleutel Type definieert het type van de parameter. Op dit moment kan het zijn een van:

  • opschrift

  • tekenreeks

  • kleur

  • lijst

  • int

• De sleutel Default definieert de standaard waarde van de parameter.

Lijst met parametersleutels

Een lijstparameter laat de gebruiker een item uit een lijst selecteren. Om de beschikbare items te declareren moet u twee sets sleutels gebruiken: Value-N and Caption-N, waar N de positie van het item is, beginnend vanaf 0.

Value-N is de interne waarde van het item. Dit is de waarde die aan de parameter zal worden gegeven.

Caption-N is de getoonde waarde van het item. Dit is de tekst die getoond zal worden in de lijst.

Hier is een voorbeeld: de stijl parameter uit het Eenvoudige thema:

[X-HTMLGallery Parameter style]
Name=Style
Type=list
Default=natural.css
Value-0=natural.css
Caption-0=Natural
Value-1=dark.css
Caption-1=Dark

Zoals u kunt zien, de gebruiker is in staat te kiezen tussen Natuurlijk of Donker. Afhankelijk van de keuze van de gebruiker, <xsl:value-of select=’$style’/> zal ofwel natural.css of dark.css worden.

Parametersleutels van int

Een int-parameter laat de gebruiker een geheel getal kiezen met een draaischakelaar. Naast de standaard waarde, kunt u de minimale en maximale waarden definiëren, met de sleutels Min en Max.

Hier is een voorbeeld:

[X-HTMLGallery Parameter size]
Name=Size
Type=int
Default=12
Min=4
Max=28

Parametersleutels voor tekenreeks en opschrift

Een tekenreeksparameter laat de gebruiker een enkele tekenreeks invoeren om bijvoorbeeld configuratieregels in te stellen. Een opschriftparameter laat de gebruiker een meervoudige tekenreeks invoeren met ondersteuning voor spellingcontrole om een Beschrijving of een Titel in te stellen.

Laatste woorden

Dit is het einde van dit hoofdstuk, dus nu is de tijd voor u gekomen om creatief te worden en nieuwe thema’s toe te voegen.

Wanneer u klaar bent, aarzel dan niet om uw werk in te dienen voor een officiële integration in digiKam. Bedenk you trots u zult zijn om te zien dat uw nieuwe thema wordt ingevoegd in de officiële lijst. Zie de Bijdragepagina uit de projectwebsite van digiKam voor details.