<?php
require_once 'classes/wordcloud.class.php';
$cloud = new wordCloud();
$cloud->addWord('php'); // Basic Method of Adding Keyword
$cloud->addWord(array('word' => 'google', 'url' => 'http://www.google.com')); // Advanced user method
$cloud->addString('List of words i would like to include');
$cloud->addWords('hello','world','how','are','foo','bar');
echo $cloud->showCloud();
?>

The clouds default ordering is by random, if you wanted to order the cloud by size or word from largest to smallest, this can be done as follows.

$cloud->orderBy('size','desc');

As mentioned above, you can arbitrarily add custom tags to pass through the tag cloud generator for use later on in your code. If you wanted to colour code the tags based on word, you could do the following.

<?php
$cloud = new wordCloud();
$cloud->addWord(array('word' => 'php', 'size' => 1, 'url' => 'http://www.php.net', 'colour' => '#FF0000'));
$cloud->addWord(array('word' => 'google', 'size' => 2, 'url' => 'http://www.google.com', 'colour' => '#00FF00'));
$cloud->addWord(array('word' => 'digg', 'size' => 3, 'url' => 'http://digg.com', 'colour' => '#0000FF'));
$cloud->addWord(array('word' => 'lotsofcode', 'size' => 4, 'url' => 'http://www.lotsofcode.com', 'colour' => '#FFFF00'));
$myCloud = $cloud->showCloud('array');
foreach ($myCloud as $cloudArray) {
  echo ' &nbsp; <a href="'.$cloudArray['url'].'" style="color: '.$cloudArray['colour'].';" class="word size'.$cloudArray['range'].'">'.$cloudArray['word'].'</a> &nbsp;';
}
?>

The above examples show the tag cloud wrapper is completly cusomisable and can be used in lots of different ways.

Not only can you generate a tag cloud, but you can customise the output if required to pass any information you like, such as href, link colours and more, check out the demo for more details on this.

Some of the features that are available are:
* Link and URL Assignment
* Additional attribute assignment e.g. title etc
* Add styles and colour options to each tag
* Set a limit to the amount of tags that are displayed
* String to cloud, parse a single string into a tag cloud instantly
* Ignore list, to remove particular words from the cloud. e.g. and, the, it, i
* Ordering by a selective field. e.g. word, size, colour
* Parse an argument seperated list of words
* add a string with a custom seperator
* format of word output. (Customise upper/lowercase words & set trimming of words. Single word and multi-word customisation.)

Within the demo, i have provided:
* Examples of intergrating with a MySQL Database
* Examples of intergrating with a Flat Text File

Tag cloud background info

Originally i created a tag cloud script and wrote up a tutorial on how to create one yourself, this was quite well received and from there i developed a newer version of the code base with lots more features, because this wasn't very well publicised, the original page that sat here was visited on many occasions with the same questions being asked over again about bugs and features etc. So what i have done is divided the old pages into a seperate url so that they can all be referenced if needed but are all pointed to this article for the most up to date versions of the code.

You can view the original tag cloud tutorial here.
For legacy, here is the original v2 of the script here.

Bugs fixed
- setLimit didn't work. (20/02/11)
- Removed words get removed if limit applied. (20/02/11)
- Bracket conversion of percentage adjusted to show smaller sizes on less frequent words. (20/02/11)

Today i discovered a derived temporary table workaround, this creates a table with my select statement and this allows me to use the alias with a conditional statement.

For example, i wanted to use the COUNT() aggregate function to return the amount of posts assigned to a blog.

So my query was something like ....

SELECT b.*, (SELECT count(id) FROM posts p where b.id=p.blogId) as myCount FROM blogs b;

This will return all the fields from the blogs table and a count of all the associated posts.

However, some of these categories may not have posts assigned to them and i can't use the alias in the conditional statement.

The workaround i found was to use the following, create a temporary table from the original result set so that you can use a conditional statement with the result fields returned.

