WordPress Thumbnailseite mit Artikelbildern

Veröffentlicht am von Matthias Pabst | Zuletzt aktualisiert am | 55 Kommentare

Für mein Photoblog pabst-photo.com wollte ich vor kurzem eine Seite haben, die einfach nur alle Artikelbilder (post thumbnails) von allen Artikeln als Thumbnails auflistet und mit den jeweiligen Artikeln verlinkt. Somit habe ich eine schöne, visuelle Übersicht über alle Artikel in meinem Photoblog. Vorher hatte ich das Plugin „Category Grid View“ im Einsatz, welches jedoch nicht einwandfrei gearbeitet hat, da es die Lightbox auf der kompletten Website zerstört hat.

Die neue Thumbnailseite sieht nun so aus:

pabst-photo.com – Thumbnails

Um dies zu realisieren, habe ich eine neues Seiten-Template (page template) erstellt und mit folgendem Code befüllt:

Mit der Variable $grids kann ich angeben, wie viele Spalten angezeigt werden sollen.  Um die rechte Spalte anders zu stylen als die linke(n) Spalten, findet außerdem über den Counter eine Unterscheidung statt, welche Spalte gerade ausgegeben wird. Die Variable $titlelength gibt an, auf wie viele Zeichen zu lange Artikeltitel gekürzt werden sollen. So kann ich verhindern, dass zu lange Titel umgebrochen werden.

Und dann gibt’s natürlich noch ein wenig CSS, das nach Belieben angepasst werden kann.

Im Backend meines Photoblogs habe ich dann eine neue Seite namens „Thumbnails“ angelegt und ihr lediglich das neue Template „Thumbnails“ zugeordnet.

Einen Teil dieser Lösung habe ich von diesem Tutorial, dass bei mir allerdings nicht wie gewünscht funktioniert hat.

Update August 2016: Die Thumbnail-Seite ist auf pabst-photo.com leider nicht mehr verfügbar, da ich mittlerweile ein anderes Theme verwende und eine etwas einfachere Ansicht verwende: http://pabst-photo.com/overview/

Schreibe einen Kommentar

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

Bitte verwende Pastie, Pastebin oder Gist, um größere Code-Schnipsel in deinem Kommentar zu veröffentlichen.

*

Bitte nehmen Sie Kenntnis von meiner Datenschutzerklärung.

Kommentare für diesen Beitrag als RSS-Feed abonnieren

