How to Build tags cloud using XSLT transformation

How to Build tags cloud using XSLT transformation

1 237
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!

SIMILAR ARTICLES

Responsive HTML Email Template

0 80
Polaroid gallery

0 226

1 COMMENT

Leave a Reply