Freunde der Weisheit Guten Abend, und willkommen bei einem weiteren Artikel für die Geeks und WordPress-Freaks. Alle die sich für sowas nicht interessieren dürfen getrost abschalten, alle anderen bitte anschnallen.
In den letzten Tagen und Wochen macht in der Blogosphäre ein Widget von LinkWithin die Runde, mit dem man in drei Klicks genau das bewerkstelligen kann worum es auch in diesem Tutorial geht. Nämlich unter jedem Beitrag die berühmten “ähnlichen Beiträge” anzuzeigen – mit einem Thumbnail zu jedem Beitrag, das wiederum automatisch generiert werden soll. Gucken wir uns zunächst mal das Endergebnis an – so oder so ähnlich soll es aussehen:

Bei der Suche nach der geeigneten Lösung hab’ ich folgendes vorausgesetzt:
- Die Ähnlichen Beiträge sollen (logischerweise) automatisch generiert werden.
- Das Ganze sollte möglichst mit dem Yet Another Related Posts Plugin (YARPP) funktionieren, da das hier bereits installiert war und respektable Ergebnisse lieferte.
- Auch die Thumbnails sollten automatisch generiert werden und nicht händisch erstellt und in jeden Beitrag über die “benutzerdefinierten Felder” reingehackt werden, wie das bei anderen Lösungen, die ich im Netz gefunden habe, der Fall war.
- Falls weitere Plugins nötig sind, sollten diese möglichst schlank sein.
Teil 1: YARPP einrichten
Damit ihr loslegen könnt, solltet ihr euch als erstes das YARPP-Plugin runterladen und in eurem Blog installieren – the usual way. Euer altes Related Posts Plugin könnt ihr derweil deaktivieren und in die Tonne drücken. Ich bin mir sicher, alles was das alte Plugin konnte wird YARPP auch können – wahrscheinlich sogar besser.
Wenn ihr YARPP aktiviert habt, checkt in eurem Admin-Bereich erstmal die YARPP-Einstellungen. Im Punkt “Darstellung (Website)” findet ihr die Einstellung “Ähnliche Beiträge automatisch anzeigen”.

Aktiviert diese, und checkt auf einer beliebigen Artikelseite erstmal ob die Ähnlichen Beiträge korrekt angezeigt werden (falls ihr ein Caching-Plugin benutzt, denkt dran vorher den Cache zu leeren!). YARPP hängt sie bei dieser Einstellung einfach ans Ende eines jeden Posts. Manchmal passt diese Position aber nicht, z.B. wenn man – wie ich – pEtErs affiliate-Plugin benutzt, und die Ähnlichen Beiträge DAVOR ausgeben möchte.
In dem Fall deaktiviert ihr die Option wieder und packt die PHP-Funktion zur Ausgabe der Ähnlichen Beiträge einfach an die entsprechende Stelle in eurem Template (single.php):
1 |
<?php related_posts(); ?> |
Nochmal checken ob die Position passt, ggfs. anpassen. Wenn das dann erledigt ist, kümmern wir uns um die Thumbnails.
Teil 2: Get-The-Image-Plugin
Bei der Suche nach einem möglichst schlanken Plugin, das jeden Beitrag nach Bildern scannt, diese automatisch verkleinert, und das noch nicht outdated ist, fiel meine Wahl auf das Get-The-Image-Plugin von Justin Tadlock.
Das Plugin macht genau das was wir brauchen, nämlich alle Beiträge nach Bildern durchsuchen. Zum einen in den “benutzerdefinierten Feldern” (falls ihr für euer Template bereits Thumbnails in den Felden gespeichert habt), zum anderen in den Attachments, und – ganz wichtig – auch im Inhalt der Beiträge. Einfach hochladen, aktivieren, und weiter mit Schritt drei.
Teil 3: Beides kombinieren
Jetzt kommt der spannende Teil. Wir müssen das Get-The-Image-Plugin jetzt noch mit YARPP kombinieren. Dank der Template-Funktion von YARPP geht auch das fix von der Hand. Besorgt euch einfach mein YARPP-Template für Related Posts mit Thumbs, entpackt das Ganze, und öffnet es mit einem Editor eurer Wahl.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php /* Related Posts with Thumbnail Template Author: alohastone */ ?> <h3 class="relatedhead">Ähnliche Beiträge:</h3> <?php if ($related_query->have_posts()):?> <div id="related"> <?php while ($related_query->have_posts()) : $related_query->the_post(); ?> <div class="item"><?php get_the_image( array( 'default_image' => 'http://aloha.cassiopeia.uberspace.de/wp-content/themes/myvigilance/images/alohaspray.jpg', 'width' => '125', 'height' => '125' ) ); ?><br /> <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a><!-- (<?php the_score(); ?>)--></div> <?php endwhile; ?> </div> <?php else: ?> <p>Keine ähnlichen Beiträge.</p> <?php endif; ?> |
In Zeile 10 kommt der Teil den ihr noch anpassen müsst. Das “default_image” ist das Thumbnail, das angezeigt wird wenn in einem Beitrag mal kein Bild vorhanden ist. Erstellt euch einfach eine Standard-Grafik (z.B. das Logo eures Blogs), ladet es auf euren Webserver, und gebt die URL dazu an.
Gegebenenfalls könnt ihr noch die Breite (width) und Höhe (height) der Thumbnails ändern. In meinem Blog hat der Content-Bereich ‘ne Breite von 600 Pixeln, deswegen lasse ich vier ähnliche Beiträge anzeigen, wobei die Thumbs jeweils 125*125 Pixel breit sind. Wenn ihr weniger Platz habt oder mehr ähnliche Beiträge anzeigen wollt, ändert das Ganze einfach auf 100 oder 80 Pixel.
Sofern das Ganze angepasst ist, ladet ihr die Datei in euer Theme-Verzeichnis (/wp-content/themes/euertheme), und wählt in den YARPP-Einstellungen im Bereich “Darstellung (Website)” den Punkt “Display using a custom template file” aus. Darunter wählt ihr das “yarpp-template-thumbs.php” aus:

