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