Gabis Wordpress-Templates

Seit WordPress 2.5 ist es nun auch möglich, eine einfache Bildergalerie zu erstellen. Wenn man zu einem Beitrag einen oder mehrere Bilder hinzufügt, kann man durch Eingabe von gallery (bitte in eckige Klammern [ ] setzen) im Beitragstext eine Bildervorschau (Thumbnails) erzeugen. Beim Klick auf ein Vorschaubild wird eine neue Seite angezeigt mit einem Großbild, und wenn man auf dieses Großbild klickt, die Vollansicht des Bildes.

Über “Dateien hinzufügen, Bild hinzufügen” kann man in einem Rutsch alle Bilder hochladen und dann nacheinander bearbeiten für die Galerie:

Mit diesen Einstellungen wird eine Galerie generiert wie in diesem Beispiel mit den Blumenbildern. Der Begriff, der unter “Titel” mit dem roten Punkt eingegeben wird, erzeugt den Beitragstitel für die Bildereinzelseite. Der Zweite “Titel”-Begriff erzeugt die Bildunterschriften zu den Vorschaubildern hier auf dieser Seite. Die Beschreibung erscheint dann auf der Bildereinzelseite.

Wenn man auf eines der nachfolgenden Vorschaubilder klickt, erscheint jedes Bild in einer eigenen Seite mit einem kleinen Begleittext, einer Blättern-Funktion und einem Link zurück zu diesem Beitrag:

Die Bilder in der Galerie lassen sich in beliebiger Reihenfolge sortieren, indem man sie in der Mediathek-Bilderübersicht nummeriert:

In die kleinen Kästchen unter “Reihenfolge” legt man diese in der gewünschten Form fest, danach auf “Speichern” klicken. Nun sieht es in der Mediathek-Bilderübersicht wie folgt aus:

Es gibt noch weitere Sortiermöglichkeiten:

• gallery orderby=”post_title ASC”: Sortiert nach post-Titeln. Der post-title ist das erste Titelfeld (mit dem roten Punkt)

Für gallery gibt es noch einige Parameter:

• gallery columns="4" : “colums” legt die Anzahl der Spalten fest. In diesem Beispiel werden die Vorschaubilder in vier Spalten und x Zeilen angezeigt.
• gallery id="123" Über diese ID kann man Bildergalerien eines anderen Beitrags einfügen. In diesem Beispiel werden die Galeriebilder aus dem Beitrag mit der ID 123 angezeigt.
• gallery size="medium": definiert die Größe der Vorschaubilder von “thumbnail” (klein) über “medium” (mittelgroßes Bild) bis “full” (Vollbild).

Standardmäßig werden die Galeriebilder als XHTML-Definitionsliste ausgezeichnet. Wenn man das nicht möchte, kann man die HTML-Tags für das Bild, die Bildunterschrift und das umfassende Element ändern. So ist

• captiontag das umfassende Element – Standard ist der Tag <dd>
• icontag das Element for das Bild – Standard ist der Tag <dl>
• itemtag das Element für die Bildunterschrift – Standard ist der Tag <dt>

So sieht es dann aus, wenn ich statt einer Definitionsliste die Tags div, p und span verwenden möchte:

gallery itemtag="div" icontag="span" captiontag="p"

bitte immer an die umfassenden eckigen Klammern [ ] denken. Ich kann sie leider nicht dazuschreiben, ansonsten würde WordPress nämlich die Galerie anzeigen

Für die Bildereinzelseite habe ich in meinem Theme die Datei “attachment.php” so angepaßt, dass man in der Galerie blättern kann und auf jeder Bildereinzelseite auch ein Link zurück zur Galerieübersichtsseite existiert.

Die Blättern-Funktion per Vorschaubild auf der Einzelbildseite muss so in die attachment.php geschrieben werden (in diesem Beispiel ohne jegliche Formatierung per css):


<?php previous_image_link() ?>
<?php next_image_link() ?>


Den Link zur Übersichtsseite erzeugt man folgendermaßen:

<a href="<?php echo get_permalink($post->post_parent); ?>">Zurück zur Galerie-Übersichtsseite</a>

Die Bildeinzelseiten sind eigenständige Beiträge, die in der Datenbank mit dem Hauptbeitrag verknüpft sind (Datenbankfeld post_parent in der Tabelle wp_posts). Dieses habe ich mir für den Link zurück zunutze gemacht

Galerie-Code im Seitentemplate

der gallery-code lässt sich auch direkt in ein Seitentemplate einfügen, Das geht folgendermaßen:

Eine Falle

Manchmal möchte man ein Bild, so wie in diesem Beitrag auch, nicht mit in der Galerie haben, sondern separat anzeigen wie hier den Screenshot weiter oben mit dem Bilderupload. Wenn ich das Bild hier über das Admin-Panel einfüge, erscheint es ebenfalls in der Galerie. Um das zu vermeiden, muss ich das Bild per Hand und FTP-Client hochladen, um den Einrag als eigenes wp-post in die Datenbank zu vermeiden.

Zweite Falle

In einigen Themes, so auch in diesem hier, klafft zwischen der ersten und der nächsten Bilderzeile eine große Lücke. Dieser Fehler lässt sich beheben, indem man in der media.php im Verzeichnis wp-includes
die Zeile 408 sucht und in der Zeile <br style="clear: both" /> both durch left oder right ersetzt, je nachdem.

Ferner wird für die Galerieübersicht kein valider HTML-Code generiert, es fehlen die alt-Tags bei den Bildern. Ich habe auch noch den title-Tag dazugefügt. Dafür tauscht man in Zeile 327 der media.php den vorhanden Code durch diesen aus:

$html = '<img src="'.attribute_escape($src).'" '.$hwstring.'class="attachment-'.attribute_escape($size).'" alt="'.attribute_escape($alt).'" title="'.attribute_escape($title).'"/>';

Nachtrag 01.01.2009:

In der Version 2.7 ist der Fehler mit den fehlenden alt-Tags behoben.

Außerdem kann man die Inline-Styles von Zeile 375 bis 388 in eine externe css im Theme-Verzeichnis schreiben bzw. in die style.css hineinnehmen und verändern.

Nachtrag 13.12.2008:

Bei Justin Tadlock gibt es ein kleine PlugIn “Cleaner WordPress Gallery PlugIn, welche diese unglückliche Lösung von WordPress ausbügelt. Ich habe dieses PlugIn hier übrigens im Einsatz.