Peter's Web Galerie (Thumbnailshow und Slideshow)
Copyright peter@danninger.eu
Version: 14.12.2023
English version
Warum eine eigene Thumbnailshow und Slideshow für Bild-Präsentationen im WWW ?
Es gibt doch Dropbox, Google Drive, Microsoft OneDrive, Amazon Drive, und viele andere Cloud-Anbieter.
Jeder, der damit zufrieden ist und die Nutzungsbedingungen akzeptiert, braucht nicht weiterzulesen.
Auch alle anderen, die nur Interesse an lokalen Slideshows auf dem eigenen Rechner haben, sind nicht betroffen.
Aber alle, die ihre Bilder bzw. Slideshows gerne in der Cloud speichern würden,
aber trotzdem die volle Kontrolle und Rechte über ihre Bilder behalten möchten,
benötigen eine Private Cloud und eine Web Galerie zum präsentieren.
Die oben gezeigten Screenshots sind aus folgender
Web Galerie.
Warum habe ich eine eigene Web Galerie implementiert ?
Ich will meine Slideshows nicht nur auf einem lokalen Rechner präsentieren, sondern im WWW!
Ich will die volle Kontrolle und auch alle Rechte an meinen Bildern behalten!
Da habe ich Bedenken bei allen kostenlosen Cloud-Anbietern.
Ich will Thumbnailshows und Slideshows auch bei vielen Bildern mit geringem Aufwand erzeugen können.
Ich will Thumbnailshows und Slideshows automatisch generieren.
Ich will Bild-Titel (oben) und Bild-Beschreibung (unten) aus den Metadaten der Bilder extrahieren.
Damit kann ich erreichen, daß die generierte Slideshow nicht nachträglich editiert werden muß.
Was sind Bild-Metadaten:
Zusätzlich zum eigentlichen Bild enthalten die Bilddateien diverse Informationen im Kopfbereich.
Welche Auswahl dieser Metadaten für die Gestaltung von Bildtitel und Bildbeschreibung zur Verfügung stehen siehe ganz unten.
-
EXIF: Informationen, die meistens schon durch die Kamera hinterlegt werden.
z.B. Aufnahmezeitpunkt, Blende, Entfernung, GPS-Position, .....
-
IPTC: Informationenen, die durch das Bildbearbeitungsprogramm hinterlegt werden.
z.B. Copyright, Bildtitel, Bildbeschreibung, Land, Stadt, .....
-
XMP: Neues Format (XML) für IPTC-Daten mit zusätzlichen Informationen.
z.B. Bewertung, Beschriftung, Stichwörter, .....
Ich organisiere und bearbeite meine Bilder mit Adobe Lightroom,
da werden auch für Slideshows nützliche Daten wie Bildtitel und Bildbeschreibung erfaßt.
Viele Informationen hat schon die Kamera hinterlegt, z.B. Aufnahmezeitpunkt, Aufnahmeort ...
Lightroom kann aus den Bildern dann ansprechende lokale Slideshows generieren,
und zwar wahlweise als .pdf, .mp4 oder .jpg.
Als Titel (oben) bzw. Caption (unten) können beliebige Metadaten eingeblendet werden,
Beispiel.
Lightroom bietet auch mehrere Web-Galerien an, diese können aber kaum an persönliche Wünsche angepaßt werden.
Auch im WWW habe ich keine Web Galerie gefunden, die meinen Vorstellungen entspricht.
Also habe ich angefangen zu programmieren, aber man muß ja nicht alles neu erfinden:
Argumente für den eigenen Einsatz
-
Die Bilder liegen auf dem eigenen Rechner bzw. im eigenen Webspace, z.B. einem NAS.
Wichtig für alle, die entscheiden wollen, wo ihre Bilder gespeichert sind.
-
Für Bild-Titel (oben) und Bild-Beschreibung (unten) können die Bild-Metadaten ausgewertet werden.
Das nachträgliche Editieren der Slideshow erübrigt sich, dies ist besonders bei vielen Bildern willkommen.
Das funktioniert aber nur, wenn die Bilder mit einem Bildbearbeitungsprogramm bearbeitet wurden, z.B. Lightroom.
Wahlweise können aber auch Titel und Beschreibung manuell für jedes Bild in der Slideshow editiert werden.
-
Die Anpassung an die eigenen Vorstellungen erfolgt durch eine Parameterdatei. (slideShowParams.bat)
Nach dem Anpassen "makeSlideShow.bat" aufrufen, um die Thumbnailshow und die Slideshow zu generieren.
-
Thumbnailshow und Slideshow werden durch ein Script automatisch generiert. (makeSlideShow.bat)
Voraussetzungen, Konventionen
-
Bilder vorher mit Lightroom oder ähnlichem Programm bearbeiten, mit Titel und Beschreibung, und in die 3 Verzeichnisse exportieren.
-
Bilder mit 3-stelliger Laufnummer im Verzeichnis: \slides\
Empfehlung Bildgröße: 1024px (lange Kante)
-
Evtl. größere Bilder mit gleichem Namen zum Download im Verzeichnis: \oriPics\
Empfehlung Bildgröße: 1920px (lange Kante)
- Thumbnails mit gleichem Namen im Verzeichnis: \thumbnails\
Empfehlung Bildhöhe: 150px
-
Für eigene Webseiten ist bei Verwendung des Google Static Maps API's ein eigener KEY erforderlich.
Dieser kann ganz einfach bei
Google angefordert werden.
Diesen Key in slideShowParams.bat eintragen als: GOOGLEMAPSKEY
- Aktueller Webbrowser für das Betrachten (HTML5, CSS3).
Implementierte Funktionen
- Vorwärts- bzw. Rückwärtsblättern, auch mit Wisch-Gesten bei Touchscreens.
- Zurück an den Anfang (erstes Bild).
- Automatisches Abspielen, auch mit zufälliger Reihenfolge, siehe F1 unten.
- Bild an die Displaygröße anpassen, wahlweise auch vergrößern.
- Vollbildmodus (ideal für Vorführungen).
- Bild runterladen, wahlweise auch in voller Größe (wenn \oriPics\).
- Bild drucken.
- Bild-Metadaten verwenden für Titel und Beschreibung.
- Ausgewählte Bild-Metadaten anzeigen.
- Alle Bild-Metadaten runterladen (EXIF, IPTC, XMP).
- Aufnahmeort mit Google Maps anzeigen (wenn Positionsdaten verfügbar).
- Benutzeroberfläche deutsch, englisch, ...., einfach anpassbar. (\js\strings.js)
- Sondertaste F1: Abspielmodus wählen. (Standard: vorwärts bis zum Ende)
- Sondertaste F2: Anzeigedauer Bild im Abspielmodus. (Standard: 3 sec)
- Sondertaste F3: Überblendzeit wählen. (Standard: 1 sec)
- Sondertaste F4: Wartezeit bei manuellem Bildwechsel wählen. (Standard: 1 sec)
Getestete Browser und Plattformen (aktuellste Versionen)
- Windows 10:Firefox, Chrome, MS-IE, MS-Edge, Opera ... alle OK
- Android 6:Firefox OK ... Chrome ohne Datensparmodus.
- Linux:Firefox OK
- Apple OS X:Safari, Chrome OK
- Apple iOS:nicht getestet
Lokaler Test auf dem eigenen Rechner
Wenn man die Slideshow lokal auf dem eigenen Rechner ohne Webserver testen will,
erhält man evtl. eine CORS-Fehlermeldung, daß die Bild-Metadaten nicht ausgelesen werden können.
Lösung für Google Chrome: Aufruf-Parameter
Chrome_ohne_CORS.bat ⇒⇒ "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=C:\Temp %1
Lösung für Mozilla Firefox: Konfigurationsparameter in about:config
security.fileuri.strict_origin_policy ⇒⇒ false
Es gibt auch ein Firefox-Plugin
Evtl. weitere Aufforderungen verbieten.
Kurzanleitung für eigenen Einsatz
Diese Software darf privat genutzt werden, wenn keine kommerziellen Interessen damit verbunden sind.
Bitte prüfen Sie auch die evtl. Rechte der oben erwähnten verwendeten Libraries.
Wenn Sie diese Software verwenden, dann akzeptieren Sie, daß kein Service und
keinerlei Gewährleistung bzw. Garantie geleistet wird.
Sie verwenden diese Software auf Ihr eigenes Risiko.
Die wichtigsten Einstellungen in der 'slideShowParams.bat'
Es sind Beispiele eingetragen:
- TITEL=HdS Faschingsgaudi 2016 Seitentitel fuer Thumbnailshow und Slideshow
- BILDNAME=FaschingHdS2016_ Name der Bilder ohne Nummernteil
- BILDANZ=10 Anzahl der Bilder, max. 999
-
SCRIPTSDIR=./ lokales Script und Style Basisverzeichnis,
wenn nur eine Slideshow, siehe Demo
-
SCRIPTSDIR=../slideShow/ gemeinsames Script und Style Basisverzeichnis,
wenn mehrere Slideshows, Beispiel siehe unten
- ORIPICDIR=oriPics evtl. Verzeichnis für große Bilder zum Download, sonst false
- ENLARGE=true evtl. Bilder bei grossem Display vergroessern
- SENOTTO=false evtl. Thumbnail-Show fuer www.senotto.de
- GOOGLEMAPSKEY="##########" evtl. ihr persönlicher GoogleMaps-Key
-
ADDTITLE=true Bildtitel mit Metadaten ueber dem Bild
Die Titelzeile wird wie folgt zusammengesetzt:
TITEL_LI_1, TITEL_LI_2
TITEL_RE_1, TITEL_RE_2
-
ADDCAPTION=true Bildcaption mit Metadaten unter dem Bild
Die Beschreibungszeile wird wie folgt zusammengesetzt:
CAPTION_LI_1, CAPTION_LI_2
CAPTION_RE_1, CAPTION_RE_2
-
Einfaches Beispiel, Beschreibung siehe unten:
TITEL_LI_1="title"
CAPTION_LI_1="desc"
CAPTION_RE_1="date"
Bespiel für mehrere Slideshows:
Der Ordner "slideShow/" kann unverändert bleiben.
Parallel dazu richten wir für jede Slideshow einen Ordner ein.
Diese enthalten Unterordner für die Bilder: "slides/", "thumbnails/" und evtl. "oriPics/".
Weiters benötigen wir 2 Dateien: "makeSlideShow.bat" und "slideShowParams.bat".
Die Datei "slideShowParams.bat" muß an die Slideshow angepaßt werden,
dann kann mit "makeSlideShow.bat" die Slideshow und die Thumbnailshow generiert werden.
Beschreibung der unterstützten Metadaten
Welche Metadaten in den Bildern vorhanden sind hängt von der Kamera und vom Bildbearbeitungsprogramm ab.
Es wird folgende Auswahl aus den EXIF, IPTC und XMP Metadaten unterstützt:
• name: Bildname (Sonderfall)
• title: Bildtitel (XMP | IPTC)
• headline: Bildüberschrift (XMP | IPTC)
• desc: Bildbeschreibung, Caption (XMP | IPTC | EXIF)
• byline: Künstler (IPTC)
• creator: Ersteller (XMP)
• rights: Copyright (XMP | IPTC | EXIF)
• date: Aufnahmedatum (EXIF)
• time: Aufnahmezeit (EXIF)
• make: Kamera Hersteller (EXIF)
• model: Kamera Modell (EXIF)
• artist: Fotograf (EXIF)
• userComment: Benutzer Kommentar (EXIF)
• focalLen: Objektiv Brennweite (EXIF)
• fNumber: Objektiv Blende (EXIF)
• subjDist: Objektiv Entfernung (EXIF)
• expTime: Kamera Belichtungszeit (EXIF)
• expBias: Kamera Belichtungskorrektur (EXIF)
• ISOSpeed: Kamera ISO Empfindlichkeit (EXIF)
• pixelX: Kamera Bildbreite (EXIF)
• pixelY: Kamera Bildhöhe (EXIF)
• latGrad: GPS Latitude (Breite) (EXIF)
• lonGrad: GPS Longitude (Länge) (EXIF)
• ele: GPS Höhe (EXIF)
• country: Land (XMP | IPTC)
• province: Provinz (XMP | IPTC)
• city: Stadt (XMP | IPTC)
• location: Ort (XMP | IPTC)
• rating: Bewertung, z.B.: "4" (XMP)
• label: Markierung, z.B.: "Grün" (XMP)
• exifVers: EXIF Version (EXIF)
• creaTool: Foto-Software, z.B: Lightroom (XMP)
Beispiel für Definition der Metadaten
Copyright peter@danninger.eu Version: 14.12.2023