Aktiviere PicLens/CoolIris (CoolIris) 

Nach der Aktivierung wird über der Galerie ein Link mit dem folgenden Text angezeigt:

[Mit PicLens anzeigen]

Das Problem besteht nun leider darin, dass kaum jemand etwas mit dem Begriff PicLens anfangen kann! Bei der internen Diashow von NextGen besteht zwar die Möglichkeit den Linktext zu gestalten, für PicLens aber leider nicht.

Nach einigem Suchen habe ich die Stellschraube gefunden und meinen Text auf die Kernaussage
[Diashow anzeigen]
reduziert. Damit nicht parallel noch die Standarddiashow angeboten wird habe ich zusätzlich diese unter Optionen/Galerie abgewählt.

Mein Tipp ist:

Um auch bei zukünftigen Updates von NextGen die Änderung nicht immer wieder herstellen zu müssen nutze ich die in NextGen vorhandene Philosophie der Templates. Die Vorgehensweise ist ganz einfach:

1. Im Verzeichnis MeinThemes wird ein Unterverzeichnis nggallery angelegt.
2. In dieses Verzeichnis kopieren Sie die gallery.php aus dem Verzeichnis wp-content/plugins/nextgen-gallery/view
3. In dieser Datei passen Sie folgenden Codeschnipsel an:


<?php if ($gallery->show_piclens) { ?>
<div>
<a href="<?php echo $gallery->piclens_link ?>">
<?php _e('[View with PicLens]','nggallery'); ?>
</a>
</div>
<?php } ?>

4. Ersetzen des Textes [View with PicLens] durch den Text Ihrer Wahl, in meinem Beispiel mit [Diashow anzeigen]
5. Das Ganze noch per FTP hochladen und schon ist alles erledigt. Wer noch zusätzliche Änderungen in der Galeriedarstellung benötigt kann in dieser Datei entsprechende Anpassungen vornehmen. Ich verwnde z.B. über der Galerie auch den Titel und die Beschreibung der Galerie

Natürlich war mein erster Gedanke was soll dies! In all meinen Berichten verwende ich kleine Vorschaubilder unter Verwendung des Kurzbefehls [ singlepic w=100 h=75 ]. Ich greife einfach auf die Option der variablen Bildgröße zurück. Da von NextGen solche Bilder im Cache abgelegt werden, sind de facto, beliebig gestaltbare Vorschaubilder vorhanden.

Interessant wird der neue Befehl erst unter Verwendung mehrerer Thumbs. Indem nur die ID der Bilder zur Zusammenstellung verwendet wird, kann eine flexible Galerie bestehend aus Bildern verschiedener Galerien gestaltet werden.

Innerhalb von Berichten dürfte jedoch auch ein weiterer Gesichtspunkt von Interesse sein. Mit dem Befehl kann zum Beispiel auf eine Teilmenge einer Galerie zugegriffen werden und diese zwecks Illustration innerhalb des Berichtes zur Belebung beitragen.

Der Einsatz einzelner Thumbs erscheint mir zweifelhaft. Dafür ist der Befehl „singlepic“ mit den wichtigen Formatierungen des Textflusses rechts bzw. links die deutlich bessere Lösung.

Im Beispiel ist eine Galerie eingefügt, bestehend aus 10 Bildern, aus 5 verschiedenen Galerien. Die Navigation (vor –zurück), innerhalb der flexiblen Galerie, ist wie bei einer echten Galerie gegeben.

Wichtig: Die Bildnummern werden in der gewünschten Reihenfolge nur durch Komma getrennt aufgereiht.  

BEISPIEL GALERIE

[ thumb id=103,107,692,691,300,303,1498,1508,389,397 template=flexgallery ]

Tipp: Um diese Galerie auch im Design frei zu gestalten, habe ich zusätzlich die Option Template eingesetzt. In meinem Beispiel habe ich dazu das Template flexgallery definiert. Eine Gestaltung werde ich in einem nächsten Schritt vornehmen.

Der Fehler, den ich heute behandeln möchte, tritt nur unter folgender Bedingung auf: 

• Verwendung von Thumbnails mit unterschiedlicher Höhe
• Kleines Thumbnail ist an letzter Stelle der Zeile platziert
• Option Galerie Anzahl der Spalten „0“

Bei diesen Bedingungen entstehen unschöne Zeilenumbrüche in der Galeriedarstellung. Ein Effekt der einiges an Recherche erfordert bis dass Problem erkannt ist. Die CSS ist an dem ganzen Schuld! 

Um das Problem zu lösen sind drei Vorgehensweisen mit ihren Vor- und Nachteilen möglich, in den Bildern können Sie die Wirkung erkennen.

