Thought Bubble - Custom Tag Cloud for Joomla! Websites

( 165 Votes )

I blog mostly my dreams and funny stories. I thought it would be interesting to create a Tag Cloud to display the topics I most often write about. It would show the things I most often dream or think about. The thought bubble on the right side of this page displays the most commonly-used words in the content of my website (excluding common words from the English language). It is a Joomla! Tag Cloud module, based on code from AkoCloud, but with major design and functionality changes.

Basically, the way AkoCloud works is by retrieving every content item's header text, main body text and title. It combines them and removes the most common words (which it references in mod_akocloud_wordlists.php) and counts the occurrences of the remaining words. It then displays the most frequently used words on your webpage.

There were a number of issues that I wanted to improve and customize for my own website:

Remove many of the common English words from the Exclude List.
Also retrieve the title alias, meta-description and meta-keywords, so that the topics defined in my titles and meta data would be reflected in the Cloud.
Change plural words to singular form ("es"), remove past-tense ("ed"), and remove present-tense action ("ing") from tags, to keep them from being diluted and ensure the cloud is an accurate reflection of my content.
Add an adjustable tag-count limit to keep certain tags from appearing much, much larger than others.
Create a caching system to reduce the server stress that AkoCloud caused.
Customize the styling with a recognizable metaphor. Most of these tags are coming from the subject of my dreams, so a thought bubble over a silhouette of myself would work nicely.

{google_extensions}

Removing Words From The Exclude List

This was very simple, yet a little time consuming. I opened mod_akocloud_wordlists.php and removed all of the words I might expect to see on my site from the array of common English words. It was a monotonous task but didn't take more than five or ten minutes.

Including The Title Alias, Meta-Description and Meta-Keywords

This was fairly straightforward, except that for some reason the database call would not complete while the new query parameters (title_alias, metadesc, metakey) were in single quotes. They had to be left out of quotes while title, introtext and fulltext were left in single quotes.

# Set up database query
$query = "SELECT `title` , `introtext` , `fulltext` , title_alias , metadesc , metakey FROM #__content"
. "\n WHERE state = 1 ";

Then for each returned row, the new query results had to be added to the list of words to be processed:

$data[] = tc_clear($tcrow->title)." ".tc_clear($tcrow->introtext)." ".tc_clear($tcrow->fulltext)."
".tc_clear($tcrow->title_alias)." ".tc_clear($tcrow->metadesc)." ".tc_clear($tcrow->metakey)." ";

Changing All Words To Singular, Present-Tense Form

I noticed that words like "dream", "dreams", "dreamed" and "dreaming" were appearing in the cloud. I wanted to combine all forms of a single word into a singular or present-tense form so that the most commonly used words wouldn't be diluted. Combining them to a single form would make the Tag Cloud better reflect the actual content on my website.

The implementation was simple. The AkoCloud code was already performing some string replacement for non-alphanumeric characters, like "<", ">", "!", ".", etc. I added several more lines to remove plurals, "es", past-tense, "ed", and present-tense action, "ing" (this would add a considerable amount of processor time to the module, but I would address that later with a caching system):

$tcinputlist = str_replace('sses ', 'ss ', $tcinputlist);
$tcinputlist = str_replace('ries ', 'ry ', $tcinputlist);
$tcinputlist = str_replace('gged ', 'g ', $tcinputlist);
$tcinputlist = str_replace('bbed ', 'b ', $tcinputlist);
$tcinputlist = str_replace('ed ', ' ', $tcinputlist);
$tcinputlist = str_replace('ing ', ' ', $tcinputlist);
$tcinputlist = str_replace('[', '', $tcinputlist);
$tcinputlist = str_replace(']', '', $tcinputlist);

$tcinputlist = str_replace('as ', 'a ', $tcinputlist);
$tcinputlist = str_replace('bs ', 'b ', $tcinputlist);
$tcinputlist = str_replace('cs ', 'c ', $tcinputlist);
$tcinputlist = str_replace('ds ', 'd ', $tcinputlist);
$tcinputlist = str_replace('es ', 'e ', $tcinputlist);
$tcinputlist = str_replace('fs ', 'f ', $tcinputlist);
$tcinputlist = str_replace('gs ', 'g ', $tcinputlist);
$tcinputlist = str_replace('hs ', 'h ', $tcinputlist);
$tcinputlist = str_replace('js ', 'j ', $tcinputlist);
$tcinputlist = str_replace('ks ', 'k ', $tcinputlist);
$tcinputlist = str_replace('ls ', 'l ', $tcinputlist);
$tcinputlist = str_replace('ms ', 'm ', $tcinputlist);
$tcinputlist = str_replace('ns ', 'n ', $tcinputlist);
$tcinputlist = str_replace('os ', 'o ', $tcinputlist);
$tcinputlist = str_replace('ps ', 'p ', $tcinputlist);
$tcinputlist = str_replace('qs ', 'q ', $tcinputlist);
$tcinputlist = str_replace('rs ', 'r ', $tcinputlist);
$tcinputlist = str_replace('ts ', 't ', $tcinputlist);
$tcinputlist = str_replace('us ', 'u ', $tcinputlist);
$tcinputlist = str_replace('ws ', 'w ', $tcinputlist);
$tcinputlist = str_replace('ys ', 'y ', $tcinputlist);

I also added a few lines for scenarios where certain words were getting an extra letter removed or just needed to be changed:

