|
Allgemeines
Das ist ein HTML Template für den Bildbrowser BreezeBrowser. Mit diesem Template kann man eine Bildergalerie im Stil der bekannten Plattform PBase erstellen. Natürlich muss der BreezeBrowser zuerst installiert werden bevor man das Template anwenden kann. Für die volle Funktionialität muss man die Version 2.8 (oder höher) installiert haben. Man muss die Software nicht gleich kaufen, die Testversion hat alle Funktionen die man braucht, jedoch ist die maximale Anzahl der Bilder eingeschränkt. Mein HTML Template "PBase" ist gratis. Eine kleine Aufmerksamkeit in Form einer Paypal-Spende ist jedoch jederzeit willkommen. :-)
|
|
Download
|
Das Template "PBase" wird installiert indem die Datei pbase.zip auf die Festplatte geladen und anschließend in den Templatefolder (üblicherweise in C:\Programme\BreezeSys\BreezeBrowser\templates) extrahiert wird. Am Ende sollte sich das Directory "pbase" im Templatefolder befinden.
|
|
HTML-Erstellung
Um das Template zu verwenden sollte man sich vorher mit dem HTML-Generator des BreezeBrowsers vertraut machen. Die (englischen) Hilfeseiten sind online.
Ab Version 2.8 des BreezeBrowsers gibt es zwei Template-spezifische Eingabefelder im HTML-Dialogfenster. Das PBase-Template nutzt diese zwei Variablen um den (PBase-)Stil und die (Quelle der) Bildtitel festzulegen. Unten im HTML-Dialogfenster findet man zwei Drop-down Listen: "Style:" auf der linken Seite und "Caption:" rechts. Am besten man probiert ein paar Stile aus um die Unterschiede zu sehen.
Der große Vorteil von diesem Template ist, dass man die Bilder in verschiedenen Größen anzeigen kann. So kann der Besucher, abhängig von seiner Bildschirmgröße, die beste Auflösung wählen. Dazu muss man allerdings die Bilder in den alternativen Größen in separaten Directories abspeichern. Will man z.B. seine Bilder in drei verschiedenen Auflösungen anbieten, dann muss man die HTML-Erstellung zwei mal mehr aufrufen. (mit größerer Pixeleinstellung). Dabei hilft die Möglichkeit verschiedene HTML-Einstellungen für eine Galerie zu speichern (neues Feature in Version 2.8). Im nächsten Absatz gibt es eine genauere Erklärung zur Erstellung der verschiedenen Bildgrößen.
|
|
Anpassen
Die folgenen Zeilen beschreiben die Variablen im File "settings.js", mit denen man das Template etwas anpassen kann. Um die Werte zu ändern muss man die Datei in einem Texteditor öffnen.
Anzahl der Zeilen und Spalten:
var numColumns = 4
var numRows = 3
Mit diesen zwei Variablen definiert man das Layout der Übersichtsseite. Anhand dieser Werte und der Bildanzahl ergibt sich automatisch die Anzahl der Übersichtsseiten.
EXIF-Daten:
var showExif = 1
Wird diese Variable auf 1 gesetzt erscheint eine Kurzinformation der Aufnahmedaten unterhalb jedes Bildes und ein Link ("full exif") zu einer detaillierten Ansicht.
Bildkommentar:
var showComment = 0
Setzt man diese Variable auf 1, dann wird der Bildkommentar unterhalb der Vollbilddarstellung angezeigt. Die Quelle für den Text ist das @caption@-Token, das entweder den JPG-Kommentar oder die IPTC-Caption beinhaltet, je nach den Einstellungen in den BreezeBrowser-Preferences.
Persönliche Information:
var myname = "Peter Berger"
var myhomepage = "http://www.peterberger.at"
var mygallery = "/galleries.html"
var copyright = "All images are copyrighted."
Lässt man diese Variablen leer dann werden folgende Defaultwerte verwendet: @owner@ für myname, @homeURL@ für myhomepage und "../" (=übergeordnetes Directory) für mygallery. Achtung: man kann in den BreezeBrowser-Preferences zwei verschiedene Quellen für @owner@ angeben.
Unterschiedliche Bildgrößen:
var defaultSize = 2
size[1] = "small"
size[2] = "medium"
size[3] = "large"
Mit der Feldvariablen "size" lassen sich verschiedene Bildgrößen definieren. Dabei gibt kein Limit - man kann so viel unterschiedliche Größen anbieten wie man möchte. Auch die Bezeichnungen lassen sich ändern, z.B. "klein" statt "small" oder "800x600" statt "large". Wichtig ist nur, dass man die Variable defaultSize auf einen gültigen Wert setzt (also nicht auf 3, wenn man nur 2 Größen definiert). Wie bereits erwähnt muss man die HTML-Erstellung für jede Größe extra starten. Am besten man wählt das Ziel-Directory und beginnt mit der Defaultgröße. Danach muss man die anderen Größen in Unterdirectories speichern. In obigem Beispiel wären das der Folder "size1" für die kleinen Bilder (small) und der Folder "size3" für die großen Bilder (large). Man beachte, dass es KEINEN Folder "size2" gibt, weil das die Defaultgröße ist!
Alternativ könnte man auch die "Proof"-Funktion im BreezeBrowser verwenden um die anderen Größen zu generieren. Das funktioniert deswegen, weil man nur die Bilder in den Unterdirectories benötigt (HTML-Files können gelöscht werden). Wichtig ist nur, dass die Bilddateien in den Unterdirectories die gleichen Namen haben wie im Hauptdirectory. Das heisst, wenn man die HTML-Seiten aktualisiert (wegen Änderungen im Text, Layout, Bildreihenfolge, etc.), dann muss man nur das Hauptdirectory neu erstellen und braucht sich nicht um die Bilder in anderen Größen zu kümmern. Wenn man dann noch "reuse existing images" anhakt geht das ruck-zuck.
Variationen statt unterschiedlicher Bildgrößen:
var sizename = "Variationen:"
var defaultSize = 1
size[1] = "Farbe"
size[2] = "S/W"
size[3] = "Sepia"
Anstatt die Bilder in verschiedenen Größen anzubieten kann man auch Variationen eines Bildes (bzw. Motivs) anzeigen! Mit der Variablen sizename kann man den Titel der Alternativbilder angeben, z.B. "Variationen:". In obigem Beispiel biete ich das gleiche Bild in Farbe, Schwarz/Weiss und Sepia-getönt an. Der Name der Unterdirectories bleibt allerdings gleich, also "size2" für die Schwarzweiss-Bilder und "size3" für die Sepia-Variante. Eine weitere Verwendungsmöglichkeit wäre, dass man unterschiedliche Ansichten eines Motivs anzeigt (von vorne, hinten und den Seiten). Weiter unten gibt es dazu ein Beispiel!
Vorschaubilder:
var navigAsThumbs = 1
var sizesAsThumbs = 1
Damit sind Vorschaubilder auf den Volldarstellungsseiten gemeint, nicht auf der Übersichtsseite. Wenn man die Variable navigAsThumbs auf 1 setzt werden neben den Links zum vorigen bzw. nächsten Bildes (previous bzw. next) kleine Vorschaubilder angezeigt. Setzt man die Variable sizesAsThumbs auf 1, dann werden Vorschaubilder für die Variationen angezeigt. Letzteres ist natürlich nur sinnvoll wenn man wirklich Variationen anzeigt und nicht das gleiche Bild in anderen Größen.
Um das zweite Feature zu nutzen müssen sich die Thumbnails in den Unterdirectories ("size1", "size2", ...) befinden, denn hier werden die Thumbnails in den Unterdirectories als Vorschaubilder verwendet. (Andernfalls werden die Thumbnails immer nur aus dem Hauptfolder verwendet!) Weiters sollte man beachten, dass sich die Thumbnails NICHT in einem weiteren Unterdirectory (z.B. "size1/thumbs") befinden. In den BreezeBrowser-Preferences könnte man das einstellen.
|
|
Beispiel 1
// Beispiel mit 3 Größen:
// ----------------------
var sizename = "other sizes:"
var defaultSize = 3
size[1] = "small"
size[2] = "medium"
size[3] = "large"
var showExif = 1
var showComment = 1
var navigAsThumbs = 0
var sizesAsThumbs = 0
// ----------------------
Diese Galerie kann jedes Bild in 3 verschiedenen Größen anzeigen. Der Browser merkt sich die gewählte Größe solange man durch die Galerie navigiert. Mit diesen Einstellungen ist man so nahe wie möglich an den originalen PBase-Galerien. Wie bereits erwähnt befinden sich die Bilder in small und medium in den Unterdirectories "size1" und "size2". Die Bilder in large sind im Hauptdirectory (gemeinsam mit den .htm- und .css-Dateien), weil "large" die Defaultgröße ist. Nach der Erstellung der Bilder in alen Größen kann man in den Unterdirectories die Thumbnails, die .htm und die .css-Dateien löschen. Die Texte unter den Bildern (auch in der "text view") kommen aus den JPG-Kommentarfeldern (showComment = 1). Für diese Galerie habe ich den berühmten PBase-Stil "webdev" verwendet.
|
|
Beispiel 2
// Beispiel mit Variationen:
// -------------------------
var sizename = "Variations:"
var defaultSize = 1
size[1] = "watercolor"
size[2] = "b/w"
size[3] = "original"
var showExif = 0
var showComment = 0
var navigAsThumbs = 0
var sizesAsThumbs = 1
// -------------------------
Dieses Beispiel zeigt verschiedene Variationen eines Bildes (anstatt verschiedene Größen). Das Hauptdirectory enthält die "watercolor" Bilder (als Wasserfarben bearbeitet), die ja das Thema dieser Galerie sind. In den Unterdirectories "size2" sind die Bilder in Schwarz/Weiss (inkl. Thumbnails) und im Unterdirectory "size3" befinden sich die Originalbilder (inkl. Thumbnails). In der Volldarstellung findet man Links zu den Variationen samt kleiner Vorschaubilder (sizesAsThumbs = 1). Die Bildmaße der einzelnen Variationen müssen zwar nicht gleich sein, aber die Thumbnails sollten aus Designgründen das gleiche Format haben. Für dieses Beispiel habe ich den PBase-Stil "zeroscan" verwendet. EXIF-Daten werden nicht angezeigt.
|
|
Beispiel 3
// Beispiel mit 3 Ansichten:
// -------------------------
var sizename = "other views:"
var defaultSize = 1
size[1] = "front"
size[2] = "side"
size[3] = "detail"
var showExif = 1
var showComment = 0
var navigAsThumbs = 0
var sizesAsThumbs = 1
// -------------------------
In diesem Beispiel werden unterschiedliche Ansichten eines Objekts angezeigt. Die Origialbilder habe ich je nach Ansicht in drei Directories aufgeteilt: "vorne", "seite" und "detail". Nach ich mich vergewissert hatte, dass die Reihenfolge der Motive überall gleich ist, habe ich die "Batch Rename"-Funktion im BreezeBrowser verwendet um in allen Directories gleiche Dateinamen zu vergeben. Das heisst alle Ansichten vom Pinguin Nr. 1 heissen "penguin_1.jpg". Mit der Variablen sizesAsThumbs habe ich wieder die Vorschaubilder aktiviert. Nach der HTML-Erstellung waren die Seitenansichten im Folder "size2" und die Detailansichten im Folder "size3". Anschließen habe ich noch alle .htm- und -css-Dateien in diesen Unterdirectories gelöscht. Als Design habe ich den selbst geschriebenen Stil "winterfun" verwendet.
|
|
|
