HowTo: Related Posts mit Thumbnails

  • 154 views
  • 3 minute read

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:

Related Posts mit Thumbnails
Related Posts mit Thumbnails

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“.

YARPP - Beiträge autom. anzeigen
YARPP - Beiträge autom. 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):

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.

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:

YARPP - Template auswählen
YARPP - Template auswählen

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:

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 ;)

Total
6
Shares
Like 4
Tweet
Pin it 2
Share
Share
Share
Related Topics

Hat 2006 dieses Blog gestartet, und bloggt hier seitdem über Beatmucke, Hip-Hop, Reggae, und alles was dazu gehört, dazwischen liegt, und davor kam. Sammelt farbige, signierte, limitierte, und ganz normale Schallplatten. Alter Romantiker & Genießer. Liebt die Frauen, und postet auch gerne mal NSFW. Findet er aber nicht schlimm.

You May Also Like

88 comments

  1. Pingback: testspiel

  2. 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!

    Antworten
  3. Pingback: pEtEr withoutfield
  4. Pingback: Patrick - HFConcepts

  5. 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!

    Antworten

  6. 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!

    Antworten

  7. 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. ;)

    Antworten

  10. 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.

    Antworten

  11. 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.

    Antworten

  12. 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.

    Antworten
  13. Pingback: Links (27. November 2009 - 29. November 2009) | Testspiel.de
  15. Pingback: Ira Gaines
  16. Pingback: Hash WordPress
  17. Pingback: Mark Eger
  18. Pingback: Patrick - HFConcepts
  19. Pingback: Hash WordPress

  20. @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/

    Antworten

  23. 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.

    Antworten
  25. Pingback: Mark Eger
  26. Pingback: Dorthin.com

  27. 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.

    Antworten

    1. 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

      Antworten

      1. 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. ;)

        Antworten

        1. 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).

          Antworten

          1. 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.

  28. Pingback: Luigi Delijo
  29. Pingback: Luigi Delijo

  30. 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.

    Antworten

    1. 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

      Antworten

      1. 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.

        Antworten

  31. @ 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

    Antworten

    1. Erstmal vielen Dank ;)

      Zu deinem Problem:

      .item img { } wäre die korrekte Stelle.

      Antworten
  32. Pingback: Daniel Wittberger

  33. 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?

    Antworten

    1. 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.

      Antworten

  34. 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?

    Antworten

    1. 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…

      Antworten

  35. 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.

    Antworten
  36. Pingback: Bloggewerkel « TiMiDa – Die mit dem Blitzlicht tanzt!

  37. 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 :)

    Antworten

  38. 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“.

    Antworten

    1. 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*

      Antworten
  41. Pingback: pEtEr withoutfield

  43. 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:

    1. Du hast das Get-The-Image-Plugin nicht installiert / aktiviert (scheidet eigentlich aus, weil er das Standard-Bild ja anzeigt)
    2. In das YARPP-Template hat sich ein Fehler eingeschlichen (vielleicht Tipp-Fehler o.ä.)
    3. Die Fotos die du in dem Beitrag eingebunden hast, hast du nicht mit der Mediathek von WordPress hochgeladen

    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

    • zu jedem Beitrag ein Miniaturbild in die Mediathek hochladen oder
    • ein „Benutzerdefiniertes Feld“ (z.B. „Thumbnail“) erstellen, in das du die Photobucket-URL zu dem Bild reinschreibst, das du als Thumbnail nutzen möchtest. Den Namen des Benutzerdefinierten Feldes packst du dann in dein YARPP-Template mit rein, so wie ich das weiter oben beschrieben habe.

    Dann sollte es klappen :)

    Antworten

    1. 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 :)

      Antworten

  44. 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.

    Antworten

  45. 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.

    Antworten

  47. 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 ;)

    Antworten

      1. 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!

        Antworten

  52. 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.

    Antworten

  53. 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

    Antworten

  54. 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 :)

    Antworten

  55. 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.

    Antworten

    1. 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

      Antworten

    1. 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

      Antworten

  59. 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!

    Antworten

  60. 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!

    Antworten

  61. 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

    Antworten

  62. 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

    Antworten

  63. 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. :)

    Antworten

    1. 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

      Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*
*

  • Genau! @forever__tired
    1
  • Bloß nicht dehydrieren! #healthylifestyle #tanning
    1
  • Carsten du #schmutz!
    0
  • Ein Vintage Rahmen wie er im Buche steht. Bisschen stolz 😊 #kambala #wood #africa #bilderrahmen #katzensprung
    3
  • "Lutan Fyah in weiss" und der Dog. Reines Dreamteam 😄 #turban #holzstaubistmeinparfum #aslaistchef
    0
  • Baum (ge)fällt! #frühjahrsputz @ #WUTZ
    0
About us
spreading the aloha spirit