SELECT * FROM ([PASTE ORIGINAL QUERY HERE]) AS myDerivedTable WHERE myCount > 0

I have used "myDerivedTable" as my table name, but this can be any name you choose.

After adding my original query, this is how the full length query would look.

SELECT * FROM (SELECT b.*, (SELECT count(id) FROM posts p where b.id=p.blogId) as myCount FROM blogs b) AS myDerivedTable WHERE myCount > 0

This will only return results that have the myCount alias > 0.

I haven't really looked into the negative impact in using this technique, but for the small scale website it has been used for it was an ideal solution.

I remember when i first wrote this, I suggested i could write a quick script to generate a list of results, so he could look ahead and undersand what he needed to gain a better ratio at Call of Duty.

If you find any bugs etc, please comment below and i'll take a look into them. It's not a perfect script, i know that much!

CREATE TABLE [NEW_TABLE] LIKE [OLD_TABLE];
INSERT INTO [NEW_TABLE] SELECT * FROM [OLD_TABLE];

Simply replace the [NEW_TABLE] and [OLD_TABLE] placeholders with your new and current table names. For example:

CREATE TABLE products_backup LIKE products;
INSERT INTO products_backup SELECT * FROM products;

This will create the table and maintain any indexes / keys etc and it's by far the most efficient way I have found.

I hope this helps.

So, to start download the PHP Pagination script and then put it into a directory within your smarty setup.

During this example i am going to be using some test data, a basic PHP array with 10 sub array's, like so:

$myArray = array(
array('id' = > 1, 'title' => 'Test Item 1'),
array('id' = > 2, 'title' => 'Test Item 2'),
array('id' = > 3, 'title' => 'Test Item 3'),
array('id' = > 4, 'title' => 'Test Item 4'),
array('id' = > 5, 'title' => 'Test Item 5'),
array('id' = > 6, 'title' => 'Test Item 6'),
array('id' = > 7, 'title' => 'Test Item 7'),
array('id' = > 8, 'title' => 'Test Item 8'),
array('id' = > 9, 'title' => 'Test Item 9'),
array('id' = > 10, 'title' => 'Test Item 10'),
);

Then assign the pagination class to an object called pagination and assign the array and the amount of page numbers and assign this information into the smarty template vars, one for the listing of the items and another for the actual pagination.

$pagination = new pagination();
$myArray = $pagination->generate($myArray, 10);
$smarty->assign('listing', $myArray);
$smarty->assign('pagination', $pagination->links());

Then go into the template side of your setup and add the following code

{if !empty($listing)}
{if !empty($pagination)}
<div class="pagination">{$pagination}</div>
{/if}
{foreach item="item" from="$listing"}
<tr>
<td>{$item.id}</td>
<td>{$item.title}</td>
{/foreach}
{/if}

It's a pretty quick and simple solution to get you going as a beginner, good luck!

One of the main issues i found with using the smarty template engine is that there isn't enough documentation online!

Usually in php, i would do something like this to display three items per row

if ($count % 3 == 0) {

// Add Break / Clear here

}

So i assumed something like this would be available in smarty. After googling for a while i found a couple of solutions to this, however none of them were as simple as the PHP code above, so by playing about with the Smarty Template Engine, i managed to figure out a nice simple way, and here it is.

{assign var="mycount" value="1"} {*Initiate the mycount variable*}
{if $mycount++ % 3 == 0} {*Simular syntax to the above*}
// Add Break / Clear here
{/if}

So, as i found this so useful for displaying products on a current project, i thought it would be something other would really like to know about.

This tutorial is based on the original code i wrote, however this version is less buggier and has support for non JS enabled browsers!

Nice and simple to install, include the jQuery library and the select skin JS file and the CSS file like so.

<style>
<!--
@import url('./css/skinned-select.css');
//-->
</style>
<script src="./js/jquery.js" type="text/javascript"></script>
<script src="./js/jquery.skinned-select.js" type="text/javascript"></script>

Then just wrap a div with the class name of 'my-skinnable-select' around the select box, like so.