Vorteil: Einfach zu realisieren, harmonische Bildergalerie da alle Thumbs gleiche Größe haben
Nachteil: Speziell Hochkantbilder und Panoramabilder werden total verzerrt dargestellt.

Tipp: Falls Sie Änderungen am Style Sheet vornehmen, sollten Sie auch der Empfehlung in NextGen folgen und dieses in Ihr Theme integrieren. Falls Sie dies nicht tun ist beim nächsten Update von NextGen alles wieder verloren

Also nichts wie ran und auf die neueste Version umstellen

Was so einfach klingt kann jedoch schnell zur Verwirrung führen, die verschiedenen Softwarehersteller haben es sich wohl zur Aufgabe gemacht einfaches kompliziert darzustellen. So wird von den verschiedenen Herstellern und manchmal sogar innerhalb eines Konzerns ein unterschiedlicher Name für den gleichen Begriff verwendet. Also, nicht erschrecken, wenn all diese Begriffe das gleiche meinen!!

Bildunterschriften (Picasa), Beschreibung (Ulead), Titel, Bildbeschreibung, Objektbeschreibung (Adobe), Beschriftung ACDSee usw. Sicherlich gibt es noch mehr?

Wichtig und deshalb zuerst, nicht alles was heute als Datenflut angeboten wird ist für den Normalanwender hilfreich und sinnvoll. Es erscheint mir deshalb wichtig sich auf das zu konzentrieren was uns im Umgang mit unseren Bildern und der überquellenden Festplatte nutzt. Die 95% der Zusatzinformationen sind für Freaks sicherlich nützlich, schrecken den Hobbyfotografen aber nur ab.

Was wir brauchen sind die Bildbeschreibung und Kategorien bzw. Stichwörter, der Rest gehört in die Rubrik -schön das es da ist-

Auch bei der Kategorie müssen wir uns in den verschiedenen Programmen mit den Begrifflichkeiten auseinandersetzten. Tagging, Stichwörter, Schlagworte, Tags und vieles mehr taucht auf und wird unterschiedlich verwendet!

Jetzt kommt die große Frage, wie löse ich elegant das Problem und mache möglichst keinen Fehler. Die für mich beste Lösung habe ich mit dem Programm ACDSee Pro 2.5 gefunden.

Mehr zu diesem Thema finden Sie auf meiner Seite: IPTC Daten, nützliche Texte in den Bilddateien, Bearbeitung mit ACDSee Pro

Da der Effekt in etwa zur gleichen Zeit wie meine Upgrade auf WP 2.7 und NextGen 1.1 auftraten, war die anfängliche Fehlersuche in dieser Richtung. Nach einigem Zeitaufwand fand ich schließlich die richtigen Hinweise!

Das Problem liegt in der verwendeten PHP Version und dem Provider. WordPress fordert schlicht eine PHP Version >4.3 und mein Provider 1&1, bietet keinen Switch zwischen PHP 4 und PHP 5 an. Man kann aber PHP 5 problemlos nutzen!

Die Lösung ist relativ simpel, man stellt einfach auf PHP5 um. Die dazu notwendige Lösung erfordert eine Anpassung der Datei .htaccess durch hinzufügen folgender Codezeile:

AddType x-mapp-php5 .php
AddHandler x-mapp-php5 .php

Eine gute ausführliche Beschreibung des Problems und der Lösung habe ich bei medamind gefunden, er beschreibt nicht nur das Problem mit NextGen, sondern auch die zusätzliche Problematik mit WP2.7.

Zur Darstellung meiner Bilder in diesem Blog verwende ich das Plugin NextGen in der Darstellungsform Thickbox. Alles funktionierte monatelang einwandfrei, aber plötzlich wurden die Bilder an den unteren Rand verschoben und gekürzt dargestellt.

Eine erste Fehleranalyse lieferte folgendes Ergebnis:

• Der Fehler tritt nur im Internet Explorer 7 (IE7) auf.
• NextGen in den Versionen bis 0.98 hat keinen Einfluss auf den Fehler.
• Eine Umstellung auf Lightbox liefert eine einwandfrei Darstellung
• Auch ohne NextGen in der Standardeinstellung von WordPress tritt der Fehler auf
• WP in den Versionen 2.5 bis 2.6.1 hat keinen Einfluss auf den Effekt

Der Fehler musste im Zusammenspiel von IE7 und Thickbox liegen. Als Lösung muss in der CSS der thickbox unterhalb von Zeile 50 folgende Korrektur durchgeführt werden:

Ergänzung vom 16.2.09: Die Funktion Thickbox ist ab NextGen Version 1.0 nicht mehr Bestandteil des Plugin. Es wird nun auf die Funktion innerhalb WP zugegriffen. D.h. zwar nicht, dass der Fehler behoben ist, er muss nun nur in einem anderen Verzeichniss gesucht werden: wp-include/js/thickbox/thickbox.css
ACHTUNG: Bitte nicht daran stören, das noch einige zusätzliche Codeteile nach der beschriebenen Änderung folgen.

