Einfache Bildergalerie ohne Plugin

Geschrieben von am 16. Mai 2011 in Tipps & Tricks - 23 Kommentare
Bilderstrecken mit WordPress

Wer regelmäßig mehr als ein Bild in seine Beiträge einbaut, der wird schnell feststellen, dass die „Standardumsetzung“ der Attachement-Verwaltung in den meisten Themes doch eher schlecht ist. Dabei können Bilder einen enormen Boost für Besucherzahlen und Verweildauer bedeuten. Denn: Schaut man sich Deutschlands große News-Seiten an, so haben die fast in jedem Artikel lange Bilder-Klickstrecken. Diese Bilder-Strecken sind mit wenig Aufwand produziert, schaffen aber jede Menge Content und halten die Besucher – zumindest für die Mehrzahl aller Nutzer dürfte das gelten – deutlich länger auf der Seite. Nicht nur aus Ertragssicht ergibt sich somit eine deutlich bessere Vermarktungschance.

Spiegel Online

Spiegel Online

Für mich galt anhand all dieser Fakten die Erkenntnis: „Das muss doch auch mit WordPress gehen, aber warum macht das niemand?“ Und wenig später gab es die Erkenntnis: Es geht tatsächlich auch mit WordPress und die Lösung ist mehr als einfach! Im Theme „Diverse“ aus dem wpBundle – das ich auch ArtikelWissen.info – einsetze ist nämlich genau diese Option bereits integriert.

Und nach wochenlangen Tests und Optimierungen weiß ich jetzt, dass die wenige Mehrarbeit sich enorm lohnt. Ich will die Lösung daher mal ein wenig streuen und hier veröffentlichen. Aber bitte beachten: Ich stellte nur ein „Roh-Format“ zur Verfügung. Die optische Anpassung muss jeder selbst – im Rahmen seiner Kenntnisse und angepasst an das Theme – selbst durchführen. Beispiele für mögliche Lösungen findet ihr übrigens hier oder auch auf ArtikelWissen.info.

ArtikelWissen.info

ArtikelWissen.info

Ein Template reicht bereits aus

Statt langer Programmierarbeit reicht zur Umsetzung von Bilderstrecken bereits ein zusätzliches Template: WordPress erkennt das Template für Bildanhänge automatisch, wenn die Datei image.php vorhanden ist.

Gibt es diese Datei in eurem Theme noch nicht, müsst ihr sie daher einfach anlegen.

Prinzipiell solltet ihr diese Datei dann so „gestalten“ wie etwa das Template für einen einzelnen Artikel. Also mit Header-, Footer- und Sidebar-Verweis, etc.

Überschrift

Einzig die Seitenüberschrift sieht ein wenig anders aus: Weil das Bild eine eigene Überschrift hat, aber im Grunde zu einem übergeordneten Beitrag gehört, gibt es eigentlich zwei Überschriften. Ich habe das mal dergestalt angelegt:

<h1><a href="<?php echo get_permalink( $post->post_parent ); ?>" rev="attachment"><?php echo get_the_title( $post->post_parent ); ?></a> &raquo; <?php the_title(); ?></h1>

Der erste Teil der Überschrift ist die Überschrift des „Vaterbeitrags“, der zweite Teil hingegen ist die eigentliche Bildüberschrift.

Bild und Bildinformationen anzeigen

Der wichtigere Schritt ist jedoch die Darstellung des Bildes. Hierfür reicht jedoch auch schon ein kleiner Codeschnipsel aus:

<a href="<?php echo wp_get_attachment_url($post->ID); ?>"><?php echo wp_get_attachment_image( $post->ID, array( 500, 400 ) ); ?></a>

Angezeigt wird hierbei das Bild mit einer Größe von 500×400 Pixel und es wird gleich mit dem Orignial-Bild (also dem, das tatsächlich hochgeladen wurde) verlinkt. Alternativ könnte man hier auch das nächste Bild der Bilderstrecke verlinken.

Ein einziges Bild ist aber ein bisschen doof, deshalb sollte man auch die Beschreibung anzeigen:

