18. April 2007

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.

{* Festlegen der minimalen und maximalen Schriftgröße *}
{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:

Zufällige Tagclouds im Preisvergleich

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.

{* Festlegen der minimalen und maximalen Schriftgröße *}
{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:

Tagclouds nach Gewichtung im Preisvergleich

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:

<span class="tag{$TagSize}">{$it.TITLE.0.VALUE|truncate:'20'}</span>

Und nun viel Spaß mit dem Wolkenschieben. ;-)

Weiterführende Links dazu:

  • Was ist Web 2.0?
  • Tagclouds - useable oder nicht?
  • Tagging und Tagclouds aus SEO-Sicht
  • Tagclouds & ihr Einsatz im Tourismusmarketing
  • Das Elend der Tagcloud in der Blogcommunity
  • SEO News

    Verwandte Beiträge


    6 Kommentare

    1. Frank Internet Explorer Windows 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 Internet Explorer Windows schrieb am 19. April 2007 um 17:22

    Ich habe die Scrollboxen mal komplett deaktiviert.

    3. Frank Internet Explorer Windows 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) Internet Explorer Windows schrieb am 30. April 2007 um 19:01

    Hm, es kehrt Ruhe ein in deinem Blog ;)

    5. Axel Konqueror Linux 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 Internet Explorer Windows schrieb am 02. Mai 2007 um 00:01

    Wenn wir wissen, wann die 15 Tage anfangen ;)

    Schreibe einen Kommentar

    Folgende Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>