#TB_window { /* my IE7 Hack*/
 position: fixed;
 background: #ffffff;
 z-index: 102;
 color:#000000;
 display:none;
 border: 4px solid #525252;
 text-align:left;
 bottom:10%;
 left:50%;
}

Neuer Zusatzcode
border: 1px solid #555;
-moz-box-shadow: rgba(0,0,0,1) 0 4px 30px;
-webkit-box-shadow: rgba(0,0,0,1) 0 4px 30px;
-khtml-box-shadow: rgba(0,0,0,1) 0 4px 30px;
box-shadow: rgba(0,0,0,1) 0 4px 30px;
}
Nun sollte alles wieder funktionieren!!!

Die Unterschiede zwischen den angebotenen Styles sind jedoch nur marginal.  Aufbauend auf der NextGen Version 0.96 habe ich deshalb die Unterschiede im Bereich der Galerieübersicht anhand von Print Screen’s dargestellt.

Persönliches Design

Es ist aber ein leichtes aufbauend auf diesen Beispielen persönliche Änderungen vorzunehmen.
ACHTUNG: Um die Änderung nach einem Versionsupdate nicht zu verlieren muss dazu die neue CSS Datei im Pfad <Meinblog/wp-content/plugins/nextgen-gallery/css/neues-style.css>  abgespeichert werden. Am einfachsten verwendet man dazu eines der bestehenden Style Sheets und speichert es unter einem neuen Namen ab. Zusätzlich ist dann eine Anpassung der ersten 5 Zeilen in der CSS Datei erforderlich.

Ein neues Style Sheet muss in der Struktur wie bei WP üblich eindeutig sein. Die ersten 5 Zeilen des Kommentarbereiches werden ausgelesen und müssen deshalb angepasst werden. CSS Name, Describtion, Author und Version (grün) sind deshalb exakt in der Form wie im folgenden Beispiel des Default Styles abzuändern. Der nachfolgende Beschreibungstext kann beliebig variiert werden.

Nun noch die Anpassungen zu den gewünschten Bereichen vornehmen, per FTP hochladen und im Menü der Galerie aktivieren.

Beispiel:
/*
CSS Name: Default Styles
Description: NextGEN Default Gallery Stylesheet
Author: Alex Rabe
Version: 1.43
This is a template stylesheet that can be used with NextGEN Gallery. I tested the
styles with a default theme Kubrick. Modify it when your theme struggle with it,
it’s only a template design
*/

Übersicht der angebotenenen Styles

• Default Styles

CSS Name: Default Styles

Description: NextGEN Default Gallery Stylesheet

Author: Alex Rabe

Version: 1.43

• Black Minimalism Theme

CSS Name: Black Minimalism Theme

Description: For Black Minimalism Theme

Author: Alex Rabe

Version: 1.32

• Dkret3 Theme

CSS Name: dkret3 Theme

Description: NextGEN dkret3 style with a shadow effect

Author: Jörn Kretzschmar (based on Alex Rabes Default Style)

Version: 1.3

• Hovereffects Styles

CSS Name: Hovereffect Styles

Description: Hover Stylesheet based on the idea of Hoverbox from http://host.sonspring.com/hoverbox/

Author: Alex Rabe – Orginal by Nathan Smith

Version: 0.60

• K2 Theme

CSS Name: K2 Theme

Description: NextGEN Style for K2 Theme

Author: Alex Rabe

Version: 1.32

• Shadow Effect

CSS Name: Shadow Effect

Description: NextGEN Default Style with a Shadow effect

Author: Alex Rabe

Version: 1.32

• Shadow Effect with Description text

CSS Name: Shadow Effect with Description text

Description: NextGEN Default Style with a Shadow effect and description text below the thumbnail

Author: Alex Rabe

Version: 1.42

Hochformatbilder sind wahrlich nicht die Lieblinge einer PC Darstellung, es ist so unschön den Bildschirm für Hochkantbilder zu drehen, ha ha. Treffen die zwei Welten gestalterischer Aspekt und Bildschirm zusammen, sind Kompromisse notwendig. Wir z.B. mit dem Standardformat B=800 x H=600 Pixel gearbeitet, muss die Höhe nun auf 600 Pixel reduziert werden (B=450 x H=600). Nur so ist eine gleichförmige Darstellung am Bildschirm möglich. (siehe auch Fotos im Web).

Einstellung der Option Thumbnails

Wird die Formatvorgabe extern erfüllt und alle Hochkantbilder sind vor dem hochladen entsprechend formatiert ist nur im Menü Optionen -Thumbnails auf die richtige Einstellung zu achten.

Meine Empfehlung ist:

