Wordpress als Bildergalerie

Achtung: dieser Beitrag ist alt! Es kann gut sein, dass seine Inhalte nicht mehr aktuell sind.

Ja, ich müsste so langsam mal wieder ein Nicht-Wordpress-Thema bearbeiten. Aber eines meiner letzten Projekte war die neue Website vom Hayungs und da ist eben WP die Waffe der Wahl. Ein wichtiges Feature da ist die Bildergalerie, die (abgesehen vom Lightbox-Effekt) kein Plugin u.Ä. ist, sondern allein mit Wordpress-Kernfeatures gebaut wurde. Jedes Bild ist ein ganz normaler Blogpost, der in einer speziellen Kategorie abgelegt wurde und die eigentliche Galerie ist eigentlich nur eine Template-Datei, die diese Kategorie verarbeitet.

Vorteile dieser Bauform sind, dass das Veröffentlichen und Bloggen eines neuen Bildes ein Schritt ist und die Galerie alle nützlichen Eigenschaften von den normalen Postings erbt – Kommentarfunktion, Newsfeed, Trackbacks und so weiter. Weil ich danach öfter mal gefragt wurde, möchte ich den Bauprozess dieser Galerien hier einmal kurz skizzieren.

Post-Kategorien anlegen

Zuerst werden Kategorien benötigt, in denen nacher die Posts abgelegt werden, die von der Gallery verwertet werden. Es kann sinnvoll sein, diese in eine Ober-Kategorie einzusortieren – das muss aber nicht zwingend sein.

Galerie-Kategorien

Von diesen Kategorien können so viele erstellt werden, wie man braucht... oder auch nur eine.

Die Template-Datei erstellen

Als zweites brauchen wir eine Template-Datei für die Galerieseiten. Für den Moment kümmern wir uns noch nicht um die Feinheiten der Funktionen; es reicht erst mal, wenn die Datei von Wordpress erkannt wird. Also erstellen wir eine leere gallery.php im Verzeichnis unseres Themes und beschränken uns für den Moment auf folgenden Inhalt:

<?php
/*
    Template Name: Gallery
*/
?>

Keine Sorge, da kommt am Ende noch mehr.

Galerieseiten anlegen

In unserem Beispiel erstellen wir jetzt für jede Galerie eine statische Seite. Dabei sind zwei Dinge zu beachten: Erstens muss das frisch erstellte Template dieser Seite zugewiesen werden …

Template auswählen

… und zweitens wird ein benutzerdefiniertes Feld benötigt, das diese Seite mit einer der oben erstellten Post-Kategorien verknüpft. Dort wird einfach die ID der betreffenden Kategorie eingetragen.

Das benutzerdefinierte Feld

Man kann auf ähnliche Weise auch mehrere Kategorien für eine Seite festlegen – man muss das Feld dann nur hinterher im Templatecode entsprechend verarbeiten. Jetzt fehlt nur noch der Code, der die statischen Seiten und die Kategorien zusammenfügt.

Der Template-Code

Das ist jetzt etwas viel Code, aber trotzdem nicht sonderlich kompliziert. Im Wesentlichen handelt es sich hier um eine normale Wordpress-Seite, an deren Ende zusätzlich noch ein paar Posts (bzw. Bilder aus den Posts) einer Kategorie angezeigt werden. Es wird hier je ein zum Post gehörendes Bild aus der Datenbank geholt.

<?php
/*
    Template Name: Gallery
*/
?>

<?php get_header(); ?>

