Hackathons!

I’ve recently participated in a couple of hackathons to keep brushed up on my coding skills. In both instances, the hackathons were motivated by working with open data, which I also find interesting. Open data is usually datasets that government has sitting in a database somewhere that may be useful for apps, programs or visualization that they do not necessarily have time to do themselves. Since the people of the country technically “own” the data, there has been a movement lately to release it to the people to use. In both hackathons, I worked with my friend (and media and design expert) – Carlos Saavedra.

The first was the “Open Data Guelph” hackathon which was put on by the City of Guelph. You can see the data sets available at the Guelph Open Data website. Since we were given data like bus routes, heritage site locations, parks, bicycle paths and elevation / topographic data our motivation was “build you own adventure” to discover the city of Guelph. The easiest data to work with was the park data since it was csv and followed a regular easy to read format. There were also some data sets which used XML. This was also quite easy to handle in PHP because there are built-in functions to parse XML. The tricky data was ESRI shapefiles. There were a few PHP libraries available to read these types of files, but given the time constraints (24 hours) of the hackathon, we didn’t end up getting to use this data. In the end, we ended up getting the bus data sets, and the park data sets working.

You can try our app here: myCity Guelph Adventure Game.

The second was the “CODE (Canadian Open Data Experience)” competition by the Government of Canada. This competition had much more data, and the sets were very large compared to the Guelph data. For instance, one of the sets for labour force data was 65 megabytes and had over 500,000 lines of records to parse. For this app, we decided given the datasets we had available, we would create an app for immigrants to help them find a good city to live in. It is well known in Canada that the typical choice is Toronto, however maybe there are places where people may have a better fit given certain preferences. We used criteria like climate, tolerance for crime, housing prices, desired income level, type of job industry the person is looking for, and whether they were part of a particular visible minority to determine which city may be best for them. Here’s a quick demo video of the “newRoots app“. You can try the app yourself at the newRoots app page.

You can also follow our team’s twitter account – @2electricsheep

PHP Tutorial: Replace long link text

I created this function so that I could have a way of preventing very long non-breaking text links from breaking my web page layout. Paritcularly, this is used in my tweet / facebook section of my homepage. Whenever I posted a link to either of them, when the link URL was too long and could not be broken, it would overflow into the next column. Yes of course you could use css to do this, however the methods which are generally used are not valid with CSS2.1, so I came up with a way that programatically parses the link and replaces the text with “[Link]”. There are some limitations to this approach. First, since I use a simple solution, there is no way to preserve some information normally in the link such as target, title etc. Second it is being used for tweet and facebook statuses, so it is limited to checking only the first encountered link. It could be expanded to include multiple links, but I have no need for this at the moment so I left it out. Update: I noticed that it was also filtering my @links from twitter, so I made a slight change so that it will only shorten if it finds http:// in the url text now. Anyway here is the code:

/*
* Replaces all link-text with '[Link]' so that links which are very long do not break web page layouts
* Note: some information is lost, such as custom title, target etc.
* Jason Ernst- 2011
*/
function filter_long_url($content)
{
$startpos = strpos($content, "", $startpos);
if($midpos !== false)
{
$endpos = strpos($content, "", $midpos);
if($endpos !== false)
{
$url = substr($content, $midpos+1, ($endpos)-($midpos+1));
if(strpos($url, "http://")===false)
return $content;
else
{
$newcontent = substr($content, 0, $startpos);
$newcontent = $newcontent . "[Link]" . substr($content, $endpos+4);
}
}
else
return $content;
}
else
return $content;
}
else
return $content;

return $newcontent;
}

If the function gets something with a half-completed tag, it should just return the original content since it is impossible to find the other parts of the tag correctly.

WordPress Tutorial: Recent Posts Block with Images

This post follows up on the last WordPress tutorial which shows how to start using featured images. In this post, I show how you can display a block of recent posts along with the featured image, in the same way as my website. (See the bottom of the home page, or the bottom of individual posts).