<?php if( get_the_content() ) : ?>
<?php the_content(); ?>
<?php else : ?>
<p><?php _e( 'Keine Beschreibung vorhanden.' ); ?></p>
<?php endif; ?>

In diesem Fall wird noch einmal geprüft, ob es überhaupt eine Bildbeschreibung gibt. Ist das der Fall, wird sie ausgegeben. Gibt es keine Beschreibung zum Bild, wird dem Besucher diese Meldung angezeigt.

Navigationslinks

Will man durch ganze Bilderstrecken navigieren, braucht man als Benutzer die passenden Links. Ihr könnt sie aber auch darstellen:

Vorwärts: <?php next_image_link( '', __( 'Weiter') ) ?>
Rückwärts: <?php previous_image_link( '', __( 'Zur&uuml;ck' ) ) ?>

Bilderstrecke anzeigen

Schick ist auch die Anzeige von Vorschauminiaturen in einer Liste. Auch das geht mit WordPress – fast schon peinlich – einfach:

<?php
$images = get_children( array(
'post_parent' => $post->post_parent,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image'
) );
if( $images ) : foreach( $images as $id => $image ) : echo '<a href="' . get_attachment_link( $image->ID ) . '">' . wp_get_attachment_image( $image->ID, array( 62, 62 ), false ) . '</a>';
endforeach;
endif;
?>

Hiermit werden alle Bilder der Bilderstrecke als Thumbnails mit der Größe 62×62 Pixel angezeigt. Durch diese Bilder kann man sich dann einfach durchklicken.

Thumbnail-Navigation

Thumbnail-Navigation

Eigene Ideen?

Habt ihr noch eigene Ideen, was man mit einer solchen Bilderstrecke machen könnte? Dann immer her damit!

Dankbar bin ich übrigens auch für ganz fertige Lösungen inkl. CSS. Die könnte man ja mit Usern teilen, die nicht ganz so tief in der Materie sind.

Bei Fragen zur Materie meldet euch bitte einfach per Kommentar!

Hilfe benötigt?

Brauchst du Hilfe bei der Umsetzung oder hast von WordPress eigentlich keine Ahnung und möchtest dieses tolle Feature aber trotzdem haben? Dann melde dich einfach per Mail bei mir und ich mache dir gern ein Angebot!

Bitte sozial teilen

Wenn dir dieser Beitrag gefallen hat, dann teile ihn doch bitte in den verschiedenen sozialen Netzwerken! Du würdest mir damit sehr helfen!

Über den Autoren

Mein Name ist Christian. Ich blogge bereits seit 5 Jahren - manchmal mehr, manchmal weniger erfolgreich. Weil ich in der Anfangszeit meiner Erfahrungen mit den von WordPress gebotenen Möglichkeiten unzufrieden war, habe ich mir einiges Wissen zu dieser tollen Software selbst beigebracht. Aus diesen Erfahrungen ist das Projekt wpLove.de geboren. Neben WordPress bringe ich mir aber auch das Thema SEO selbst etwas näher.

