Gesucht wurde ein Script um sich Bilder aus Beiträgen verkleinert auf der Startseite anzeigen zu lassen.
Fündig wurde ich dank dem Newsblogger, der im WP-Forum das Stichwort nannte, bei dem TimThumb-Script.
Umgesetzt habe ich es im Radwahl.de Blog (siehe obige Abbildung)
Bitte zunächst folgende Anleitung lesen:
dort wird die Funktion näher beschrieben und es werden die möglichen Parameter genannt.
Ich will hier demonstrieren wie ich es in die Praxis umgesetzt habe.
Installation
- Vorarbeit
Zumeist hat man im Theme bereits einen Ordner für (Java)Scripte. Bei mir heisst der Ordner kurz und knapp /js.
In dem Verzeichnis einen Ordner anlegen/timthumb.
und den Unterordner/cache.
Die Schreibrechte hierbei komplett auf 777 stellen! - Installation Script
Script downloaden und in den/timthumbOrdner ablegen. (auch 777)
Das TimThumb Script ist somit im Theme integriert.
Benutzerdefiniertes Feld im Beitrag
Damit das Script weiß welches Bild verkleinert auf der Startseite dargestellt werden soll, bedarf es einer Angabe.
Hierfür wird ein benutzerdefiniertes Feld benötigt.
Name: post-img
In das Feld wird dann die URL von dem gewünschten Bild eingegeben.
Das ist unkompliziert, einfach die URL von dem Bild im Beitrag kopieren und unten einfügen.
Fazit:
Somit weiß das Script welches Bild verkleinert angezeigt werden soll und kann seine Arbeit verrichten.
Aufruf des Scripts
Jetzt fehlt noch die Angabe wo das verkleinerte Bild angezeigt werden soll.
Hierzu muss im Theme die Funktion aufgerufen werden. In meinem Fall erfolgt der Aufruf auf der Startseite.
Code Grundgerüst:
<img Anzeigen – Aufruf vom Script (Pfadangabe) – Benutzerdefiniertes Feld auslesen – Größen Angaben und Qualitätsstufe>
und so sieht dann der Code aus:
<img src="<?php bloginfo('template_url'); ?>/js/timthump/timthumb.php?src=<?php echo get_post_meta($post->ID, 'post-img', true); ?>&w=120&h=80&zc=1&q=95" width="120" height="80" alt="" />
Will man erreichen das man beim anklicken des Bildes zu dem passenden Beitrag geleitet wird, so muss der obige Code in einen Link eingebaut werden.
Code Grundgerüst:
<a href – Titel> obiger Code für verkl. Bild – Optional Ausgabe des Titels</a>
Code verkl. Bild mit Link und Titel-Anzeige*
<a href="<?php the_permalink() ?>" rel="bookmark"
title="<?php the_title(); ?> | Radwahl">
<img src="<?php bloginfo('template_url'); ?>/js/timthump/timthumb.php?src=<?php echo get_post_meta($post->ID, 'post-img', true); ?>&w=120&h=80&zc=1&q=95" width="120" height="80" alt="" /><br />
<?php the_title(); ?></a>
Nach dem Bild wird durch <br /> der Titel unterhalb angezeigt.
*=Achtung gefährliches Halbwissen. Ob das so korrekt ist vermag ich nicht zu sagen, aber es funktioniert.
Hinweis
Sollte man bei einem Beitrag kein Bild verwenden, so lässt sich stattdessen auch ein Symbol-Bild verwenden, dessen URL man in das benutzerdef. Feld eingibt.
Alternativ kann man den Code auch derart anpassen, das bei leerem benutzerdef. Feld das Script nicht aufgerufen wird. Dazu findet man bei WebDeMar einen Hinweis.
Feintuning (Optional)
Ich habe den obigen Code in einen div-Container gepackt. Dadurch lassen sich in der style.css noch Angaben hinzufügen.
Code und style.css Angaben anzeigen
Fazit:
Durch den Code würde ein verkleinertes Bild (120x80px) mit Titel auf der Startseite erscheinen. Fragt sich nur von welchem Beitrag…
Die Beiträge auf der Startseite
Auf der Startseite soll der neueste Beitrag mit dem kl. Bild + Titel dargestellt werden, darunter die nächsten drei Beiträge nur als Titel.
Hier der Code passend zu obiger Abbildung:
1. Aufruf des neuesten Beitrags.
Start div-Container – Überschrift h2
<div class="starter">
<h2><a title="Rahmen" href="http://www.radwahl.de/category/rahmen/">Rahmen</a></h2>
<?php query_posts('cat=9&showposts=1&offset=0'); ?>
<?php while (have_posts()) : the_post(); ?>
<!--<h1 id="post-<?php the_ID(); ?>"></h1>-->
CODE WIE OBEN
<!--<?php trackback_rdf(); ?>-->
<?php endwhile; ?>
2. Aufruf der weiteren drei Beiträge, ohne den Neuesten (offset=1),
als ul li-Liste, div-Container schließen
<?php query_posts('cat=3&showposts=3&offset=1'); ?>
<?php while (have_posts()) : the_post(); ?>
<!--<h1 id="post-<?php the_ID(); ?>"></h1>-->
<ul><li>
<a href="<?php the_permalink() ?>" rel="bookmark"
title="<?php the_title(); ?> | Radwahl"><?php the_title(); ?></a>
</li></ul>
<!--<?php trackback_rdf(); ?>-->
<?php endwhile; ?>
</div>
Resultat: siehe Radwahl.de
Vielen Dank auch an Nick von der Stil-Etage der mir bei den benutzerdef. Feldern auf die Sprünge geholfen hat.
Ergänzungen und Hinweise sind willkommen. Bitte auf “Infos hinzufügen” klicken und einen Kommentar hinterlassen. Vielen Dank!
2 Kommentare für » TimThumb-Script in WP Theme einbauen
vielen dank. ich habe gerade einen blog angefangen und da werde ich wohl einige bilder reinstellen. das installieren des blogs war ja einfach, aber die zusatztools sind natürlich der arbeitsaufwand.
Vielen Dank für den guten Tipp, das Tool kann man wirklich gut gebrauchen. Schließlich nehmen große Bilder auf der Startseite einiges an Platz weg, da ist es natürlich sehr praktisch, wenn man sie verkleinern und nur in den Artikeln groß anzeigen kann. Das ist auf jeden Fall besser, als von vornherein nur kleinere Bilder zu verwenden, wie ich es schon in einigen Blogs und auf anderen Seiten gesehen habe.