You will likely need to play around with the styling (margins, padding, etc.) a bit to fit with your own templates, but this should give you a good start. This assumes that you have setup thumbnails for “mini-thumbnail” (see previous tutorial on how to do that). You can play around with how many posts you want to display using posts_per_page below.


What the recent posts block will look something like

The first thing to pay attention to is the shorten_content function. This ensures that the content is not too long to display within the limited area we have. You can put this directly in the template file you are editing if you like, but I put mine in the functions.php file for the particular template.

)|(\)|(\
)/", " ", $content);
$content = strip_tags($content);
if(strlen($content) < $size) return $content; $content = substr($content, 0, $size); $spaceloc = strrpos($content, " "); if($spaceloc) { $content = substr($content, 0, $spaceloc); $content.= "..."; } return $content; } ?>

Next we reset the query so that we can make a new query with the number of posts we would like and how we want to order them. For recent posts, we order by date and in this case we are showing 6 posts. Also one spot to pay attention to is the $count checking. You will notice when $count = 3, a clearing div is displayed. This controls how many recent posts to show per line. You can change this number to get more or less on one line.

Recent Articles

"date", "order" => "DESC", "offset" => 1, "posts_per_page" => 6));
if(have_posts())
{
$count = 0;
while(have_posts())
{
$count++;
the_post();
$postthumbnail = get_the_post_thumbnail($post->ID, 'mini-thumbnail');
if(!isset($postthumbnail) || $postthumbnail == "")
$postthumbnail = ''. get_the_title() .'';
?>



 

The last thing we need is the css to style things. This is likely where you will need to change things to suit your own site.

.recent-entry { float:left; width: 30%; //change this width depending on how many entries you want on one line.}
.recent-entry h2 { font-size: 14px; }
.recent-entry img { padding-right: 2px; }
.recent-entry date { font-size: 9px; color: #333333; }
.recent-entry content { font-size: 10px; }

WordPress Tutorial: Featured Images

This is a quick tutorial on how to get out featured images, which I use extensively on this blog (jasonernst.com). The featured image is what shows on the home page for the site, and on the individual entries. In the event that there is no featured image set for a given post, a default image is displayed instead.


An example of a featured image

For reference, I know this has worked since at least WordPress 3.0, but it may work with some earlier versions as well (I think earliest may be WP 2.9). This tutorial assumes you have some knowledge of how to work with php files, and have a basic idea of how WP templates work.

Step 1: Thumbnail Sizes
You may wish to have some different thumbnail sizes from the usual ones which WordPress generates automatically. You can change this in Settings->Media and adjust the sizes to your liking. This will allow you to control the large, medium and thumbnail sizes.

Since WordPress 2.9, you can actually create your own image sizes and names using the add_image_size function. You can just add this into your functions.php file within your template. For example, my featured post thumbnail size is 240×150 and I want the image to be cropped from the original (rather than stretched weirdly).

 

This is what I added to my functions.php (note the check for the function, so that we don’t break older WP versions):

if (function_exists('add_theme_support')) {
add_image_size('featured-thumbnail', 240, 150, true);
}

Step 2: Customize the template
Here we check if there are any thumbnails generated, and if not display the default image. You could also do other things, such as display nothing, or ignore the post altogether if there is no thumbnail image. This is an example of the main thumbnail I use for my featured article on my home page (in my home.php template file). If there is no featured image set for the post, it displays a default image found in the template’s “img” folder. Note: this is done within “the loop”.

$postthumbnail = get_the_post_thumbnail($post->ID, 'single-post-thumbnail');
if(!isset($postthumbnail) || $postthumbnail == "")
$postthumbnail = ''. get_the_title() .'';

Step 3: Add the thumbnail images to the posts


Click the featured image link to set an image as the featured image

This is the easy part, all you have to do is upload some images to the library. After the image you want is in the library you can select is using the “show” link and then use the link to select “set as featured image”. You should now see it show up in your template.

One last note, a useful plugin…especially when you are still working out the sizes of your images is the WordPress Regenerate Thumbnails plugin. It will regenerate all of the images to the new size you have specified.

Update: I have now added another related tutorial on how you can use featured images to display a block of recent articles alongside the image for each article.