WordPress Thumbnailseite mit Artikelbildern

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.

Und so sieht das Ergebnis aus: pabst-photo.com – Thumbnails

46 Kommentare zu “WordPress Thumbnailseite mit Artikelbildern

  1. Tim Seegers

    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

    Antworten
      1. Tim Seegers

        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?

        Antworten
        1. Matthias Beitragsautor

          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.

          Antworten
      2. Nico

        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,

        Antworten
  2. Sandeep

    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.

    Antworten
  3. Kevin

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

    Antworten
          1. Kevin

            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.

          2. Matthias Beitragsautor

            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 (see screenshot: http://d.pr/i/TbNd). This can’t work. Maybe the theme author can help you with this? I don’t know how this virtual template system works.

  4. Andrew

    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?

    Here is a link: http://ashahmurat.com/portfolio-2/

    Antworten
    1. Matthias Beitragsautor

      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.

      Antworten
      1. Andrew

        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.

        http://ashahmurat.com/portfolio-2/

        Antworten
      2. Andrew

        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.

        Antworten
  5. Hans

    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?

    Antworten
  6. Jose

    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

    Antworten
        1. Matthias Beitragsautor

          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 < ?php twentytwelve_content_nav( 'nav-below' ); ?> (didn’t test it).

          Antworten
  7. Marcus

    Hey Matthias,
    Thanks for this code, works great! I was just wondering if the formatting of the title text is at all adjustable?
    Right now I have this: http://puu.sh/46ix8/30c744157f.png, and I would like something with normal spacing between each line so I can fit the full title under each thumbnail.

    thanks

    Actually, don’t worry I figured it out just before posting! If anyone else reading this would like to know how, just add text-height: 50%; into the .gridcontainer .postimage-title css styling.

    Antworten
  8. Marco

    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

    Antworten
    1. Matthias Beitragsautor

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

      Antworten
      1. Marco

        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

        Antworten
  9. Ronny

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

    Antworten
      1. Ronny

        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

        Antworten
          1. Matthias Beitragsautor

            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.

Hinterlasse eine Antwort

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