A tag is a keyword associated with a piece of information.

On Wohill we are using tags for several purposes. For every new blog entry we write, one or several tags are specified to associate the information of the entry with some relevant and obvious keywords. These keywords are very useful in several ways as I will explain in just a minute.

The tags are stored #-separated as a field in one of the database tables for each blog entry. Each time a blog entry is created and saved or updated any specified tags are saved to the database and instantly upon reload affecting any sections or areas related to the tag functionality on the entire site. This provides us with a very dynamic and self-going solution.

Here are three ways that we use tags on Wohill:

#1 - All tags are used to build up a tag cloud that you can see at the bottom left of this blog. The purpose of the tag cloud is to easily get an overview of all tags used on Wohill but also the frequency of how many times each individual tag has been used by looking at the size of it.

# 2 - The tags are used to build up links displayed at the bottom of each blog entry. These links are useful for just being there as words indicating what this entry is about. They are also links to other posts on Wohill tagged with the same tag. They will finally help a specific entry index a little bit better in search engine results. One could in this section instead or also choose to use so-called technorati tags which instead would link to similar tags on Technorati, that is to other blogs.

#3 - The tags are used to build up links to related blog entries for each entry. So for every blog entry, the tags for that entry are one by one matched with tags for other entries and displaying those that have a matching tag. This way we make the site more interesting and hopefully visitors will stay longer as it makes it easier for them to find relevant information that obviously already was interesting to them. The really neat thing about this is that you don't have to update the related blog entries on your own. All you have to do is to specify the tags when creating a blog entry. Both recent and old blog entries are updated with the latest information each time the blog is accessed.

Next development blog entry will be more specifically on how to create a tag cloud for your site - the PHP way

This is the second article about tags.

Our tag cloud is promoted on the bottom left of this blog with this picture. Here is a short guide on how to create a tag cloud on your site using PHP and MySQL.



It is assumed that tags are stored in the database as a string separated by '#' and with a leading and trailing '#'. The purpose of this comes to use later on when creating links for related blog entries.

When the tag cloud is built up all tags are fetched from the database and put in an array.
A new array is populated with unique values pointing to the number of total occurences of a key. See code below:

/* Get all tags from all published posts and put them in an array as lower cased and trimmed. Count all occurences of the elements and create a new array which is an array of keys of unique elements pointing to values indicating how many of them there are in the source array. Return the array. */ function getAllTags() { $mysql_table = 'the_table'; /* An empty tag has the default value '__default__'. A non-empty tag has the format '#tag1#tag2#tag3#' and so on. */ $select_design_query = sprintf("SELECT * FROM %s WHERE (tags <> '__default__' AND published = 'yes')", $mysql_table); $select_design_result = mysql_query($select_design_query); if (!$select_design_result) { $message = 'Invalid query: ' . mysql_error() . "\n"; $message .= 'Whole query: ' . $select_design_query; die($message); } $subTags = array(); $allTags = array(); $counter = 0; /* Create an array containing all tags */ while ($row = mysql_fetch_assoc($select_design_result)) { /* Remove first and last character from string */ $subTags = substr($row['tags'], 1, -1); /* Create an array from the string */ $subTags = split("#", $subTags); /* Loop through array and put each value to lower case and trim */ foreach ($subTags as $value) { $allTags[$counter] = strtolower(trim($value)); $counter = $counter + 1; } } /* Create a new unique key->value array */ $tags = array_count_values($allTags); return $tags; }

Print the values of the array after each other as links and with different font sizes depending on the number of total occurences for a specific tag. This function has been taken from byteMyCode with a minor modification of the link of each tag. Each link is of the type <http://www.wohill.com/tags/some_tag>. This url is actually a rewrite url specified in htaccess. See this former entry about ht-access for more information. Make a call to this function where you want the tag cloud to be located.