<?php the_post(); $temp = $wp_query->post; ?>

    <h2 id="post-<?php the_ID(); ?>"><?php the_title(); ?></h2>
    <?php the_content(); ?>

    <ul id="gallery">
    <?php
        $cat_id = get_post_meta(get_the_id(), 'gallery_category', true);
        query_posts('cat='.$cat_id.'&orderby=date&order=desc&showposts=1000');
        while(have_posts()) : the_post();
    ?>
        <li>
            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
            <p>
                <a href="<?php the_permalink() ?>#comments"><?php pp_comment_num(); ?></a>
            </p>
            <?php
                $img_id = $wpdb->get_var("SELECT ID FROM $wpdb->posts where post_parent= $post->ID and post_type = 'attachment'");
                $img_url = wp_get_attachment_url($img_id);
                $thumb_url = wp_get_attachment_thumb_url($img_id);
            ?>
            <a title="<?php the_title(); ?>" href="<?php echo $img_url; ?>"><img src="<?php echo $thumb_url; ?>" alt="<?php the_title(); ?>" /></a>
        </li>
    <?php endwhile; $wp_query->post = $temp; ?>
    </ul>

<?php get_footer(); ?>

Fertig!

Das war es auch schon, es darf fleißig gepostet werden. Einfach ganz normale Blogposts schreiben, ein Bild einfügen und in der gewünschten Post-Kategorie ablegen.

Die obrigen Schritte sollten für einen Galerie-Rohbau genügen, der natürlich hinterher noch verfeinert werden kann. Man könnte ein Lightbox-Script einbauen, die Datenbankzugriffe optimieren, mehrere Kategorien auf einer Seite zusammenführen, eine Blätter-Funktion für große Galerien einbauen, eine Sidebar mit Kategorieauswahl erstellen … was auch immer man braucht.

