English | Start | Update |Layoutvorschau | Basiskonfiguration | Layouteinstellungen | Player | Stileditor | Thumbs | Datenbanklos | Textdatenbank | Intern | Googlemaps | Spracheinstellungen
Thumbnails in der Panoramagalerie 11
Thumbs  In der Galerie finden an 3 Stellen Vorschaubilder (Thumbs) Verwendung:
  1. Auf der Aktuell-Seite, große Thumbs, fast schon vollwertige Panoramen
  2. Auf der Regions-Übersichtseite
  3. In dem Filmstreifen neben oder unter dem Panorama

Die Thumbs müssen denselben Basisnamen haben wie das Panorama, zu dem sie gehören.

Die Erklärungen für die Aktuell-Thumbs gelten für alle 3 Sorten Thumbs gleichermaßen. Unten auf der Seite gibt es noch gesonderte Erläuterungen für die Übersichts- und Filmstreifen-Thumbs

Die verwendeten Ordner können natürlich im config-Modul geändert werden. Dort gibt es Einstellungen für den "thumb", den "aktuell" und den "equirectangular"-Ordner.


Aktuell-Seite Die Thumbs für die Aktuell-Seite können in zwei Ordnern liegen:
  1. Im Ordner für equirectangulare Bilder
  2. Im "aktuell"-Ordner

Wenn im Aktuell-Ordner kein Bild mit dem Panoramanamen gefunden wird, wird das Bild aus dem equirectangular-Ordner verwendet.

Die Bilder im Ordner "equirectangular" haben das Seitenverhältnis 2:1. Defaultgröße für die "Aktuell"-Thumbs ist aber 900x200 Pixel, d.h.nur ein Ausschnitt des Bildes wird gezeigt.

Im Kopf der jeweiligen Layout-Datei kann die gezeigte Größe der angezeigten Maske und damit des Thumbs bestimmt werden.
In der Layout-Datei:
$aktuellbreite = 900; // gezeigte Breite der Vorschauen default: 800
$aktuellhoehe = 160; // gezeigte Höhe der Vorschauen default: 200
Position des Ausschnitts Durch Wahl einer anderen Ausschnittposition in den Layoutvoreinstellungen läßt sich das Hintergrundbild in der Höhe verschieben.

Default: 40%, also ist der Ausschnitt etwas nach oben versetzt.
In der Layout-Datei:
$position1 = "40%"; //Vertikale Verschiebung des Bildausschnitts Aktuell-Seite, außer bei Verwendung von Bildern aus dem aktuell-Ordner
Position ändern Es wird nicht die Position der Maske geändert, sondern das Panorama dahinter prozentual in der Höhe verschoben. Der Teil innerhalb der Maske ist sichtbar. Zur Veranschaulichung sind die überstehenden Teile im Bild rechts sichtbar gemacht.
Spezielle Aktuell-Thumbs anfertigen Diese Verschiebung gilt aber für alle Aktuell-Thumbs, was nicht immer optimal sein kann.

Wenn es deshalb ein Vorschaubild im Ordner "aktuell" gibt, wird dieses verwendet und die Positioneinstellung wirkt auf dieses spezielle Thumb nicht, es wird immer mittig positioniert.

Das ermöglicht es, für einzelne Panoramen den gezeigten Ausschnitt ganz anders zu definieren - indem man das Bild gleich in der gewünschten Position in Photoshop beschneidet.

Wenn man sich die Mühe macht, alle Aktuell-Thumbs so anzufertigen, hat man sogar eine bessere Performance, weil die geladenen Bilder deutlich kleiner sind.
Das equirectangulare Bild in voller Höhe und ein mit genau dem gewünschten Ausschnitt angefertigtes Bild, was im Ordner "aktuell" liegen muss.

Masken-Gif Die Vorschaubilder werden als CSS-Hintergrundbilder eingebunden. Davor liegt ein Masken-Gif. Das Vorschaubild wird mittig auf die Größe des Masken-Gifs zurechtgeschnitten, nicht in der Größe skaliert.

Wenn die Hintergrundfarbe (grau) nicht stimmt, wird das Masken-Gif (weiß, mit Schatten) sichtbar.

Der mittlere Teil ist durchsichtig, die deckenden Teile sollten die Farbe des Hintergrundes haben.

Es ist möglich, ein Logo über das Bild zu setzen, ein weiteres deckendes Element des Masken-Gifs. Nur eckige Formen werden sauber abgebildet, bei anderen Formen entstehen unsaubere Pixelkanten.


Bearbeitung der Maske in Photoshop Im Ordner "hilfsdateien" gibt es in die Datei "rohgrafik-tif.zip".
Darin im Unterordner "als transparentes gif":
maske.tif
maske1200 Pixel.tif

Zum Ändern der Hintergrundfarbe einfach mit dem Farbeimer den weißen Layer "Hintergrundfarbe" mit dem neuen Farbton auffüllen. Schatten und Rundung entstehen durch die Ebenenmasken automatisch.

