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
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
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> » <?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ü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
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!
21 Kommentare zu "Einfache Bildergalerie ohne Plugin"
… 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.
Warum so “kompliziert”?
Es geht doch auch einfach mit den Shortcode [gallery] ?!?!
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.
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…..
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.
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.
Danke für den Tipp!
Ich warte ja immer noch auf eine gute interne WordPress-Lösung für eine Gallery.. .(
Aber das ist doch eine WordPress-interne Lösung.
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
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.
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 Artikellö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?
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>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.
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ß
hm irgendwie hat der code tag nicht funktioniert ?!
wie kann ich da
previous_image_link( '', __( 'Zurück' ) )noch den anker dran hängen?
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.
alles klar danke
dann werde ich mich bei gelegenheit mal umschauen
lg
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
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
Ich stecke derzeit nur total im Umzugsstress und werde daher nicht immer direkt antworten können.
Bei Fragen: Ruhig fragen!
Der Beitrag ist ja nu was älter. WordPress hat ja die neue Mediathek in 3.5 eingebaut. Was hältst Du denn von der?
Trackbacks zu diesem Artikel