dynamicinternet Wir machen Ihr Web dynamisch!

Eine Lösung für die WordPress Galerie

geschrieben von Micha am 06. November 2009 | 5 Kommentare

Es gibt Dinge bei WordPress, die ich nicht mag. Dazu gehört die Galerie. Nicht, dass die Idee dahinter schlecht ist. Sie ist nur schlecht umgesetzt. Aber nur meckern ist nicht fair. Schauen wir mal, was man daraus machen kann.

Das Problem der Galerie ist das Stylesheet, welches einfach in die Post geschrieben wird. Damit validiert die Seite nicht mehr. Weitere Probleme tauchen auf, wenn man in seinem Theme beispielsweise das Aussehen der Bilder verändern möchte. Das Stylesheet in der Post überschreibt erst einmal eigene Werte aus dem Themestylesheet. Woher wissen die Entwickler, ob ich eine 2px border #cfcfcf um meine Bilder mag? So etwas gehört definitiv nicht in den Code!

Ursache des Übels ist die Möglichkeit, beim Einfügen der Galerie in die Post die Anzahl der Spalten (2-9) auszuwählen. WordPress errechnet dann die Breite der Listenelemente nach der Anzahl der gewählten Spalten und schreibt die Werte in das Stylesheet.

Die eigene Galerie Funktion

Die Funktion gallery_shortcode, welche die Galerie erzeugt, befindet sich in wp-includes/media.php. Der Einfachheit halber kopieren wir die komplette Funktion gallery_shortcode in die functions.php des aktiven Themes. Dann benennen wir die Funktion um, deaktivieren die Funktion von WordPress und aktivieren unsere eigene Funktion:

//deaktivieren der WordPress Funktion
remove_shortcode('gallery', 'gallery_shortcode');
 
//aktivieren der eigenen Funktion
add_shortcode('gallery', 'wpe_gallery_shortcode');
 
//die umbenannte eigene Funktion
function wpe_gallery_shortcode($attr) {
    ...
}

Jetzt rufen wir eine Post mit einer eingefügten Galerie auf. Es sollte alles genau so funktionieren wie bisher. Nur dass unsere eigene Galeriefunktion nun aktiv ist. Nehmen wir jetzt die nötigen Änderungen vor, um den Galerie-Output zu verbessern.

Als erstes löschen wir die nachfolgende Zeile. Dort wird die mögliche Spaltenbreite berechnet. Das brauchen wir nicht mehr.

$itemwidth = $columns > 0 ? floor(100/$columns) : 100;

Anschließend modifizieren wir die Variable $output. Das Stylesheet wird komplett gelöscht. Der Inline-Style von dem clearenden br wird ebenfalls entfernt. Das geht eleganter im eigenen Theme-Stylesheet. Abschließend wird das letzte br-tag entfernt. Der geänderte Code von $output sollte jetzt so aussehen:

$output = apply_filters('gallery_style', "
    <div id='$selector' class='gallery galleryid-{$id}'>");
 
$i = 0;
foreach ( $attachments as $id => $attachment ) {
    $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
 
    $output .= "<{$itemtag} class='gallery-item'>";
    $output .= "
        <{$icontag} class='gallery-icon'>
            $link
        </{$icontag}>";
    if ( $captiontag && trim($attachment->post_excerpt) ) {
        $output .= "
            <{$captiontag} class='gallery-caption'>
            " . wptexturize($attachment->post_excerpt) . "
            </{$captiontag}>";
    }
    $output .= "</{$itemtag}>";
    if ( $columns > 0 && ++$i % $columns == 0 )
        $output .= '<br />';
}
 
$output .= "</div>\n";
 
return $output;

Nachdem wir die Post im Browser aktualisiert haben, sehen wir alle Bilder untereinander stehen. Aber das Dokument ist valide. Jetzt müssen wir die Spaltenfunktionalität herstellen, die wir ja bewusst zerstört haben. Wir schreiben einfach eine zusätzliche Klasse mit der Anzahl der Spalten bei $itemtag dazu:

$output .= "<{$itemtag} class='gallery-item col-{$columns}'>";

Im Quelltext des Dokuments steht dann je nach Anzahl der Spalten

<dl class="gallery-item col-5">

Jetzt werden noch einige Anweisungen im Theme-Stylesheet notiert und fertig ist die Galerie.

.gallery {
    margin: auto;
    /* gallery clearing*/
    overflow: hidden;
    width: 100%;
}
.gallery .gallery-item {
    float: left;
    margin-top: 10px;
    text-align: center;
}
.gallery img {
    border: 2px solid #cfcfcf;
}
.gallery .gallery-caption {
    margin-left: 0;
}
.gallery br { clear: both }
 
/* available Columns | mögliche Spalten */
.col-2 { width: 50% }
.col-3 { width: 33.333% }
.col-4 { width: 25% }
.col-5 { width: 20% }
.col-6 { width: 16.666% }
.col-7 { width: 14.285% }
.col-8 { width: 12.5% }
.col-9 { width: 11.111% }