Tagclouds mit Smarty
Smarty und Web2.0, warum nicht? Da Tagclouds (Wikipedia übersetzt das lustigerweise mit Wortwolken) immer mehr in Mode kommen, zeige ich heute 2 Möglichkeiten, wie man ein Tag Cloud mit der Smarty Template Engine realisieren kann. Ja, ich weiß, dass es mit PHP etwas schneller ist. Wir haben hier aber den Schwerpunkt auf Smarty und deshalb habe ich es komplett mit Smarty gelöst. So und nun los mit den Clouds.
Zu erst die einfache Variante, wenn nur Links ohne Bewertung vorhanden sind. Um unterschiedliche Schriftgrößen zu erstellen benutze ich die Randomfunktion von Smarty. Als Beispiel habe ich das Template 'lastKeywords.html' aus dem Affilinator verwendet. Ihr könnt es selbstverständlich in jedes andere Template integrieren, wenn ihr die Templatevariablen anpasst.
{assign var=MinFontSize value=10}
{assign var=MaxFontSize value=25}
{foreach from=$lastKeywords_data item=it}
{* Mit der Randomfunktion von Smarty werden hier Werte zwischen der min. und max. Schriftgröße ermittelt *}
<span style="font-size:{$MinFontSize|rand:$MaxFontSize}px">
<a href="{$smarty.const.BASE_URL}suche/alle/0/-/0/-/1/{$it.urlencoded|replace:'_':'-'}.html">{$it.content|truncate:29}</a></span>
{/foreach}
Und so sieht es aus:
Um die Tagclouds nach Wichtigkeit darzustellen, werden zu jedem Link ein Wert benötigt. Auch hier habe ich wieder ein Template 'getRandomShops.html' aus dem Affilinator genommen. Es gibt da wohl keine extra Linkbewertungen, aber hier nehme ich einfach die ShopIDs. Die erste Schleife ermittelt die Min- und Maxwerte der Gewichtung. Dann werden Offset- und Ratiowerte berechnet. Die Ausgabe erfolgt dann in der zweiten foreach-Schleife. Auch hier müsst ihr die Variablen an euer Template anpassen.
{assign var=MinFontSize value=10}
{assign var=MaxFontSize value=25}
{* In der ersten Schleife werden die Min- und Maxwerte ermittelt, in diesem Beispiel werden die Shopnummern als Gewichtung benutzt *}
{foreach from=$getShopList_data.td_data item=it}
{if !$MinTagValue or $MinTagValue> $it.ID.0.VALUE}{assign var=MinTagValue value=$it.ID.0.VALUE}{/if}
{if $MaxTagValue <$it.ID.0.VALUE}{assign var=MaxTagValue value=$it.ID.0.VALUE}{/if}
{/foreach}
{*Natürlich können, wenn die Werte vorhanden sind, diese auch direkt eingegeben oder aus dem Template gelesen werden *}
{*assign var=MinTagValue value=1*}
{*assign var=MaxTagValue value=500*}
{* Hier werden die FontRatio und FontOffset ermittelt *}
{math equation="((b-a)/(d-c))" a=$MinFontSize b=$MaxFontSize c=$MinTagValue d=$MaxTagValue assign=FontRatio}
{assign var=FontOffset value=$MaxFontSize-$MaxTagValue*$FontRatio}
->{$FontOffset}->{$FontRadio}
{* In der zweiten Schleife findet die Ausgabe der Links statt *}
{foreach from=$getShopList_data.td_data item=it}
{if $it.TITLE.0.VALUE}
{if $ShopID neq $it.ID.0.VALUE}
{assign var=s_id value=$it.ID.0.VALUE}
{* Hier wird, entsprechend des Wertes, die Größe ermittelt *}
{math equation="(e*g)+f" e=$FontRatio f=$FontOffset g=$s_id format="%.0f" assign=TagSize}
<a href="{$smarty.const.BASE_URL}shopping/{$s_id}.html" title="Shop: {$it.TITLE.0.VALUE}, Update: {$it.LASTUPDATE.0.VALUE}, Angebote {$it.PRODUCTS.0.VALUE}, Logo URL: {$it.LOGOURL.0.VALUE}
, ID: {$it.ID.0.VALUE}"><span style="font-size:{$TagSize}px">{$it.TITLE.0.VALUE|truncate:'30'}</span></a>
{else}
{$it.TITLE.0.VALUE|truncate:'20'}<br />
{/if}
{/if}
{/foreach}
Und so sieht das 2. Beispiel aus:
Eine weitere Variante wäre spezielle CSS-Klassen für die Tags anzulegen. Dort kann man dann auch unterschiedliche Größen und Farben definieren.
Und so baut ihr das dann ein:
5 unterschiedliche CSS-Klassen tag1-tag5 anlegen.
MinFontSize auf 1 setzen und MaxFontSize auf zb. 5.
Damit die unterschiedlichen Klassen angesprochen werden, binden wir diese dann so ein:
Und nun viel Spaß mit dem Wolkenschieben.
Weiterführende Links dazu:


Trackback
RSS Feed
















6 Kommentare
1.
Frank
schrieb am 18. April 2007 um 22:50
Hi,
klasse Lösung !
Nur die letzte Codebox mit der CSS Lösung wird bei mir hier im IE6 nicht richtig dargestellt (kein top down scrolling), so dass man den letzten Code nicht sehen kann.
Gruß
Frank
2.
Axel
schrieb am 19. April 2007 um 17:22
Ich habe die Scrollboxen mal komplett deaktiviert.
3.
Frank
schrieb am 19. April 2007 um 17:29
Viel besser !
Hm, nur mal so als Idee – einige Shops geben ja auch eigene Keywords aus – die könnte man bei der Suche oder Kategoriedarstellung auch zusammen fassen, zählen und als Wolkeausgeben ?
Und in der Suche auch die Kategorien (affilinet und Shop)?
Ganze neue Ideen
4.
Frank (Software 25)
schrieb am 30. April 2007 um 19:01
Hm, es kehrt Ruhe ein in deinem Blog
5.
Axel
schrieb am 01. Mai 2007 um 23:05
Kommt mir gerade gelegen, bin eh gerade bei einem neuen Affiliatescript dran.
Vielleicht sollten wir es vorab ankündigen. So mit noch 15 Tage bis zum kostenlosen Mega-Affiliate-Script?
6.
Frank
schrieb am 02. Mai 2007 um 00:01
Wenn wir wissen, wann die 15 Tage anfangen