Als transparente Gif-Datei mit dem Namen maske.gif abspeichern.
Die Dateien "maske.tif" bzw. "maske1200pixel.tif"
maske.gif hochladen Die Masken-Datei maske.gif gehört in den Unterordner im Ordner "css" , der im Stileditor oben für das aktuelle Layout angezeigt wird, hier z.B. Ordner "css/moos". Die vorhandene Datei überschreiben.
Seamless-Modus Wie in einigen Layouts schon aktiviert, können die Thumbs auf der Aktuell-Seite in den Seamless-Mosus geschaltet werden. Die Maske nimmt dann die volle Seitenbreite ein, die Höhe kann wie oben beschrieben im Layout definiert werden.

Die Panoramen werden im Seamless-Modus in der Breite nahtlos wiederholt. Wenn ein Masken-Gif mit runden Ecken verwendet wird, wird das Masken-Gif mehr oder weniger verzerrt dargestellt. Das ist erstaunlich unauffällig, man sollte aber die 1200 Pixel-Maske verwenden.
In der Layout-Datei:
// Aktuell-Seite, Panoramen nahtlos auf voller Breite zeigen oder mit fester Breite
$seamless = "seamless"; // $seamless = "seamless"; oder $seamless = "fixed";
  Seamless
Thumbs auf der Übersicht-Seite, Für Panoramen, aber auch für Regionen werden Thumbs auf der Übersichtsseite gezeigt. Die Thumbs müssen denselben Basisnamen haben wie das Panorama, zu dem sie gehören.

Der Thumbordner läßt sich im config-Modul ändern.
Im config-Modul:
// Andere Ordner
$thumbordner="panos/thumbs";
Region Thumbs Als Thumb für eine Region wird derThumb des letzten Panoramaeintrages für diese Region verwendet.

Für Regionen können aber auch gesonderte Thumbs eingesetzt werden, z.B. ein Wappen, ein normales Foto, eine Grafik usw. Einfach ein Bild in passender Größe mit dem Namen der Region in den Thumbordner hochladen.
 
Masken-Gifs
Verschiebung
Auch die kleinen Thumbs auf der Übersichtseite liegen hinter einer Maske, genau wie die Aktuell-Bilder.

Die Größe der Maske auf der Übersichtsseite läßt sich frei einstellen. Man könnte sie z.B so groß wie die Aktuell-Thumbs machen.

Die gezeigten Minipanoramen sollten den Platz hinter der Maske aber komplett ausfüllen, also mindestens genauso groß sein.

Auch die vertikale Verschiebung läßt sich wie bei "Aktuell" einstellen. Wenn gesonderte Thumbs mit anderer Verschiebung gewünscht werden, einfach den Original-Thumb im Thumb-Ordner austauschen.


In der Layout-Datei:
// Größe der Thumbs auf der Übersicht-Seite-Seite
$thumbwidth = "174";
$thumbheight = "54";

//Vertikale Verschiebung des Bildausschnitts Übersichtseite, Suche und Filmstreifen:
$position2 = "40%"; //Übersicht und Such-Seite
minimaske.gif Das Masken-Gif für die Übersichtseite ist 308x 158 Pixel groß, lässt also noch Spielraum für Vergrößerungen. Es kann dabei aber zu Treppenbildung an den runden Kanten kommen. Dann besser ein Extra-Gif in genau der angegebenen Größe herstellen und wieder in den Unterordner im Ordner "css" , der im Stileditor oben für das aktuelle Layout angezeigt wird, hochladen.  
filmstripmaske.gif Die Größe der gezeigten Thumbs im Filmstreifen ist nicht veränderbar, liegt bei 174x54 Pixel fest. Die Höhenverschiebung läßt sich wieder einstellen. Die Filmstreifen greifen auf die selben Thumbs zu wie die Übersichtsseite.

Auch für filmstripmaske.gif gibt es eine .tif-Datei im Ordner "hilfsdateien/rohgrafik/als transparentes gif"
In der Layout-Datei:
//Vertikale Verschiebung des Bildausschnitts Übersichtseite, Suche und Filmstreifen:
$position3 = "40%"; // Filmstreifen
Automatische Thumb - Erstellung Wem es zu lästig ist, immer ein Thumb zu erstellen, der kann auf die automatische Thumb-Erstellung der Galerie zurückgreifen.

Wenn es kein Thumb zu einem Panorama gibt, dann wird bei Aufruf der equirectangularen Version "Flat" ein Thumb in der mit der Einstellung "$thumbwidth" definierten Breite erstellt, vorausgesetzt, die Schreibrechte des Thumordners sind gesetzt.
Für denOrdner "thumbs" muss für die automatische Thumb-Erstellung FTP Schreibrechte für alle gesetzt sein. Das läßt sich mit einem FTP-Programm durchführen.