Zu guter letzt müsst ihr noch ein paar Regeln in das Stylesheet eures Themes einfügen. Die Überschrift (h3) hat die Klasse .relatedhead, dann kommt ein DIV #related, der das Ganze umgibt, und die ähnlichen Beiträge stehen jeweils in einem DIV mit der Klasse .item:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
h3.relatedhead { font-size: 2em; font-family: Helvetica LT Black, Arial Black, sans-serif; text-transform: uppercase; letter-spacing: -2px; } #related { float:left; width:100%; } .item { font-size: 0.9em; background-color: #fff; width: 127px; height:175px; border: 1px solid #f7f7f7; float: left; padding: 2px; margin: 5px; overflow: hidden; } .item:hover { background-color: #ff0099; border-color: #ccc; } .item a { text-decoration: none !important; color: #000 !important; } .item img { border: 1px solid #ccc; } |
Wirklich wichtig sind nur die floats, damit die Blöcke auch nebeneinander angezeigt werden, und vielleicht das overflow:hidden, damit der Titel des Beitrags abgeschnitten wird wenn er zu lang ist (sieht sonst einfach scheisse aus wenn ein Block zwei, einer drei, und einer vier Zeilen hat). Sofern ihr die Größe der Thumbnails geändert habt, müsst ihr natürlich auch die Größe der DIVs entsprechend anpassen, und natürlich die Farben. Ab hier heisst es einfach ändern, speichern, ausprobieren.
Falls irgendwelche Probleme oder Fragen auftauchen sollten, einfach Kommentar dalassen und wir versuchen das zu lösen. Im Einsatz könnt ihr das Ganze sowohl hier im Blog, als auch beim pEtEr sehen. Der hatte keine Lust auf das Tutorial zu warten und hat das auch ganz gut alleine hinbekommen ;)
88 comments
Habs erst mal nur überflogen, aber sieht nach einem super Tutorial aus.
Werde ich nächste Woche mal dank deiner Anleitung in Angriff nehmen, sobald die Zeit zum Basteln da ist.
Vielen Dank!
Gute Arbeit! Wie du richtig erkannt hast, habe ich es schon umgesetzt und möchte noch zwei Kleinigkeiten, die mir noch aufgefallen sind, hinzufügen.
Da meine Beitragsbilder die unterschiedlichsten Formate haben wurden manche Related-Post-Bilder verzerrt oder angeschnitten dargestellt.
Darum habe ich das Thumbnail noch einmal extra formatiert:
width gibt die maximale Breite des Vorschaubilds an, bei mir 105px, height steht auf “auto” und passt sich damit der Bildbreite im richtigen Verhältnis an und max-height beschränkt die maximale höhe auf eben diese 105px.
Des weiteren habe ich viele ellenlange Titel, z.B. beim Music-Monday. Darum habe ich eine “Shorten Titel” Funktion in die functions.php eingefügt, die schaut so aus:
… und die wird dann in dem YARPP-Template so eingebunden:
Ich hoffe mal, dass der ganze Quelltext richtig dargestellt wird. Ansonsten muss Carsten noch mal nachformatieren ;)
Wie schon gesagt, sehr gute Arbeit und sehr nützliche und schöne Erweiterung!
pEtEr, danke dir für die zwei Ergänzungen, beides sehr sinnvoll :)
Hab den Code mal entsprechend formatiert, ist auch soweit alles angekommen, bis auf die Einbindung im YARPP-Template. Vielleicht kannste mir den Code dazu per eMail schicken oder bei pastie hochladen, dann trag ich das in deinem Kommentar noch nach (WordPress und Code – the neverending story ;) ).
Ansonsten super, vielen Dank!
Hier nun noch das editierte YARPP-Template: http://pastie.org/718011
Anmerkung zu diesem Template:
Ich habe das diese Vorlage so abgeändert, dass wenn keine ähnlichen Beiträge vorliegen, die Related-Post-Box auch nicht angezeigt wird. Finde ich besser als dieses “keine ähnlichen Beiträge gefunden”-Info, ist überflüssig. ;)
Wunderbar, danke!
Ist eingefügt :)
Haben sich mit dieser Maßnahmen eigentlich eure Zahlen (z.B. mehr PIs/Besucher) verbessert? Habt ihr das mal überprüft?
Gruß,
Marc
Puh da fragst du mich zuviel, so genau hab ich meine Besucherzahlen nicht im Blick. Könnte auch im Nachhinein nicht mehr sagen seit wann das Plugin jetzt so läuft.
Hab aber gerade mal die Werte der letzten 30 Tage durchgeguckt: die PIs/Besucher sind eigentlich konstant, genauso die “Verweildauer auf der Website”. Wobei ich denke solche Zahlen hängen von so vielen Faktoren ab (z.B. Postingfrequenz, Art der Postings, Verlinkung der Postings im Web, etc.), dass man Schwankungen nicht wirklich auf dieses Plugin reduzieren kann.
Ich glaube, dass Du wie ich auch einen Großteil Deines Traffics direkt über Google bekommst. Diese Nutzer könnten durch die verbesserte Darstellung der ähnlichen Beiträge nun eher in die Versuchung kommen, einen weiteren Beitrag aufzurufen. Im Idealfall sollte sich diese Maßnahme also merklich auswirken.
Die Absprungrate/Bounce Rate nach Google Analytics sollte sollte auch sinken. Meine ist katastrophal hoch und dagegen muss ich etwas tun.
Hi,
danke für das super Tutorial. Genau was ich für 2 meiner Blogs gesucht habe … mir ging es auch immer sehr auf die nerven, dass nichts visualisiert wurde und man nur Textlinks bei den related Artikeln hatte.
Werds nachher mal ausprobieren … das könnte die PI wirklich erhöhen, da die Leser interessante Artikel sofort sehen können und vor allem nicht überlesen.
#wordpress – HowTo: Related Posts mit #Thumbnails https://www.alohastone.com/2009/11/27/howto-related-posts-mit-thumbnails/ #webdesign
@Marc: Mir ist das auch erst klar geworden als du es erwähnt hast. Denn tatsächlich hast du Recht: auch bei mir kommt der Großteil der Besucher über Google hierher; die Absprungrate ist dementsprechend groß. Die schickere Darstellung der ähnlichen Beiträge könnte sich wirklich positiv auf Klicks & Verweildauer auswirken, gerade bei Googlern.
Wobei man auch da natürlich noch sieben muss. Wer über “Barbara Schöneberger Nackt” hier landet, ist bestimmt nicht auf der Suche nach guten Mixtapes. Da helfen dann auch keine schönen ähnlichen Beiträge ;)
Aber sofern der Kontext Musik o.ä. ist könnte es wirklich was bringen. Wüsste nur nicht wie man das wirklich gut auswerten könnte. Wenn du das hinkriegst würde mich der Effekt auch interessieren.
@Stefan: Nichts zu danken. Ich wünsche dir dass es was bringt ;)
Zu guter letzt noch ein manueller Trackback auf den Beitrag in Caschys Blog. Aus mir unerfindlichen Gründen hat WordPress den (noch?) nicht automatisch gesetzt: http://stadt-bremerhaven.de/wordpress-linkwithin-mit-mehrwert-fuer-leser/
Ätsch, war doch ganz easy und funktioniert prima! Muss ja, bei dieser verständlichen Anleitung! ;-)
Über dieses Blog-Widget bin ich gerade gestolpert:
LinkWithin – related posts with thumbnails
http://www.linkwithin.com/learn?ref=widget
Werd ich auch mal testen.
Eben das galt es ja zu “kopieren”, bzw. eine Alternative dazu zu schaffen. Ohne dass man seine Beiträge von fremden Anbieten indizieren lassen muss. Alles selbst gehostet. Deswegen ja überhaupt erst das Tutorial. Das Widget von LinkWithin ist auch ganz oben im Post verlinkt.
Das Widget kann nix wegen Redirect. Bin aber tatsächlich woanders drüber gestolpert. Jetzt probiere ich mal Deine Variante.
Danke für die sehr gute Anleitung. Ich habe das Theme Arthemia laufen und da ist schon eine Thumbnailerstellung dabei. Also habe ich auf Get the Image verzichtet und das YARPP Thema etwas umgebaut.
Hier mal die Datei
[code]
das interessiert Dich auch:
have_posts()):?>
have_posts()) : $related_query->the_post(); ?>
<a href="” rel=”bookmark”>
<img src="/scripts/timthumb.php?src=//downloads/a.png&w=125&h=125&zc=1&q=100″
alt=”” class=”left” width=”125px” height=”125px” />
<img src="/scripts/timthumb.php?src=/&w=125&h=125&zc=1&q=100″
alt=”” class=”left” width=”125px” height=”125px” />
<a href="” rel=”bookmark”><!– ()–>
Keine ähnlichen Beiträge.
[/CODE]
Villeicht hilft es ja dem einem oder anderem.
Danke für die Ergänzung. Wenn das Theme natürlich schon Thumbnails mitliefert kann man auf das Extra-Plugin natürlich verzichten.
Ich bin mir nicht sicher ob WordPress den Code richtig angenommen hat. Kannst du das Ganze vielleicht nochmal bei pastie.org hochladen und den Link hier reinstellen? Dann kann ich den Code nochmal korrekt reinbringen, habe den Eindruck dass WP da manches verschluckt hat.
Wiegesagt, merci für’s Sharen :D
Mein Theme (Render Magazine) macht die Thumbnailerstellung auch von alleine. Wenn ich das Ganze jetzt nach deiner Anleitung einrichte funktioniert das zu 90% zwar, aber bei manchen Artiklen zieht er sich das Bild dann nicht oder er nimmt Bilder aus dem Artikel anstatt dem Hauptbild/Thumbnail.
Daher wäre ich an der Lösung ohne Get The image auch sehr interessiert. ;)
Wenn dein Theme die Thumbnails von alleine erstellt kannst du auf Get The Image verzichten. Wäre nur interessant zu wissen wo es die Bilder abspeichert. Ich vermute in einem “benutzerdefinierten Feld”.
Geh mal in deinen Admin-Bereich, bearbeite einen vorhandenen Artikel, und schau unter den benutzerdefinierten Feldern mal nach wie das Feld für das Thumbnail heisst.
Wenn du den Namen hast kann YARPP sich das Thumbnail einfach da rausziehen – den Code dazu kann ich dir dann hier posten (bzw. gibt’s in YARPP dazu schon ein Template das man nur anpassen muss).
Moin,
danke für die Antwort.
Wenn ich ein Bild in den Artikel einfüge bekomme ich automatisch jeweils eine Kopie 300×300 und 150×150 erstellt.
Habe nach meinem Kommentar hier auch entdeckt, dass ich jetzt bei Artikel erstellen/bearbeiten ein Feld Beitrags-Miniaturbild habe und definieren kann. Insofern interessant, dass ich in dem Fall, dass wenn mein automatisches Thumbnail mal nicht wirklich gut gewählt/zugeschnitten ist, ich es nochmal selbst definieren kann.
Aber eine größtenteils automatische Lösung ist natürlich komfortabler.
Jetzt die Frage: Wie bekomme ich Get The Image am besten wieder raus. Einfach deaktivieren geht ja nicht, ich müsste deine YARPP Template noch modifizieren (ohne große php Kenntnisse). ;)
Meine Thumbnailausgabe auf der Startseite sieht folgendermaßen aus:
http://www.pastie.org/826842.txt
Danke für deine Hilfe.
Das müsstest du eigentlich genau so übernehmen können, und die Get The Image Funktion damit einfach ersetzen können. Das fertige Template sähe dann so aus:
http://pastie.org/828559
Eigentlich müsste es damit funktionieren. Eventuell musst du die Größe des Thumbnails noch anpassen (am einfachsten via CSS denke ich), falls du unterschiedlich große Thumbnails für die Beiträge verwendest.
Interessant wäre auch zu sehen was dein Theme macht wenn zu dem Beitrag kein Thumbnail existiert. Entweder er zeigt ein “Kein-Bild-Thumbnail” an, oder gar kein Bild. Musst du mal testen.
Sorry für die wilde Kommentarverschachtelung, ist mir jetzt erst aufgefallen.
Funktioniert ohne Probleme, vielen Dank.
Aber ich möchte in der Tat die Thumbnailgröße bei den related posts ändern, allerdings ohne die ursprünglichen Thumbnails auf der Startseite mit zu verkleinern. Deshalb kann ich das über die CSS ja nicht bewerkstelligen oder täusche ich mich da?
Kann ich in deinem Template eine Höhen- und Breitenangabe mit einbauen? Und wenn ja, wie? (Wie gesagt, php Kentnisse streben gegen 0) ;)
Danke für deine Hilfe
Wegen der Kommentarverschachtelung mach dir kein Kopf, das Theme ist noch nicht ganz ready dafür ;)
Was die Thumbnails angeht: Ich hab mal kurz gegoogelt, und wie es aussieht nutzt die Thumbnail-Funktion deines Themes die Standard-Thumbnails die von WordPress generiert werden. Das heisst, wenn in deinem WordPress eingestellt ist dass Thumbnails eine Größe von 150*150 Pixel haben sollen, dann sind die Thumbnails bei den Related Posts auch 150*150 Pixel groß. Ich bin leider was PHP angeht auch nicht der Profi, deswegen kann ich dir nicht sagen wie du die Funktion so umbauen kannst dass er zusätzlich zu den “normalen” Thumbnails nochmal extra Thumbnails für die Related Posts generiert.
Du kannst aber einfach die Standard-Thumbnails anzeigen und per CSS für die Related Posts verkleinern. Einfach folgenden Code in dein CSS-File einfügen:
Und die Größen so anpassen wie du’s haben willst.
Sieht natürlich nur ordentlich aus, wenn die Thumbnails auch quadratisch sind (also 300*300 oder 200*200 etc.). Wenn manche Thumbnails aber 200*150 Pixel groß sind, verzerrt das natürlich. In dem Fall könntest du height auf “auto !important;” stellen, so wie pEtEr das auch gemacht hat.
Dann sind die Thumbnails zwar nicht quadratisch, verzerren aber wenigstens nicht.
Falls irgendwas nicht klappt, melde dich einfach nochmal – am besten mit Link zur Seite wo ich mir das mal angucken kann.
@ peter oder alohastone pls help !!!!! :D
also erstmal hammer tutorial hat auf anhieb gefunzt, wunderbar^^
jetzt wollte ich den tip vom peter umsetzen zwecks bilder werden breit gezogen, wo muss ich jetzt genau “max-height:” einsetzen? also ich vermute mal im css klar, aber wenn ich jetzt den css schnippsel von aloha habe, einfach in .item ?
THX
Erstmal vielen Dank ;)
Zu deinem Problem:
.item img { } wäre die korrekte Stelle.
Erstmal danke für das Tutorial. Das einbauen hat soweit wunderbar geklappt. :)
Aber eine Frage tut sich mir dann eben doch auf. Die Bilder bei mir in den Artikeln sind fast alle nur verlinkt (also natürlich nicht per Textlink, schon per Bildlink). Ich hatte verstanden, dass das “get the image”-plugin diese Bilder trotzdem auch mit abgreift?!
Tut’s aber irgendwie nicht … ich bekomm’ unter fast allen Artikeln ein “kein Bild vorhanden”-Bild angezeigt, obwohl durchaus Bilder in den entsprechenden Artikeln sind. Aber eben extern per Bildlink eingefügt.
Hab ich jetzt irgendeinen wichtigen Schritt übersehen oder kann mir da das “get the image”-plugin doch nicht weiter helfen?
Das Plugin kann leider nur die Bilder verwenden die an den Beiträgen “dranhängen” – sprich: solche die du beim Erstellen des Beitrags mit diesem WordPress Mediathek Dings hochgeladen und in den Beitrag eingefügt hast.
Externe Bilder (Flickr, Imagehoster, etc.) funktionieren damit nicht.
Hm … okay, das ist blöd.
Aber Bilder die ich darüber hochlade landen ja im uploads-Ordner. Ich hab echt so gut wie gar keine Ahnung von der Materie, aber holt sich das Plugin dann die Infos hinsichtlich der Bilder, in dem es diesen Ordner “absucht”? Könnte ich dem Plugin dann nicht einfach “sagen”, es soll noch einen weiteren Ordner durchsuchen?
Die Bilder liegen nämlich schon auf dem gleichen Webspace … nur da ich noch eine Galerie nebenbei verwalte und nicht doppelt Bilder hochladen will, liegen die im “Galerie”-Ordner. Gibt’s da nicht irgendwie die Möglichkeit, dass der auch noch “durchsucht” wird?
Nein, das Plugin sucht nicht den Ordner ab.
Wenn du einen Beitrag schreibst, und dann über WordPress ein Bild hochlädst, das du in den Beitrag einfügst, wird das quasi als Anhang im Beitrag gespeichert. Frag mich nicht nach Details, so gut kenn ich mich mit WordPress auch nicht aus ;)
Jedenfalls erkennt das Plugin solche Anhänge, und nutzt sie dann als Thumbnail.
Eine Alternative wäre, dass du für jeden Beitrag, in den du externe Bilder einbindest, ein “Benutzerdefiniertes Feld” (z.B. “thumbnail” oder “bild”) erstellst, in das du dann den Pfad zum Bild reinschreibst.
Dann müsste man dem Get-The-Image-Plugin noch sagen wie dieses benutzerdefinierte Feld heisst, und es würde auch darin nach Bildern suchen.
Ich hab das aber selbst noch nie gemacht, und müsste auch erstmal Google durchforsten um rauszukriegen wie das geht. Könnte ein paar Tage dauern…
Also wenn das irgendwie mal in deinen Zeitplan passt, wäre das super und ich dir zu ewigen Dank verpflichtet. ^^ :)
Ich seh da leider so gar nicht durch, könnte mir aber vorstellen, dass auch andere die externe Verlinkung nutzen.
Heya!
Ersteinmal: Super Plugin, gefällt mir richtig gut. Habe es auch schon weitesgehend angepasst, nur eine Sache will nicht so wie ich will…
Ähnlich wie meine Vorrednerin Sue, habe ich das Problem dass nicht alle Bilder korrekt dargestellt werden und ich bin ehrlich gesagt ein wenig ratlos, denn bei mir ist es so, dass alle Bilder auch bei mir im Blog hochgeladen wurden.
Das einzige was ich mir denken könnte, wäre, dass das Plugin nur Bilder anzeigt die direkt mit dem Beitrag hochgeladen wurden. Also ich binde manchmal ja in Beiträgen ein Bild ein, welches ich zwar schoneinmal selber hochgeladen habe aber eben nicht bei der Erstellung des aktuellen Beitrages hochlade, sondern eben über die Benutzerdfinierten Felder ( thumb und dann rechts halt die Bildadresse im eigenen Blog).
Du meintest, dass man das dem Get-the-Plugin “sagen” könnte. Wüsste evtl. auch jemand WIE? Wäre überaus dankbar für jegliche Hilfe :)
Du musst nur rausfinden wie dieses benutzerdefinierte Feld, in dem du deine Bilder speicherst, heisst. Dann das YARPP-Template entsprechend anpassen:
Aus:
Wird:
Wobei ‘custom_key’ den Namen deines benutzerdefinierten Feldes enthält – in dem Fall wäre das “Feature”.
Ich nochmal. ;) Ich habe auch das Problem, dass bei mir nur die Bilder als Thumbs angezeigt werden, die ich im Post direkt hochgeladen habe. Wenn ich mal ein Bild aus vergangenen Beiträgen wiederverwendet habe, wird das leider nicht erkannt.
Ich habe es dann mit deiner Modifikation versucht aber da zeigt es mir dann gar keine Bilder mehr an. Das benutzerdefinierte Feld heißt bei mir “Image” und damit geht es leider nicht. Mein Code sieht wiefolgt aus:
http://pastie.org/1277825
Hast du vielleicht noch eine Idee? Ich werde derzeit weiter testen. Das wurmt mich jetzt grade. *g*
WOOOOOOHOOOOOOOOOOOO!
Mein neuer Meister hat einen Namen: alohastone! :)
Funzt perfekt!
Sehr gut! Schön wenn mal was auf Anhieb funktioniert :)
Hallo,
also irgendwas scheine ich falsch gemacht, siehe: http://in-images.de/site/2010/02/beauty-retusche-portrait-wokshop/
Die thumbs erscheinen so gesehen, allerdings obwohl der ähnliche artikel bilder enthält werden sie nicht eingesetzt?!
Kann mir jemand helfen?
Artikel hier ist super und wenns dann geklappt hat wirklich schick!
Hey intoxi,
erstmal hallo und willkommen – schön dass du den Weg hierher gefunden hast :)
Mir fallen ad-hoc eigentlich nur drei Fehlerquellen für dein Problem ein:
Nachdem ich mir die Bilder gerade mal angeguckt habe, scheint Letzteres der Fall zu sein. Die Fotos liegen auf Photobucket – das Get-The-Image-Plugin kann aber nur Bilder “erkennen”, die auf deinem Server liegen. Genauer gesagt sogar nur solche, die du beim Erstellen des Beitrags in die Mediathek hochgeladen und in den Artikel gepackt hast. Diese Bilder werden quasi als Attachment zu dem Beitrag gespeichert, und das Plugin erkennt diese Attachments dann, und nimmt sie als Thumbnail.
Das gleiche Problem hatten auch Sue und Palloo (siehe oben).
Um das zu lösen musst du deine Blogpostings einzeln bearbeiten, und entweder
Dann sollte es klappen :)
Danke dir, lag wohl am Datenbank Dump und das die Bilder neu “eingelesen” werden mussten. Ich habe aber trotzdem noch eine Frage Peter schreibt hier wie man die Links verkürzen kann und hat auch ein tpl hochgeladen, das spuckt bei mir aber nur einen Fehler aus. Wie kann ich das mit den verkürzten Links realisieren?
Danke :)
Dazu packst du einfach folgenden Code von Peter in die
functions.php
deines Themes:Und ersetzt in dem YARPP-Template das hier:
durch das hier:
Und schon sollte das klappen.
Wenn der Text immer noch zu lang ist, kannst du
$chars_limit
noch runtersetzen.Gut auch mit dem Code kommt bei mir folgender Fehler:
Parse error: syntax error, unexpected ‘;’
Was mach ich denn falsch?
Irgendwas hast du falsch kopiert oder an der falschen Stelle eingefügt.
Poste mal bitte deine komplette
functions.php
auf pastie.org und pack den Link hier rein.Also hier meine functions.php : http://pastie.org/995115
Und inzwischen habe ich einen neuen Fehler da ich mit dem Blog nochmal umgezogen bin siehe:
http://www.in-images.softcreatr.de/site/2010/02/mini-workshop-augen-umfarben/
Irgendwie bekomm ichs auch nich weg, obwohl ich das Plugin nochmal komplett neu installiert hab (also das TuT hier nochmal von neu).
Danke :)
Wenn mich nicht alles täuscht fehlt in deiner functions.php am Ende das
Was den anderen Fehler angeht, kommt der wahrscheinlich vom Kopieren und Einfügen.
Lösch die < und > Zeichen mal weg, und füg sie händisch ein (also per Tastatur, nicht per Rechtsklick > Einfügen. Und das Leerzeichen zwischen Klammer und Fragezeichen bei
auch noch weg. Dann sollte der Bereich so aussehen:
Wahrscheinlich hast du dir das Leerzeichen und die “falschen Klammern” eingefangen, als du den Text hier kopiert hast. Code posten in WordPress war und ist nicht so einfach, der zerhackt schonmal gerne was ;)
Hallo,
bekomme den Fehler einfach nicht weg und lasse es jetzt auch einfach. Danke für deine Mühe!
Habs jetzt doch mal wieder eingebaut – hatte die selben Probleme wie oben geschrieben. Es liegt irgendwie an meinem FTP-Upload hab sonst nie Probleme….ich habe die Datei mehr oder weniger lokal geändert dann gings?!
Danke für die Anleitung!
Hm mir schleierhaft woher das kommt.
Aber schön dass es noch geklappt hat :)
Danke für die Anleitung
Funktioniert prima, habs bei mir noch etwas angepasst(Rahmen um die Bilder)
Gruß Art of Pic
@Art of Pic: Sieht sehr gut aus. Danke für’s Teilen :)
1000 Dank! :) Ich habs auch entlich zu mlaufen bekommen :)
Na das sieht doch prächtig aus, liebe Chaosmacherin :)
Blöd zwar, dass du alle Beiträge von Hand nachbearbeiten musstest; aber Hauptsache ‘s funzt jetzt ;)
Nochmal als Hinweis für alle die Probleme mit ihren Thumbnails haben:
Mit Hilfe des Plugins “Generate Post Thumbnails” könnt ihr euch für alle alten Beiträge automatisch ein Thumbnail generieren lassen. Das funktioniert auch bei Beiträgen, in denen ihr nur extern gehostete Bilder eingebunden habt.
In den Optionen lässt sich einstellen das wievielte Bild eines Postings dafür genommen werden soll (logisch wäre wahrscheinlich immer das erste zu nehmen).
Somit braucht ihr nicht jeden Beitrag einzeln und von Hand nachzubearbeiten – das spart u.U. eine Menge Zeit und Arbeit.
Danke für den Hinweis an den Pixelroiber, der in seinem Beitrag noch zwei weitere Thumbnail Plugins erwähnt. So z.B. das Plugin “Regenerate Thumbnails“, das alle Thumbnails neu generiert (für den Fall dass man z.B. die Größe der Thumbnails nachträglich ändert – WordPress wendet die geänderte Größe nämlich nur auf neue Thumbnails an), und das Plugin “Auto Post Thumbnail“, das sich darum kümmert, dass jeder (neu erstellte) Beitrag automatisch ein Thumbnail verpasst bekommt.
Hallo
erstmal danke für die tolle Anleitung. Ich habe den Artikel vor einiger Zeit schoneinmal gelesen und mich an die Umsetzung gesetzt. Damals hatte ich irgendwann aufgegeben, heute bin ich sogar n Schritt weiter und habe das ganze zum laufen gebracht. Aaaaber .. leider stimmt
das Finetuning noch nciht so ganz.
Ich habe die Anzeige mittels
verwirklicht, damit ich selber bestimmen kann wo denn das ganze ausgegeben wird. Nur passt es trotzdem nicht.
Das ganze wird nicht zwischen den hr tags angezeigt. Ich habe folgendes verwendet:
Nur leider springt mir die Ausgabe weiter runter, zudem kann man den Titel der Vorschau nicht sehen.
Zu sehen hier: http://www.elektroaktivisten.de/2010/08/artist-cagatay-sen-c-a-g/
Kann mir jemand Tipps geben ?
Beste Grüße
Hallo Tino!
Vielleicht kannst du deine Codeschnipsel nochmal auf pastie.org hochladen, und die Links dazu hier reinpacken. WordPress hat leider immer derbe Probleme mit Code-Tags in Kommentaren, wie du siehst.
Dann schau ich mir das gerne mal an :)
Hallo auch :)
also ich hab YARPS wieder aktiviert mit folgenden ergebnis:
http://www.elektroaktivisten.de/2010/08/artist-cagatay-sen-c-a-g/
weiter runter scrollen.
Die Style.css und dein php schauen so aus:
http://pastie.org/1072593
grüße
:)
so ich hab das ganze mal in ein extra div. und somit schaut es auch nach was aus.
hier der code:
http://pastie.org/1072669
was noch fehlt ist der text. mal schauen.. bin drannnnn
evtl hab ich alles bevor du dich einschaltest :)
also das mit der Schrift bekomme ich nicht hin, wird nicht angezeigt?!!
test
In deinem Theme wird die Klasse
.item
schon verwendet.In deinem CSS-Code findest du unter dem Punkt
/* Slider1 */
den Eintrag:Den müsstest du eigentlich rauslöschen, damit die Related Posts richtig angezeigt werden. Aller Voraussicht nach wird dann aber was anderes nicht richtig angezeigt.
Deswegen mach einfach folgendes: sowohl in dem YARPP-Template, als auch in dem CSS dafür, änderst du den Namen von
.item
auf was anderes – z.B..related_item
.Das Ganze sähe dann so aus: http://pastie.org/1073181
So kommen sich die Related Posts und das andere Element, für das dein Theme die Klasse
.item
benutzt, nicht mehr in die Quere. Dann sollte alles funktionieren.ja vielen vielen dank, genau das war mein problem. wäre ich nie drauf gekommen. ich habe den slide1 gleich komplett auskommentiert da ich den eh nicht brauch und voila alles ist schön :)
vielen dank dafür
tino
Wunderbar. Dann ist’s natürlich noch einfacher ;)
Nichts zu danken, und viel Spaß damit!
schöne sache das ganze, zu bestaunen hier -> http://www.elektroaktivisten.de/2010/06/ep-whispers-of-mars/ :)
noch eine frage habe ich, was benutzt du für ein kommentar plugin? gefällt mir. kannst es mir ja auch als mail schicken.
grüße
jetzt habe ich auch noch mal eine frage:
ich habe das plugin Generate Post Thumbnails bei mir laufen lassen und jetzt das problem, dass meine vorschaubilder durcheinander sind. sprich es wird nicht mehr bild 1 angezeigt sondern das welches das plugin neu erstellt hat. bild 1 ist aber extra von der größe angepasst für related posts. kann man deinen code so schreiben das dieser immer das bild 1 (gallery je post) anzeigt?
grüße
Na also, das sieht doch gut aus :)
Die Plugins die hier laufen findest du alle unter “ABOUT”.
Was Kommentare angeht läuft jQuery Comment Preview und WP Ajax Edit Comments.
Super Tutorial und Anregungen die mir bei einem kleinen Problem geholfen haben. Danke dir und den Kommentatoren :)
Freut mich immer wieder, neue Blogger im Netz zu treffen – was soviel heißt, das Du in meinem Feed-Reader gefallen bist!
Ich danke dir für die netten Worte.
Freut mich dass wir dir helfen konnten, und natürlich dass mir das einen Leser mehr beschert hat ;) Ich hoffe du bekommst in meinem Feed auch das was du suchst – WordPress bezogene Artikel sind ja hier eher die Ausnahme. Dennoch, wiegesagt, danke!
hey,
ich finde es toll yarpp weiter nutzen zu können und mein vorschaubild endlich zu haben :o) !!!
nur wie bekomme ich es hin, dass das bild links steht und der text recht ???
finda das sieht geordneter aus. vielen dank schonmal
Dafür müsste man nur das CSS anpassen. Sollte nicht so der Aufwand sein. Ich poste dir die Tage mal den Code dazu – wenn nicht jemand anders schneller ist ;)
Ein zauberhaftes Tutorial. Es hat alles auf Anhieb funktioniert!
Dankeschön dafür.
Das größte für mich wäre wenn man verschiedenen Kategorien, auch verschieden Dummy Bilder zuweisen könnte. Keine Ahnung ob dies mit einer if Funktion möglich ist. Dafür kenne ich mich mit php dann doch viel zu wenig aus.
Falls du es wissen solltest gib mir einfach Bescheid. Danke!
Arne
Theoretisch müsste es mit YARPP möglich sein zu jedem Beitrag auch gleich die Kategorie auszulesen, und abhängig davon ein Bild anzuzeigen. Ich probier das mal aus.
Bald ist der Artikel 1 Jahr alt und es wird immer noch fleißig kommentiert. Deine Doku ist aber wirklich auch super und jetzt habe ich endlich mal die Zeit gefunden mich auch damit zu beschäftigen. Ein paar kleine Änderungen werde ich sicher noch vornehmen aber es klappt aktuell schon ganz gut.
Vielen Dank für die Doku. Da sehen die Related Posts gleich viel schicker aus. :)
Es wundert mich selbst wie gefragt das Ganze (immer noch) ist. Toll! :)
Schön dass es auch bei dir geklappt hat, sieht doch schon sehr vorzeigbar aus :)
Natürlich sind auch alle anderen eingeladen ihre Umsetzung hier zu Verlinken, und gerne auch den entsprechenden Code dazu zu teilen (am besten über pastie.org, oder einen ähnlichen Dienst, da WordPress bekanntermaßen Probleme mit Code hat). Jeder hat ja andere Vorstellungen wie das Ganze aussehen soll. Und teilen ist immer gut :D