textpattern resources [ge]

Ein nettes Feature, gerade für Freelancedesigner und Agenturen, ist ein Auszug der Projekte in Form von verlinkten Thumbnails in der Sidebar der Startseite zu präsentieren. Klickt man auf eines der Thumbnails wird man weiter zum komletten Artikel mit großem oder weiteren Bildern zum Projekt geleitet.

Wie das genau aussieht kann man sich auf bauhouse.ca oder auf deeluxe.de anschauen.

Der Trick dabei ist, dass die Thumbnails eigentlich Artikel sind, die einer bestimmten Section zugeordnet wurden und mittels article_custom in der Sidebar ausgefiltert werden.

Okay, hier die Schritt-für-Schritt Anleitung:

• Zuerst benötigt man das bau_article_thumb Plugin. Das Plugin ist TXP V. 4.0.1 kompatibel, schnell installiert und bietet die Möglichkeit das zu einem Artikelbild gehörige Thumbnail auszugeben. TXP selbst verfügt zwar über einen Thumbnail-Tag, doch dieser funktioniert nur direkt im Artikel.

• Weiterhin benötigen wir eine Section, in der die Projekte in voller Schönheit dargestellt werden. Sagen wir mal, wir nennen diese portfolio. Dieser Sektion weisen wir unter Präsentationen/Sektionen zu, dass sie nicht auf der Startseite angezeigt werden soll. Dieser Punkt ist wichtig.

• Als nächstes legt man einen Baustein an, hier namens a_thumb. In diesen fügt man ein:

<li><txp:permlink><txp:bau_article_thumb /></txp:permlink></li>.

• In die Sidebar der Startseite platziert man dann den folgenden Code:

<div id="sidebar">
<ul>
<txp:article_custom limit="xx" section="portfolio" form="a_thumb" />
</ul>
</div>

• Nun benötigen wir noch einen Baustein, der die Angaben für den kompletten Artikel enthält. Dieser Baustein, nennen wir ihn mal a_komplett, kann dann alles enthalten, was zur Darstellung des Projektes notwendig ist. Ein Beispielcode könnte so aussehen:

<txp:permlink><txp:title /></txp:permlink>
<txp:permlink><txp:article_image /></txp:permlink>
<txp:body />
<txp:if_comments><p><txp:comments_invite /></p>
</txp:if_comments>

• In die Seitenvorlage der Section Portfolio setzt man nun den folgenden Code:

<div id="content"><txp:article limit="1" form="a_komplett" /></div>

• Nun benötigt man noch die Bilder und die dazugehörigen Thumbs. Diese lade man hoch. TXP verfügt über eine integrierte Möglichkeit Thumbnails zu erzeugen. Sobald man ein Bild hochgeladen hat, öffnen sich einige Abfragefelder in die die Werte der Thumbnail-Größe eingegeben werden kann. Hat man das gemacht, wird das Thumb automatisch mit klick auf “Speichern” erstellt.

• Als nächstes schreibt man den Artikel, fügt unter Erweiterte Einstellungen/Artikelbild die Bild ID ein und speichert den Artikel unter der Section portfolio.

Voila, damit wäre das Meiste erledigt. Damit die Thumbnails wie bei bauhouse.ca im 3×3 Pack stehen, greift man zu etwas CSS und floated die Listenpunkte.