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/
eine frage wie kann ich die Events aus den plugin „The Events Calendar“ in diesen postgrid einbinden ?
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?
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.
Ok. Ich nutze das Plugin nicht und kann daher leider keine konkrete Hilfestellung leisten.
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
Glad, I could help.
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.
Did you change the argument
posts_per_page
to another value like 20 or 50?Moin Matthias!
Habe das Template auf meiner Seite eingefügt und die Thumbnails werden auch angezeigt aber alles krum und schief
Aussehen tut es bei mir so http://abload.de/image.php?img=unbenannt3fjb39.png
(Die Texte habe ich selber raus genommen)
Ich hoffe mal das du mir da helfen kannst
Als Theme benutze ich Minamaze
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.
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 😉 )
Dafür ist das Argument
posts_per_page
verantwortlich. Trage dort statt-1
(für alle Posts) den Wert25
ein. Weitere Infos hierzu findest du im Codex unter WP Query / Pagination Parameters.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
Diese Funktion könnte man auch noch integrieren oder die verwenden, die bereits in deinem Theme verwendet wird. Welches Theme verwendest du denn?
Ich verwende das MovieSpot 2.1
zudem habe ich Schwierigkeiten mit dem Einbetten
meine Vortellung sieht so aus (mit Paint erstellt)
http://img.webme.com/pic/r/r0aney/test1.png
Wie es bei mir wirklich aussieht
http://img.webme.com/pic/r/r0aney/test2.png
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.
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
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).
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
Hast du auch am Ende von Zeile 22 ein Komma gesetzt?
Das Komma war der Fehler …….
Vielen Dank jetzt funktioniert alles perfekt , und ich kann endlich richtig mit Bilder laden starten 🙂
http://marcokn.ch
Grüsse
Marco
Hi Matthias,
One more quick question. Is it possible to show only thumbnails from one catagory?
Thanks again!
Lars
Sure! Just add
'cat' => 1
to the $args (after line 22), where „1“ is the ID of your desired category.Works great, thanks so many! Here the result:
http://www.narrominded.com/catalogue
You’re welcome! Looks great!
Hi Matthias,
Thanks for your work and the code! I’ve tried it on my site, but the images are not shown. What am I doing wrong?
http://www.narrominded.com/catalogue
Thanks!
Lars
Hard to tell. Did you upload Post Thumbnails for all your posts?
Thanks, it works!
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
Sure, pagination should work. Check the args for the wp_query in the Codex.
please can you show me an example?
Im only show 10 post but does not display the paging
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).
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?
Thanks!
I can’t help you as your link results in a 404.
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?
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.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.
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.
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; }
Did you create a new page template as shown above?
Thanks for the response, and yes I did create the new template.
Can you provide a link to your website where you use the template?
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.
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.
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.
Should be possible. I’ll look into that when I’m back in the office.
I updated the page template and now you can define a post type in line 21.
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
Nein, das CSS gehört in deine Datei styles.css.
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?
Ps. siehe http://seegers-fotografie.de/galerie/
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.
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,
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?
Nach diesem Hinweis von Thomas von WP Engineer habe ich
strlen()
undsubstr()
inmb_strlen()
undmb_substr()
geändert. Dann klappt’s auch mit Umlauten und Sonderzeichen. 🙂