55 Kommentare

    1. Ich weiß nicht, ob es so zweckmäßig ist, die Events mit diesem Grid abzubilden. Würde sicher gehen, wenn man die Abfrage statt mit dem post type „post“ mit dem Events Calendar-eigenen post type aufbaut. Aber bringt das Plugin nicht ohnehin eine Grid-Ansicht mit, die man eventuell nach eigenen Vorstellungen modifizieren kann?

      1. jain es gibt ein mittelmäßigen Kalender und eine liste die auch nicht besser ist , mir wäre es lieber wenn man die Beiträge auch als Events benutzen könnte würde vieles leichter machen.

  2. I made a decision not to use a plugin for this. I then searched and I was about to give up when I found you code on github.

    Thank you very much.

    I had to translate this page into English

      1. How do I get pagination to work. I have tried adding

        the_posts_pagination( array( ‚mid_size‘ => 2 ) );

        after the endwhile; statement with no success.

    1. Ohne das CSS im Browser zu sehen, lässt sich das nur schwer beurteilen. Auf dem Screenshot sieht es so aus, als ob die 5 Thumbnails nicht nebeneinander passen. Probier es doch mal mit 3 oder 4 oder verringere die Größe deiner Thumbnails.

  4. Hi

    Lange gesucht, endlich gefunden
    Vielen Dank dafür
    habe noch ein paar schwierigkeiten damit aber bin fleißig am suchen

    eine Frage hab ich aber schon mal
    kann es sein das es kein ende gibt ?
    weil ich hätte es gerne so das nur 25 Stück angezeigt werden und dann unten „Seite 2“ weitere 25 Stück angezeigt werden

    geht das ?

    wenn ja wie ?

    Bitte so erklähren das es auch dumme Leute hin bekommen ( Ich 😉 )

      1. Danke für die Schnelle Antwort!
        jetzt werden mir auch so viele Angezeigt wie es sollte
        jedoch sind die anderen somit ganz verschwunden (über 25)
        wenn ich es jetzt noch so hinbekomme das unten drunter steht „Seite 2,3,4…“ und auf Klick werden dann die 26-50, 51-75, 75-100 gezeigt dann währe ich sehr Froh

        1. Diese Funktion könnte man auch noch integrieren oder die verwenden, die bereits in deinem Theme verwendet wird. Welches Theme verwendest du denn?

        3. Ok. Zu diesem Theme kann ich leider nichts sagen.

          Wenn du Probleme mit der Anpassung deines Themes hast, ist es vielleicht doch ratsamer, auf meine hier beschriebene Lösung zu verzichten und stattdessen ein Plugin wie Category Grid View zu verwenden (oder etwas ähnliches). Alternativ könntest du dich auch nach einem anderen Theme umschauen, welches so eine Ansicht bereits mitbringt.

  5. Hallo Matthias

    Herzlichen Dank , für deinen klasse Beitrag , das hat mich gut vorwärts gebracht.
    Es ist immer genial wenn sich Leute die Zeit nehmen , und so eine perfekte Lösung teilen.

    Vielleicht könntest du mir noch weiter helfen , ich hab nun also diese Seite mit den Artikelbildern , es läuft alles perfekt , das ganze ist wie ich es auch haben wollte chronologisch geordnet.
    Nun gibt es aber Besucher die möchten nur die Bilder einer gewissen Kategorie in dieser Art sehen.
    “ Man könnte ja auch auf die Kaegorie klicken , aber nein die wollen ja immer alles 🙂 “
    Ist das auch möglich das man eine Thumbnailseite je zu einer Kategorie erstellen kann.

    Diese würde ich dann als untergeordnete Seiten der komplett Thumbnailseite anordnen.

    Wäre nett wenn du mir helfen würdest.
    Grüße
    Marco

    1. Gern geschehen. Natürlich kannst du mit dem Template auch nur einzelne Kategorien ausgeben. Du musst lediglich die Abfrage um das Argument „Kategorie“ erweitern. Für die Kategorie mit der ID 8 würde das z.B. so aussehen (ab Zeile 19):

      // The Query
      $args=array (
      'post_type' => 'post',
      'posts_per_page' => -1,
      'cat' => 8
      );
      $the_query = new WP_Query($args);

      Jetzt musst du nur noch dem Template einen neuen Namen geben (in Zeile 3).

      1. Danke Matthias

        Ich mache ein neues template *.php , ergänze ab Line 22 , ändere in Line 3 den Titel , trage die richtige cat id ein.
        Aber wp gibt mir nur eine Fehlermeldung aus , reklamiert wegen ‚cat‘ hab jetzt schon alles mögliche versucht ‚cat ID‘ und und und aber immer kommt dort der Fehler.
        Hast du eine Ahnung woran das liegen kann.

        Grüsse
        Marco

  8. Thanks for the code
    was looking for something like this and this is great
    have a question:
    can add pagination?
    how to do?

    sorry for my English

        1. If you want to use pagination, you also have to add the template tag for your post navigation. This depends on your theme, just check how your index.php works. In Twenty Twelve it should be (didn’t test it).

  9. First off: amazing! Been looking for a plugin like this one for ages.

    Second: I’m trying to achieve the exact thing you did in the example. I have CSS knowledge but not alot of PHP knowhow. I inserted the CSS exactly as you put it here into style.css, and I created a new page template and filled it with your PHP mumbo jumbo.

    But how do I go from this (www.acupoflife.nl/archieven/dear-diary/) to something more like your page?

  10. Hi Matthias,

    First, thanks for all your work, it’s great. Second, I apologize for not being able to communicate in your native tongue.

    Third, I am having an issue when using your solution in mobile. The thumbnails are responding properly when the screen is minimized, but they remain left-aligned, not centred. Any advice?

    1. You could try to center the wrapper div like this: .gridcontainer {width: 200px; margin: 0 auto;} Instead of „200“ insert the width of your post thumbnails.

      1. Hey Matthias, I’ve tried playing around but I still can’t figure it out;

        When I insert .gridcontainer {width: 200px; margin: 0 auto;}, mobile goes further centre, but it’s still centre-left, and desktop no longer has a grid, only single-file.

      2. Hey man I figured out the mobile vs. desktop issue! Still can’t get it perfectly centred on smallest screen though; maybe I’ll just try some padding.

  11. I’ve tried to implement the grideinto my wordpress blog and this is what comes up on my page when I load it.
    Can you help explain what I’m missing? Thanks.

    ‚post‘, ‚posts_per_page‘ => -1 ); $the_query = new WP_Query($args); // The Loop while ( $the_query->have_posts() ) : $the_query->the_post(); // Show all columns except the right hand side column if($counter != $grids) : ?>
    > $titlelength){, 0, $titlelength) . ‚ …‘; }else {Babes 2; }
    > $titlelength){, 0, $titlelength) . ‚ …‘; }else {Babes 2; }

        2. I just tested the theme and I was able to reproduce the error. Looks like the PHP-Code starting at line 12 gets commented out by the theme. This can’t work. Maybe the theme author can help you with this? I don’t know how this virtual template system works.

        3. I am running Montezuma theme, which has a virtual template option. So I’ve tried creating the template you provided and I can’t even get the montezuma virtual theme to accept your template as the primary template for the post. Not sure if that is because I have a static page and the post are on another. The only way I can get the error is if I preview the page. Not sure if you can replicate the error unless you login.

  12. awesome stuff. Could you please tell me if i want to display only posts from custom type post then how could i achieve this? what would be the code and where i have to put that in my template page. thanks.

  13. Hallo Matthias,

    sowas suche ich schon sehr lange. Leider kenne ich mich mit dem programmieren nicht so sehr aus und könnte etwas Unterstützung gebrauchen.
    Ich habe schon ein Seiten Template erstellt und den Code von oben eingesetzt. Jetzt wird auf meiner Thumbnail Seite allerdings nur eine Spalte auf der linken Seite angezeigt.
    Ich weiß außerdem nicht, wo ich das CSS von oben einfügen soll. Auch in das Seiten Template?

    Für Deine Unterstützung wäre ich sehr dankbar.
    Grüße Tim

      1. Okay, das hat gut geklappt. Allerdings verändert sich die Größe der Thumbnails nicht wirklich.
        Ich würde gerne 5 große Thumbnails in einer Reihe haben. Außerdem fängt das erste Bild stramm auf der linken Seite an, wie kann ich das ändern?

        2. Die Größe der Thumbnails hängt von deinem Theme ab. Sie wird in der functions.php definiert. Um die Thumbnails besser auszurichten, reduziere z.B. die Breite der .griditemleft von 200px auf 180px und der .griditemright auf 100px und gib der Klasse .gridcontainer ein padding-left und ein padding-right von 90px. Wenn du deine Thumbnailgröße anpasst, musst du diese Werte natürlich noch mal neu errechnen.

      2. Hello ,
        Could you please tell me how to show the post title under the thumbnail, in the options of the plugin „Category grid view“ I see only „hover (default“, „Always“ and „Never“ ?

        Thanks,

        1. I don’t use this plugin (this is why I wrote this little tutorial). But it sounds like „Always“ is the right option. Maybe you can ask the plugin author in the plugin’s support forum?