TimThumb-Script in WP Theme einbauen

Gesucht wurde ein Script um sich Bilder aus Beiträgen verkleinert auf der Startseite anzeigen zu lassen.


Fündig wurde ich bei dem TimThumb-Script.

Ich will hier demonstrieren wie ich es in die Praxis umgesetzt habe.

Installation

1. 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!
2. Installation Script
   Script downloaden und in den /timthumb Ordner 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 im Beitrag.
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); ?>&amp;w=120&amp;h=80&amp;zc=1&amp;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(); ?>">
<img src="<?php bloginfo('template_url'); ?>/js/timthump/timthumb.php?src=<?php echo get_post_meta($post->ID, 'post-img', true); ?>&amp;w=120&amp;h=80&amp;zc=1&amp;q=95" width="120" height="80" alt="" /><br />
<?php the_title(); ?></a>

Nach dem Bild wird durch <br /> der Titel unterhalb angezeigt.

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

<div class="start-post-img">
CODE WIE OBEN
</div>

Styling Angaben dazu in der style.css:

.start-post-img {
text-align: center;
background:transparent url(images/bg-input_.jpg) repeat-x scroll left bottom;
padding-bottom: 10px;
}
.start-post-img a {
display: block;
}

Der Vorteil ist, das jetzt das Bild und der Titel als Einheit über die gesamte Breite verlinkt ist.

Resultat: siehe Radwahl.de und House-of-Chicago.de

Startseiten Beispiel

Auf der Startseite soll der neueste Beitrag mit dem kl. Bild + Titel dargestellt werden, darunter die nächsten drei Beiträge nur als Titel. (siehe obige Abbildung)

Hier der Code zu dem Beispiel:
1. Aufruf des neuesten Beitrags
Start div-Container – Überschrift h2

<div class="starter">
<h2><a title="Rahmen" href="/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(); ?>"><?php the_title(); ?></a>
</li></ul>
<!--<?php trackback_rdf(); ?>-->
<?php endwhile; ?>
</div>

weitere Infos:

• BinayMoon Die TimThumb Projektseite
• Sicherheitslücke bei älteren TimThumb Script