How to Build tags cloud using XSLT transformation

Date: 15th Mar 2011 Author: admin 3 Comments
Posted in: HTML/CSS, XSLT |Tags: , , , ,

How to Build tags cloud using XSLT transformation

How to Build tags cloud using XSLT transformation

As all we know – tags cloud is some array of links at page where bigger units mean more important things. If your project have any interesting information (blogs, or other text content), it will useful to put cloud of tags at your homepage. Of course, one of way will just make all this using pure PHP to draw necessary links in different size, but lets try today to use xslt than just PHP. One of good side is that we can configure all necessary params (as example min font size and max font size, possible other details like different font classes if you want to use different colors etc) out of PHP logic.

Here are samples and downloadable package:

Live Demo
download in package

Ok, as example we have XML-based array of our cloud elements:


<?xml version="1.0" encoding="utf-8" ?>
<cloud>
    <tag id="1">
        <name>web</name>
        <amount>2</amount>
    </tag>
    <tag id="2">
        <name>development</name>
        <amount>10</amount>
    </tag>
    <tag id="3">
        <name>php</name>
        <amount>6</amount>
    </tag>
    <tag id="4">
        <name>jQuery</name>
        <amount>2</amount>
    </tag>
    <tag id="5">
        <name>xhtml</name>
        <amount>10</amount>
    </tag>
    <tag id="6">
        <name>xslt</name>
        <amount>1</amount>
    </tag>
    <tag id="7">
        <name>css</name>
        <amount>7</amount>
    </tag>
    <tag id="8">
        <name>programming</name>
        <amount>8</amount>
    </tag>
</cloud>

As we can see – I put name of tag in NAME tag, and amount of repeating (weight) into AMOUNT tag. Here are ‘development’ and ‘xhtml’ is most popular words.

And now we should to create our XSL part to perform transformation all this into user friendly view. Lets start coding all necessary files to our sample:

Step 1. PHP

Here are our php file which we using to transform our xml feed with tags:

index.php

As we can see – I just load our XML file here and perform transformation. Of course this can be not just static XML file, but also and any PHP-based source of XML in your custom cases. If so – you will need just to make small changes in my code. But currently – static case will enough (our file will ‘cloud.xml’).

<?php

// Obtain cloud data from file
$sXmlSrc = file_get_contents('cloud.xml');

// Load the XML source
$xml = new DOMDocument;
$xml->loadXML($sXmlSrc);

// Load XSLT
$xsl = new DOMDocument;
$xsl->load('xslt/tagcloud.xslt');

$proc = new XSLTProcessor; // configure xslt processor
$proc->importStyleSheet($xsl); // attach the xsl rules

echo $proc->transformToXML($xml); // draw result tags cloud

?>

Step 2. CSS

Not so necessary step, but here are just few styles for our sample:

css/styles.css

h1{text-align:center}
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.main{background:#FFF;width:500px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em;overflow:hidden}
.main a{float:left;margin-right:5px;line-height:30px}

Step 3. XSLT

And, most interesting part of my post – used XSLT rules:

xslt/tagcloud.xslt

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <head>
                <link media="screen" href="css/styles.css" type="text/css" rel="stylesheet"/>
            </head>
            <body>
                <div class="main">
                    <h1>Tags cloud via XSLT</h1>
                    <xsl:apply-templates />
                </div>
            </body>
        </html>
    </xsl:template>

    <xsl:template match="cloud">
        <xsl:variable name="maxAmount" select="tag[not(amount &lt; ../tag/amount)]/amount" />
        <xsl:variable name="minValue" select="tag[not(amount &gt; ../tag/amount)]/amount" />

        <xsl:variable name="perc100" select="$maxAmount - $minValue"/>
        <xsl:variable name="perc1">
            <xsl:choose>
                <xsl:when test="$perc100 = 0">100</xsl:when>
                <xsl:otherwise><xsl:value-of select="100 div $perc100"/></xsl:otherwise>
            </xsl:choose>
        </xsl:variable>

        <xsl:variable name="maxFont">28</xsl:variable>
        <xsl:variable name="minFont">12</xsl:variable>

        <xsl:variable name="fontDiff" select="$maxFont - $minFont"/>
        <div>
        <xsl:for-each select="tag">
                <xsl:variable name="fontSize" select="$minFont + ceiling($fontDiff div 100 * ((amount - $minValue) * $perc1))"/>
                <a href="your_website_url/tag/{name}" style="font-size: {$fontSize}px">
                    <xsl:value-of select="name" />
                </a>
        </xsl:for-each>
        </div>
    </xsl:template>
</xsl:stylesheet>

I set max font size and min font size as maxFont and minFont variables. All other calculations need just for calculation of result font size (depends on ‘amount’ value of our tags). All results we will able to see by links above:


Result of transformation
download in package

Conclusion

I hope that today’s article will very useful for your projects. Good luck!

Enjoyed this Post?

If you enjoyed this article, feel free to share our tutorial with your friends.
    Tweet
   
   

Stay connected with us:

1 Comment

    • soft-oem's Gravatar
    • Hi, thank you for this great service!
      I am glad that you have justified our expectations.

1 Trackback

  1. designfloat.com on March 15, 2011 at 6:05 pm
  2. How to Build tags cloud using XSLT transformation on March 15, 2011 at 8:07 pm

Leave a Reply

Your email address will not be published. Required fields are marked *

*

CAPTCHA Image
Refresh Image

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>