Kommentare (15)

  1. Greg

    1. Dezember 2008, 13:44 Uhr

    Das ist eine ganz gute Idee. Finde ich nicht schlecht. Allerdings scheint es mir etwas nervig zu sein, dass man immer eine Kategorie-ID per Hand eingeben muss. Wenn das noch irgendwie automatisert würde (zB ein Dropdownmenu in der Tool-Leiste, das per JS automatisch die richtige ID etc einträgt), wäre es super!

  2. Peter

    1. Dezember 2008, 13:55 Uhr

    Oh. Ich sehe gerade, dass ich mich da etwas mißverständlich ausgedrückt habe. Die Kategorie-ID muss nur bei den Galerie-Seiten eingetragen werden, nicht bei den Posts. Die Posts legt man einfach alle in den im ersten Schritt erstellten Kategorien ab und die Galerie-Seiten werden mit den Kategorien über diese ID verknüpft. Ich formuliere das mal um.

    Und selbst dieses Eintragen der ID könnte man bei Bedarf mit einem kleinen Plugin in ein Dropdown-Menü verlagern wenn man möchte. Das ist alles wie gesagt nur ein Rohbau auf den man allerlei Extras aufsetzen kann.

  3. Chris

    1. Dezember 2008, 20:37 Uhr

    Großartige Anleitung !

    Das neue Design schaut richtig gut aus. Super Arbeit!

  4. Jens

    2. Dezember 2008, 12:14 Uhr

    Ich hab immer mal wieder ein paar Tests mit Wordpress als Fotoblog gestartet und nach einiger Zeit wieder verworfen. WP ist mir für den Zweck einfach nur eine Bildergalerie zu erstellen zu groß und behäbig. Ich bleib da bei Folderblog. Mittlerweile public domain und nur 20 kb groß. Und m. E. ein großer Vorteil gegenüber WP, es braucht keine Datenbank. Wer's sich im Einsatz ansehen möchte schaut mal auf meine Seite.

  5. Peter

    2. Dezember 2008, 12:33 Uhr

    Naja, dass ma Wordpress als Bildergalerie nicht nutzen sollte wenn man die Wordpress-Funktionen nicht braucht … das denke ich versteht sich von selbst.

  6. Rata

    5. Dezember 2008, 08:22 Uhr

    Sehr nette und gut erklärte Idee.
    Danke, lieber Peter, komme wieder ;)

    Dein Template gefällt mir außerordentlich gut; hast Du irgendwo auch erklärt, wie Du den Schäuble oben in die Ecke gerollt hast? Auf die Schnelle hab ich es jedenfalls nicht gefunden, bin allerdings auch in Eile.
    Aber, wie gesagt, ich komme wieder 8)

    Lieber Gruß
    Rata

  7. Peter

    5. Dezember 2008, 08:30 Uhr

    Zitat Rata:

    Hast Du irgendwo auch erklärt, wie Du den Schäuble oben in die Ecke gerollt hast?

    Ich nicht, aber der Arbeitskreis Vorratsdatenspeicherung.

  8. FuNKeR

    5. Dezember 2008, 10:12 Uhr

    Das klingt sehr interessant. Werde ich wahrscheinlich mal einbauen. Ist es eigentlich so, dass diese Posts dann nicht im normalen Blog auftauchen? Am liebsten wäre es mir, wenn ich eine "Seite" namens Gallerie hätte, auf der dann nur diese Posts auftauchen, auf der Hauptseite aber die eigentlichen - normalen - Blogposts mit Inhalt ;)

  9. Peter

    5. Dezember 2008, 10:16 Uhr

    Zitat FuNKeR:

    Das klingt sehr interessant. Werde ich wahrscheinlich mal einbauen. Ist es eigentlich so, dass diese Posts dann nicht im normalen Blog auftauchen?

    Doch, das sind normale Blogposts die überall auftauchen. Das kann man aber mit Plugins wie z.B. dem Advanced Category Excluder abstellen.

  10. Alexander

    6. Dezember 2008, 12:14 Uhr

    Ich habe Anfang des Jahres ein ähnliches Projekt gehabt mit dem Unterschied, dass es um viele Bilder ging. Da dass mein erste Projekt mit Wordpress war, habe ich auf Permalinks, statische Seiten und NextGen Gallery gesetzt.

    Der Vorteil von Wordpress hier ist es, dass alles aus einem Guss ist: Der Blog, die Galerien und das Gästebuch. Nur halt keine eigene Kommentarmöglichkeit bei einzelnen Bildern.

    @ Funker: Galerie schreibt man nur mit einem "l". Ich sage das deshalb, weil ich diesen Rechtschreibfehler im Permalink einer Galerie-Übersicht verewigt habe. ;-)

  11. FuNKeR

    6. Dezember 2008, 18:17 Uhr

    Mist. Und das mir, dem sonst jeder Schreibfehler auffällt *g* Na ja, kann passieren.

  12. Robert Agthe

    12. Dezember 2008, 02:09 Uhr

    Die Seite "Hayungs" verschiebt sich in Webkit Browsern wenn man das Fenster verkleinert. Nur als Hinweis.

  13. Markus

    27. Juni 2009, 21:40 Uhr

    das ist genau was ich gesucht hab. sehr gut und werd mich da auch mal ranmachen^^

  14. Traxmaxx

    11. November 2010, 14:26 Uhr

    <?php
        $img_id = $wpdb->get_var("SELECT ID FROM $wpdb->posts where post_parent= $post->ID and post_type = 'attachment'");
        $img_url = wp_get_attachment_url($img_id);
        $thumb_url = wp_get_attachment_thumb_url($img_id)
    ?>

    Funktioniert noch Einwandfrei in Wordpress 3.0.1 um das erste, zum Post gehörende Bild auszulesen.

  15. Nadja

    20. Februar 2014, 21:14 Uhr

    kann man das auch irgendwie für blogger umsetzen? bzw. weiß jemand wie man das in blogger macht? :( danke jetzt schon!

Die Kommentarfunktion ist seit Juli 2014 deaktiviert, weil sie zu sehr von Suchmaschinenoptimierern für manuellen Spam mißbraucht wurde. Wenn du Anmerkungen oder Fragen zum Artikel hast, schreib mir eine E-Mail oder melde dich via Twitter.

Folgt mir!

Kauft mein Zeug!

Cover der HTML5-DVD
Infos auf html5-dvd.de, kaufen bei Amazon

Cover des HTML5-Buchs
Infos auf html5-buch.de, kaufen bei Amazon

Cover des CSS3-Buchs
Infos auf css3-buch.de, kaufen bei Amazon