Mit diesem Artikel möchte ich zeigen wie man vorzugehen hat, wenn zu Artikeln die in Listen erscheinen auch ein entsprechendes Thumbnail gezeigt werden soll. Auch dieses kleine Tutorial spezialisiert sich auf die Anwendung des Thesis Theme Frameworks.
Sinnvollerweise habt ihr bereits euren Artikeln immer brav ein entsprechendes Thumbnail gegeben. Beim Theme Thesis geschieht dies super komfortabel mit einem dafür vorgesehenen Formularfeld.
Auch wenn sich die Größe des Thumbnails, bei der Ausgabe mittels CSS Angaben, einstellen läßt so würde ich hier lieber direkt passende Größenverhältnisse empfehlen. Bei der Größenreduzierungwürden sonst unnötige Qualitätsverluste zum tragen kommen.
Das waren die Vorausetzungen
Als nächstes installieren wir uns zwei Plugins, die beide aus der Hand des Autoren Rob Marsh kommen. Das eine heißt Post-Plugin Libary und ist entweder hier oder im WordPress Plugin Verzeichnis zu bekommen. Das nächste Plugin heißt Random Posts Plugin und ist ebenfalls hier oder im WordPress Plugin Verzeichnis zu beziehen. Achtet bitte darauf das ihr auch die Plugins von Rob installiert. Ihr könnt auch neben dem Random Post Plugin noch das Popular Post Plugin von Rob nutzen. Entscheidet selber was mehr Sinn macht oder kombiniert sie.
Anpassen des Plugins
Jetzt geht ihr in die Einstellungen des von euch verwendeten Plugins und klickt dort auf Output.
In das Formularfeld Output Template schreibt ihr den folgenden Code:
<p>
<img src=”{custom:thesis_thumb}” width=”50″ height=”50″ alt=”" />{link}
<div></div>
</p>
Die von mir eingetragenen Werte für die Breite und Höhe des Thumbnails könnt ihr natürlich ändern. Nicht vergessen jetzt die geänderten Einstellungen im Plugin zu speichern.
Als nächstes schaut ihr mal unter dem Backend Menü Design nach den Widgets. Dort findet ihr ein neues Widget vor, namentlich passend zu dem aktivierten Plugin. Sinnvollerweise hat das neue Widget eine Ergänzung im Namen und heißt zum Beispiel [Plugin Name]+
Schiebt das Widget jetzt an die gewünschte Stelle eures Themes und schaut euch im Frontend mal an was da ausgegeben wird. Vermutlich sieht der Output noch richtig sch…. aus und braucht ein paar schicke Formate.
CSS Styles
Um nun den Output des neuen Widgets etwas aufzupimpen marschieren wir wieder in das Backend und öffnen in den Thesis Optionen die CSS Datei customs.css
An eine passende Stelle kopiert ihr dort die folgenden Zeilen:
/* Random Posts */
#random-posts a { font-size: 1.1em; }
#random-posts a:hover { text-decoration: none; text-shadow: 1px 1px 1px #871a1a; }
#random-posts a span { background: url(images/sb/pop_commbubble.png) no-repeat 0 50%; color: #464646; padding-left: 1em; }
#random-posts a span:hover { background: #DBDBDB url(images/sb/pop_commbubble.png) no-repeat 0 50%; text-decoration: underline; text-shadow: 1px 1px 1px #FFF; }
#random-posts img { border: 0.1em solid #BCBCBC; float: right; margin-left: 0.6em; margin-right: 0.6em; margin:top 0.3em; margin-bottom: 0.3em; }
#random-posts h3 { background: url(images/sb/ran_title.png) no-repeat; height: 29px; text-indent: -9999px; width: 134px; }
#random-posts li { padding-bottom: 0.6em; }
sowie
.clear { clear: both }
Passt als nächstes das CSS noch eurem Design an und fertig ist die Sache.
Nach dieser Anleitung könnt ihr mit den Plugins von Rob eine Menge von hübschen Artikellisten erzeugen und diese mit den Artikel-Thumbnails krönen.
Wenn euch der Artikel gefallen hat würde ich mich über einen Kommentar sehr freuen. Und damit ihr die neuen Artikel hier nicht verpasst holt euch am besten den RSS Feed von wpBUZZ.