• Einstellung <<Galerie -Optionen -Thumbnails>>
• a. Breite x Höhe = 100 x 75 Pixel
• b. Setze fixe Größe -> kein Haken
• c. Mittige Thumbnails aus Bildern ausschneiden –> kein Haken
• d. Thumbnail Qualität = 80%
• e. Resample Modus =4

Für Überraschung sorgt eventuell die Einstellung Setze fixe Größe. Wird hier ein Haken gesetzt werden alle Thumbs auf das Format 100×75 gewandelt. Unser Hochformat wird nun im Thumbnail gestreckt. In der Galerieübersicht und auch im Menü Galerie verwalten wird das gestreckte Bild verwendet. Dies kann zwar in machen Darstellungen angenehm wirken, verfälscht aber aus meiner Sicht und kann in der eigenen Bearbeitung leicht zu Missverständnissen führen.

Will man nun das Vorschaubild nachträglich korrigieren, muss wie folgt vorgegangen werden:

• 1. Den Haken bei -Setzte fixe Größe entfernen.
• 2. In der Menü Galerie verwalten die entsprechende Galerie aufrufen, alle Bilder oder das betroffene Bild auswählen.
• 3. Im Drop Down Menü -keine Aktion- auf -neue Thumbnails erstellen- ändern.
• 4. OK drücken und schon werden die Vorschaubilder aktualisiert.

Bild falsch hochgeladen

Wahrscheinlich wird es Ihnen aber wie mir ergehen. Da rutsch doch das eine oder andere noch liegende Hochformat dazwischen. Mein erster Gedanke, kein Problem, Bild (Originalbild) extern drehen, Formatierung richtig stellen und per FTP das Bild in die entsprechende Galerie hochladen. Leider gibt es aber nun Überraschungen!

• Das Vorschaubild in der Galerie ist immer noch im Querformat! Gut, hier wissen wir ja was zu tun ist -siehe -neue Thumbnails erstellen- danach sind die Vorschaubilder richtig
• Nun aber die Überraschung. Wird das Bild zur Darstellung angewählt erschein das Großbild immer noch im Querformat in verzerrter Darstellung!!!
• Der Verdacht richtet sich auf den Cache, ich verwende ihn um die CPU Belastung bei Einzelbilddarstellungen zu reduzieren. In <<Optionen -Bilder>> wird deshalb -Lösche Cache Verzeichnis- durchgeführt, leider ohne Erfolg!
• Das Beispielbild steht in der Galerie NextGen und ist mit Test Hochformat -FALSCH bezeichnet.

Warum und wieso ist mir nun unklar, ich werde deshalb mit dem Entwickler Alex Rabe Kontakt aufnehmen und hoffentlich bald diesen Beitrag mit einer Lösung ergänzen.

Ergänzung: Inzwischen konnte der Fehler eingegrenzt werden. Wird auf einem anderen Rechner das Bild aufgerufen, ist alles i.O. Damit steht fest, es liegt am Cache meines Rechners! Doch nun oh Wunder, nach dem Löschen aller Caches ist das Bild immer noch verzerrt!. Damit ist für mich zur Zeit klar, es liegt ein Bug im Microsoft Internet Explorer 7 vor. Das Thema kann bezüglich NextGen als abgeschlossen betrachtet werden.

Problematisch ist, dass bei unterschiedlicher Textlänge, was wohl meist der Fall sein wird, der Text sich auf mehrere Zeilen verteilt. In der Darstellung passiert nun folgendes:

Je nachdem wo das Bild mit der längsten Beschreibung platziert ist entsteht ein Versatz der Vorschaubilder. Dadurch entstehen unschöne Darstellungen mit teilweise nur einem Bild in der Zeile.

Die optimale Lösung des Problems wäre eine Abfrage der maximalen Textzeilenzahl und einer daraus resultierenden Definition der Höhe des Vorschaubildes inkl. Text.

Tipp: Da diese Funktion zur Zeit nicht verfügbar ist habe ich den Textbereich auf eine Mindesthöhe von 4 Zeilen vergrößert. Nun ist sichergestellt, das der Effekt nur bei echten Langtexten auftritt. Da Romane wohl kaum zur Bildbeschreibung zum Einsatz kommen eine brauchbare Lösung und sicherlich besser wie ein unschöner Zeilenumbruch.

Notwendige Änderung: In dem Verzeichnis nextgen-gallery/css muss die Datei nggallery.css wie folgt angepasst werden:

.ngg-gallery-thumbnail span { 
/* Images description */
font-size: 90%;  
padding-left: 5px;
min-height: 42px;
display: block; }

Falls andere Zeilen Text benötigt werden ist der Wert für min-height anzupassen.
Für drei Zeilen verwende ich 42px, für 4 Zeilen 52px