<div class="my-skinnable-select">
<select name="name">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>

The form variables can be posted as usual, it's as easy as that, enjoy!

Please take a look at the demo or download the code and let me know what you think by using the contact form below.

Please note: I wrote this over 2 years ago, a french dude re-wrote this as a jQuery plugin. It's a pretty awesome implementation, go check it out!

So, first things first. Pop over to http://docs.jquery.com/Downloading_jQuery and download the latest version in whatever form you prefer, Minified, Packed or Uncompressed. If you are not fussed then i would suggest the packed version.

No, the first thing you should do is create a specific testing area, for example c:jquery. Then in that folder extract the jquery file into it, if the name of the js file isn't jquery then i would suggest you rename it to jquery.js to make the name of the file nice and easy to remember.

Now, on to the html.

Create a file, with whatever name you prefer, i will call mine 'myfirstjquery.htm' in that file i have created basic html as follows, i have also included

the jquery js file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My First jQuery Script with lotsofcode.com</title>
<script src="jquery.js"></script>
</head>
<body>
</body>
</html>

Now that we have the basic html we can start adding some Javascript.

Next, create a new div and assign an id to the div like so.

<div id="hello-lotsofcode">Hello LotsofCode</div>

Now, save the file, open it with a web browser and you should have a basic html page with the text 'hello Go back to your text editor and add the following

code to inbetween the opening and closing head tags.

<script>
$(document).ready(
function() {
// Code to be executed goes here ...
}
);
</script>

Everything that is called by jQuery needs to be wrapped in this loader above.

Now, to call the element we just created we simply use a CSS style declaration to call the element like so.

<script>
$(document).ready(
function() {
alert( $('#hello-lotsofcode').text() );
}
);
</script>

This should present you with an alert box with the words 'hello LotsofCode', now, we can change the text value by using a simular method like so

<script>
$(document).ready(
function() {
$('#hello-lotsofcode').text('Hello from the visitor');
}
);
</script>

Now, when you execute this code, you should see that your div has the content of hello from the visitor, this is because we used the method text with a value and assigned it to the id hello-lotsofcode element, it's pretty simple isn't it!

Now, to hide and display elements:

<script>
$(document).ready(
function() {
$('#hello-lotsofcode').text('Hello from the visitor').hide();
}
);
</script>

And to show ...

<script>
$(document).ready(
function() {
$('#hello-lotsofcode').text('Hello from the visitor').show();
}
);
</script>

The two above methods don't mean much on there own, but with an event handler we can have some fun.

So at the top of the page add two anchor links.

<a href="#" class="hide-text">Hide Text</a>
<a href="#" class="show-text">Show Text</a>

Then the jQuery code for this is as follows:

<script>
$(document).ready(
function() {
$('.hide-text').click(
function() {
$('#hello-lotsofcode').text('Hello from the visitor').hide();
}
);
$('.show-text').click(
function() {
$('#hello-lotsofcode').text('Hello from the visitor').show();
}
);
}
);
</script>

Nice results eh ... ? You can easily hide anddisplay elements on the page.

I did say this tutorial was for beginners and it is, i have emphasized on this because now i am going to show you some basic effects and i don't want you to assume they are going to be really complicated.

So, while working with the same file, we can add a nice fading effect to go along with our new text, like so:

<script>
$(document).ready(
function() {
$('#hello-lotsofcode').text('Hello from the visitor').hide().fadeIn('slow');
}
);
</script>

Note the chainability, all i have added is '.hide().fadeIn('slow')' to the end of the string so we hide the element and then immediately after we fade it in, take a look at the results.

Take a look here: http://www.soderlind.no/archives/2006/01/03/imagemanager-20/

Download here: http://www.soderlind.no/download/ImageManager2.41.zip

I know someone will really appreciate this post as i would appreciate someone else posting a link to such a great resourse, if anyone knows of any other open source / free plugins for TinyMCE please post here.

If PHP safe_mode is enabled on server you may find problems with thumbnails ...