function printTagCloud($tags) { arsort($tags); $max_size = 32; // max font size in pixels $min_size = 10; // min font size in pixels // largest and smallest array values $max_qty = max(array_values($tags)); $min_qty = min(array_values($tags)); // find the range of values $spread = $max_qty - $min_qty; if ($spread == 0) { // we don't want to divide by zero $spread = 1; } // set the font-size increment $step = ($max_size - $min_size) / ($spread); // loop through the tag array foreach ($tags as $key => $value) { // calculate font-size // find the $value in excess of $min_qty // multiply by the font-size increment ($size) // and add the $min_size set above $size = round($min_size + (($value - $min_qty) * $step)); echo '<a href="http://www.wohill.com/tags/' . $key . '" style="font-size: ' . $size . 'px" title="' . $value . ' things tagged with ' . $key . '">' . $key . '</a> '; } }

More about how to create related blog entries soon.

This is the third article about tags.

Once you have started tagging your entries this information can be used in several contexts and one of my favourites is the related blog entries functionality.

For each blog entry that is loaded to the user - tags for that entry needs to be matched to other tags in the database. All of these other tags are being used in the same way as a marker or keyword for one or several other entries. So other entries that have one or several of those matching tags will be displayed as related blog entries. This is a very dynamic and nice solution that updates both old and new entries with the most recent information automatically.

So here are again a couple of php-functions to solve this. As in the former example it is assumed that the tags are stored as a #-separated string with a leading and trailing # in the database for each entry.

Make these two calls in the place where you want to display related entries:

$resultSet = returnMatchingDesignsByTagsAsResult($row['tags'], "#"); printRelatedEntries($resultSet, $row['id']);

Where $row['tags'] is the tags-string.

The function 'returnMatchingDesignsByTagsAsResult' performs a query to the database for entries with matching tags and returns a resultset with those entries. Here is where it comes to use with the leading and trailing # in the tags-string:

/* Return query result that contains design rows with matching tags */ function returnMatchingDesignsByTagsAsResult($tagsString, $delimiter) { $mysql_table = 'the_table'; $counter = 0; $tags = array(); /* Remove # characters at the beginning and at the end */ $subTags = substr($tagsString, 1, -1); /* Split string into array */ $subTags = split($delimiter, $subTags); /* Loop through array */ foreach ($subTags as $value) { $tags[$counter] = strtolower(trim($value)); $counter = $counter + 1; } /* Create beginning of SQL-string */ $queryString = sprintf("SELECT * FROM %s WHERE ((published = 'yes') AND (", $mysql_table); $counter = 0; /* Loop through array of tags */ foreach ($tags as $value) { $tmpStr = "%" . $delimiter . $value . $delimiter . "%"; /* Find all entries that have a column value 'tags' which includes a substring with the pattern #tag# */ /* If first element in array */ if ($counter == 0) { $queryString .= sprintf("(tags LIKE '%s')", $tmpStr); } else { $queryString .= sprintf(" OR (tags LIKE '%s')", $tmpStr); } $counter = $counter + 1; } /* Complete the SQL-string */ $queryString .= ")) ORDER BY publishDate DESC"; $result_set = mysql_query($queryString); if (!$result_set) { $message = 'Invalid query: ' . mysql_error() . "\n"; $message .= 'Whole query: ' . $queryString; die($message); } return $result_set; }

Function 'printrelatedEntries' uses the result set from the other function and the id of the current design to print related entries to the web page:

function printRelatedEntries($resultSet, $id) { /* If there is at least on hit */ if (mysql_num_rows($resultSet) > 1) { Print "<tr valign=\"middle\"><td></td><td>"; Print "<b>Related blog entries:</b> <br />"; while ($row2 = mysql_fetch_assoc($resultSet)) { /* Don't print the entry if it is the same as the current since this is not excluded from the result set */ if ($row2['id'] != $id) { Print sprintf("- <a href=\"http://www.wohill.com/design/%s/%s.html\" title=\"%s\">%s</a><br />", $row2['id'], createUrlTitle($row2['name']), $row2['name'], $row2['name']); } } Print "</td><td></td><td></td></tr>"; } }

You still have to create your own sql-table and fill it with data to query of course, but hopefully this will help someone on the way for their specific solution.

There is a lot of art made by graffiti-artists throughout the world. It started thousands of years ago with murals and wall-carvings. A few lost ones were probably carved in wood. I guess one can say that graffiti has many ancestors and there are even more ways of interpreting where and who started the graffiti craze. Many would probably debate and say that it is vandalism but I would like to say that a lot of it is art. Looking back at the days when the kids in school ran around with their ”black-books” and had heaps of nice sketches of potential murals, hole-cars and wall-art. A lot of graffiti often wants to debate society…

The sketch I am showing you this time is a graffiti artist clinging on to a banister on a subway-train. Might be the night he is of to paint the town. He has a scarf partly over his face and backpack filled with cans… Hopefully all the favourite caps are in his pockets. A spray-can came in the picture to – more like a symbol for one of the main things you need for your work of art. His street-name is ”Ph”. Now keep the streets clean but never forget about what is art.