$tcinputlist = str_replace('disgust ', 'disgusting ', $tcinputlist);
$tcinputlist = str_replace('freakin ', 'freak ', $tcinputlist);
$tcinputlist = str_replace('sav ', 'save ', $tcinputlist);
$tcinputlist = str_replace('shoot ', 'shot ', $tcinputlist);

Adding An Adjustable Tag-Count Limit

I noticed that a few words were appearing far too often on my website, like "dream". Its tag count was so much higher than the rest of the tags that it was very large, and the rest of the tags were very small with little distinction in size. To fix this, I needed a way to set a size limit on tag count. I set a module parameter that I could adjust in the Joomla! Backend, $maxhitcount. While the final array of tags and their counts are compiled, I check the tag count's size. If it is not less than the $maxhitcount then it isn't incremented:

// Cap values at $maxhitcount
if ($v > $maxhitcount)
{
$new_acv[$k] = $maxhitcount;
}
else
{
$new_acv[$k] = $v;
}

This keeps an even distribution of tag count size and makes it look more like a cloud.

Creating A Caching System To Reduce Server Stress

The next issue to tackle was the amount of processing time the module was using, especially with the last string replacement code snippet I had added. I decided the best implementation would consist of caching just the final output HTML for the tags,not the outer divs or styling. It now writes this string to a file so in the future it could be read in instead processing the query results for six fields of every content item in the database every time a visitor views a page.

$fh = fopen($filename, 'w'); // open text file with write priveleges
fwrite($fh, $ouputString); // write the tags HTML to text file
fclose($fh);
echo $openOutputString; // echo opening div and styling
echo $ouputString; // echo actual tags
echo $closeOuputString; // echo closing div and styling

Now when the module would run, it would first check the time that the text file was last modified. If the modified time was less than a certain number of hours (default of 24 hours) then it would spit out the HTML contents of that file. If it was older then it would recreate the string, save it to the file, and write it to the webpage:

$caching = $params->get( 'caching', 'yes' );
$cachetime = intval( $params->get( 'cachetime', 24 ) ); // cachetime in hours
$cachetime = $cachetime * 3600;
$last_modified = filemtime($filename);
$today = strtotime("now");
if (($caching == 'yes') && (($last_modified + $cachetime) > $today)) // if less set cache interval
{
// echo file contents
$fh = fopen($filename, 'r');
$fileContents = fread($fh, filesize($filename));
fclose($fh);
echo $openOutputString;
echo $fileContents;
echo $closeOuputString;
//echo 'from file';
}
else // else recreate module text, write to file and echo
{
//rest of code...
}

Creating Custom Styling To Match The Website Template

Creating a Thought Bubble in Photoshop I wanted to put the tag cloud in a thought bubble over a silhouette of myself, as if a website visitor was actually reading my thoughts. Well that's pretty close to the truth, as I currently have close to ninety dreams posted for the world's reading pleasure.

To create the bubbly cloud background image, I created a series of white circles in Photoshop. After getting them all lined up and merged onto the same layer I created a Layer Style with a Stroke 2px thick. Then I cut the image into three pieces, a top, middle and bottom, so that the middle piece could be tiled vertically to match the top and bottom, followed by the silhouette image. Here is the code that is echoed before and after the tags:

$openOutputString = "<div id=\"cloud\">
<img xsrc=\"../templates/ja_teline/images/cloud_top.gif\" />
<p style=\"display:block; height:". $pheight ."px;\">";

$closeOuputString = "</p>
<img xsrc=\"../templates/ja_teline/images/cloud_bottom.gif\" /></div>
<div id=\"pj_thinking\"><p>Based on<br />
<a xhref=\"http://www.konze.de/\">AkoCloud</a></p></div>";

And the corresponding CSS:

#cloud{ margin: 0px; padding: 0px; width: 363px;
background: url("../../../modules/cloud_middle.gif") repeat-y #efefef 0px 6px;
text-align: justify; }

#cloud p { margin: 0px; padding: 0px 15px; display: block;
line-height: 28px !important; line-height: 36px; }

#cloud p a { margin: 0px; padding: 0px; }

#cloud p a:hover { text-decoration: none; }

#pj_thinking { background: url("../../../modules/pj_thinking.gif") no-repeat transparent;
width: 310px; height: 204px; margin-top: 8px; }

#pj_thinking p { padding-top: 160px; }

New Backend Module Parameters

I added a few parameters to the module so I could have more control over it from the Joomla! backend.

Paragraph Height ($phieght) - This sets the height of the paragraph. This is only necessary because the background image of the cloud needs to be tiled vertically. If I change the number of tags to be displayed, I adjust the pheight in increments of 20px to account for the change.
Caching ($caching) - This is a radio button that sets caching on or off. I included this option so if I add new content to the website I can turn off caching and reload a page, which will recalculate the Tag Cloud. Then I can turn caching back on. This way I can immediately see any changes and see if I would need to adjust the height.
Caching Time ($cachetime) - This is the number of hours to store the cache before recalculating the Tag Cloud.
Hit Counter Limit ($maxhitcount) - This number puts a limit on the tag count. It keeps one or two tags with high counts from blowing the rest of the tags's sizes out of proportion.

Putting It All Together

The finished product is a more resource-efficient, robust, and stylish implementation of a Tag Cloud, which can be seen to the right of every page on this website.

{google_extensions}

Download

Support

Please post all questions, comments, feature requests and bug reports to the JoomlaDigger.com forums:

Most Diggs Module Support Forums

All credit goes to the original AkoCloud module, which can be downloaded from http://www.konze.de.

Add this page to your favorite Social Bookmarking websites