23 Kommentare zu "Einfache Bildergalerie ohne Plugin"

  1. Stefan 16. Mai 2011 um 16:36 · Antworten

    … Und immer wieder kommen neue Funktionen von WordPress zum Vorschein. 😀

    Stimmt, bisher ist wirklich noch fast niemand auf die Idee gekommen, so etwas mit WordPress umzusetzen.
    Ich selbst werde davon wahrscheinlich auch in nächster Zeit absehen, da es für mobile Internetnutzer schlecht zu benutzen ist. Bisher haben mir Auflistungen der Bilder immer gereicht.

  2. Viktor 17. Mai 2011 um 07:45 · Antworten

    Warum so „kompliziert“?
    Es geht doch auch einfach mit den Shortcode [gallery] ?!?!

    • adkorte 17. Mai 2011 um 07:55 · Antworten

      Das reicht um alle Bilder des Beitrags noch einmal im Beitrag selbst anzuzeigen, das stimmt. Der Shortcode führt aber nicht dazu, dass man aus einer Anhang-Seite eine echte Bildergalerie machen kann. 😉

      Ein Hinweis noch: Verzichte in Zukunft bitte auf Deeplinks. Auf Linkbuilding-Versuche dieser Art reagiere ich allergisch und drücke schnell mal den Spam-Button.

      • Viktor 17. Mai 2011 um 08:23 · Antworten

        Warum hast Du denn noch das Website Feld in den Kommentaren drin? naja, egal…
        Mich würde viel mehr interessieren warum man aus den Anhängen dann keine echte Bildergallerie machen kann? Was verstehst Du unter echt? Mir will der Nachteil des shortcodes noch nicht ganz einleuchten…..

        • adkorte 17. Mai 2011 um 08:27 · Antworten

          Du darfst gern deine Website eintragen, nur Deeplinks sind ein No-Go. Oder auch Keyword-Spam. Lies dazu: http://www.wplove.de/seo/wo-beginnt-spam/783/

          Zu deiner Rückfrage: Wenn du einfach den Galerie-Shortcode einfügst und keine Änderungen an den Templates vornimmst, dann wirst du jeweils nur zu einem einzelnen Bild geführt, das unter Umständen noch be…scheiden eingebaut ist.

          Durch die von mir vorgestellten Änderungen kannst du eine in dem Sinne echte Bilderstrecke bauen, als dass du dich auf der Attachement-Seite dann wirklich von einem zum anderen Bild (in großer Auflösung) klicken kannst und nicht immer wieder zurück zum Vaterbeitrag gehen musst.

        • Viktor 17. Mai 2011 um 08:32 · Antworten

          Hab jetzt endlich Dein Beispiel gefunden, jetzt leuchtets ein.

          Aber, wenn ich bspw. eine lightbox eingebaut habe und dem [gallery] ein [gallery link="file"] beifüge, werden die Bilder direkt verlinkt => die Lightbox startet. In Ihr kann ich dann ja auch prima hin und her switchen.

  3. Christoph 8. Juli 2011 um 17:59 · Antworten

    Danke für den Tipp! 😉

    Ich warte ja immer noch auf eine gute interne WordPress-Lösung für eine Gallery.. .(

    • Adrian 8. Juli 2011 um 18:29 · Antworten

      Aber das ist doch eine WordPress-interne Lösung. 😉

  4. Can 16. August 2011 um 21:12 · Antworten

    seehr geil danke

    war lange auf der suche danach =)

    wie kann ich am besten auf den jeweiligen post verlinken?

    und wie könnte man das ganze evtl mit ajax etwas flüssiger machen? 🙂

    lg
    Can

    • Adrian 18. August 2011 um 11:07 · Antworten

      Leider verstehe ich deine Rückfrage nicht ganz. 😉 Auf welchen Post willst du denn verlinken? Und grundsätzlich kannst du die Anzeige natürlich auch mit AJAX „aufhübschen“. Problematisch hierbei nur: Jedes Stückchen JavaScript macht deine Seite langsamer.

  5. Can 18. August 2011 um 12:41 · Antworten

    naja die galerie „hängt“ ja an einem artikel dran..wenn ich jetzt auf ein thumbnail klicke um zu der fotostrecke zu kommen und alle bilder in groß zu betrachten
    verlasse ich diesen artikel und da wollte ich gerne wieder zurück 😀

    konnte es mit
    <a href="post_parent); ?>" rev="attachment" title="zurück zum Artikel post_parent); ?>">zurück zum Artikel
    lösen

    ja mit dem ajax hast du wohl recht
    wie könnte ich es wenigstens so hinkriegen, dass wenn man auf weiter geklickt hat
    die seite nicht erst oben anfängt sondern direkt beim bild

    geht das über ein name tag? wie sag ich dann aber dem weiter/zurück link dass er zu diesem anker springen soll?

    • Adrian 18. August 2011 um 13:15 · Antworten

      Ach das meinst du. 😉

      Ja, natürlich geht das: Setz‘ doch einfach einen klassischen HTML-Linkanker. 😉 Also beispielsweise <a name="Bild">BILD</a> und <a href="link-zum-bild.html#Bild">Nächstes Bild</a>

    • Adrian 18. August 2011 um 13:18 · Antworten

      Ein Nachtrag noch: Gewerbliche Links muss ich (aus den Kommentaren) leider löschen. Dein privates Blog kannst du gern verlinken, auf Links zu Shops, etc. verzichte bitte.

  6. Can 18. August 2011 um 19:06 · Antworten

    alles klar, weiß ich bescheid mit dem link
    nur ist meine private seite ziemlich veraltet^^

    aber wie verbinde ich das:
    <a href="link-zum-bild.html#Bild" rel="nofollow">Nächstes Bild</a>

    mit dem

    dadurch wird ja schon der komplette link mit html und allem ausgegeben, wie kann ich da „eingreifen“?

    gruß

  7. Can 18. August 2011 um 19:08 · Antworten

    hm irgendwie hat der code tag nicht funktioniert ?!

    wie kann ich da
    previous_image_link( '', __( 'Zurück' ) )

    noch den anker dran hängen?

    • Adrian 19. August 2011 um 09:59 · Antworten

      Es war nur die grundsätzliche Idee, einen HTML-Anker zu nehmen. 😉
      Bzgl der Umsetzung muss man dann natürlich nochmal schauen. Da bin ich aber auch überfragt, am besten schaust du dich da mal in den WordPress-Supportforen um. In der function-reference habe ich zu dem Thema leider nichts gefunden.

  8. Can 21. August 2011 um 23:08 · Antworten

    alles klar danke

    dann werde ich mich bei gelegenheit mal umschauen 🙂

    lg

  9. Schauecker 17. September 2012 um 15:16 · Antworten

    Ich weiss, dass dieser Thread schon einige Tage her ist: aber ich suche jetzt schon seit Tagen nach einer Lösung für mein Portfolio – die ich in WordPress anscheinend nicht einfach umsetzen kann. Jetzt finde ich diesen Artikel und hoffe, vielleicht weisst du eine Lösung !?! Ich habe jede Menge Bilder, mit denen ich die Seiten aber nicht vollkleistern will – sondern immer nur ein ausgewähltes.

    Ich würde gern eine Galerie mit nur einem (!) (normal grossen Bild) aufbauen. Also ein Bild in der Grösse meiner Wahl. Dieses eine erste Galeriebild sollte dann (via lightbox und ähnlichem) via Klick eine Galerie mit den restlichen Bildern öffnen. – Ich dachte das müsste ja kinderleicht sein. Ist es aber nicht. Stattdesses gibt es jede Menge Vorschaubilder – und Listen-Varianten. –
    Merci vielmals Renée

    • Adrian Korte 17. September 2012 um 15:22 · Antworten

      Ich gehe mal davon aus, dass ich Dich richtig verstehe. Denn dann lässt sich das ganz einfach lösen: Mit dem Artikelbild. Das bindest Du ins Template ein und verweist den Klick auf die passende Attachment-Seite. Die Thumbnail-Funktion von WordPress ist da das Richtige für Dich: http://codex.wordpress.org/Function_Reference/the_post_thumbnail
      Bei Fragen: Ruhig fragen! 😉 Ich stecke derzeit nur total im Umzugsstress und werde daher nicht immer direkt antworten können.

  10. Viktor 19. Dezember 2012 um 16:34 · Antworten

    Der Beitrag ist ja nu was älter. WordPress hat ja die neue Mediathek in 3.5 eingebaut. Was hältst Du denn von der?

  11. Michaela Steidl 27. August 2014 um 21:55 · Antworten

    Wow – Super. Ganz herzlichen Dank für diese großartige Anleitung, die mir gerade sehr weitergeholfen hat!

    Herzliche Grüße
    Michaela

  12. Frank 14. Juni 2016 um 15:08 · Antworten

    Ich bin blutiger Anfänger in der WordPress-Welt. Seit dem Update des ngg-Plugins auf Version 2.1.43 beginnen die Galeriedarstellungen immer erst am Ende der linken Navigation.
    Hat dazu jemand eine Lösung?

    Vielen Dank im voraus.

    Frank

Trackbacks zu diesem Artikel

  1. Google am Indizieren von Anhang-Seiten hindern › wpLove.de

Kommentar hinterlassen

XHTML Du kannst diese Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>