Cagintranet Web Design » Tutorials

Create Google Static Area Maps with Latitude & Longitude Boundaries

Chris Cagle — Wed, 10 Feb 2010 18:17:49 +0000

This tutorial shows you how to use the little known Google Static Maps feature to outline a specific boundary such a zip code or a city. It requires that you have your own Google Maps API. Above is the output image generated by the code below.

This is the PHP code that is needed. The tricky part is finding the latitude and longitude points of the particular area you want to draw. I got my data for BuyAPittsburghHome.com systematically from PushPin’s API.

The PHP


# Google Maps API Key (replace with your key)
$apikey="ABQIAAAA_6h1iP7xkNWbJaJtdQExbxQoasim_Ec9007jwQbCPHO_oeeE-RTam6RjbglJrcjrbo6lqh5Wmpn8uQ";

# $latlon is a variable pulled from MySQL that stores all the latitude and longitude points of a particular area.
# In your case, you would probably have a database connection followed by sql that pulls the respective data needed.
# Since I cannot tell you where/how to pull the data from your own database, I am just going to set it here manually.
$latlon = 'a:21:{i:0;a:2:{i:0;s:8:"-80.0614";i:1;s:7:"40.5059";}i:1;a:2:{i:0;s:8:"-80.0504";i:1;s:7:"40.5123";}i:2;a:2:{i:0;s:8:"-80.0453";i:1;s:7:"40.5062";}i:3;a:2:{i:0;s:8:"-80.0336";i:1;s:7:"40.5066";}i:4;a:2:{i:0;s:8:"-80.0337";i:1;s:7:"40.5023";}i:5;a:2:{i:0;s:8:"-80.0456";i:1;s:7:"40.4999";}i:6;a:2:{i:0;s:8:"-80.0452";i:1;s:7:"40.4885";}i:7;a:2:{i:0;s:8:"-80.0518";i:1;s:7:"40.4837";}i:8;a:2:{i:0;s:8:"-80.0791";i:1;s:7:"40.5023";}i:9;a:2:{i:0;s:8:"-80.1205";i:1;s:7:"40.5151";}i:10;a:2:{i:0;s:6:"-80.11";i:1;s:6:"40.531";}i:11;a:2:{i:0;s:8:"-80.1076";i:1;s:7:"40.5283";}i:12;a:2:{i:0;s:7:"-80.111";i:1;s:7:"40.5271";}i:13;a:2:{i:0;s:8:"-80.1056";i:1;s:7:"40.5208";}i:14;a:2:{i:0;s:8:"-80.0926";i:1;s:7:"40.5133";}i:15;a:2:{i:0;s:8:"-80.0932";i:1;s:7:"40.5178";}i:16;a:2:{i:0;s:8:"-80.0879";i:1;s:7:"40.5212";}i:17;a:2:{i:0;s:8:"-80.0753";i:1;s:7:"40.5205";}i:18;a:2:{i:0;s:8:"-80.0718";i:1;s:7:"40.5233";}i:19;a:2:{i:0;s:8:"-80.0611";i:1;s:7:"40.5201";}i:20;a:2:{i:0;s:8:"-80.0614";i:1;s:7:"40.5059";}}';

# unserialize the code taken from your mySQL database. If your data is not serialized, comment this line out
$bounds = unserialize($latlon);

if ($bounds) {
	# cycle thru each lat/lon pair, concatenate and make pipe-delimited
	foreach ($bounds as $point) {
 		$latlon .= "%7C".$point[1].",".$point[0];
	}

	# build the image url
	$path = "color:blue|weight:4|fillcolor:black". $latlon;
	$MapAreaImage = "http://maps.google.com/maps/api/staticmap?path=".$path."&size=500x300&sensor=false&key=".$apikey;
}

The HTML

This is the code that then displays that drawn out area map image in HTML:

" alt="" />

The Output

The PHP and HTML combined will generate the code below as the image source. A live example of this is the header image of this post (Zip Code 15202 in Pittsburgh, PA).

Tutorial: How to Implement Uploadify into an Application

Chris Cagle — Thu, 15 Oct 2009 10:00:32 +0000

Last week I showed how to implement Jcrop into an application. In this tutorial – which also pulls from my experiences developing GetSimple – I implement the jQuery plugin Uploadify.

In this tutorial, we create a simple file upload script that also displays an unordered list of the files in the upload directory. The list of files refreshes via an ajax call every time Uploadify processes a queue.

Demo

View the demo or download the files

The Basic HTML

Uploadify Application Demo

The PHP

//folder where the files are stored at
//you may need to chmod this folder to 775 or 777 for it to work
$src_folder = 'files/';

//file that includes the function to list all files in ul
include("inc/file_list.php");

//if javascript is disabled, the ftp will still work
if (isset($_FILES["file"])) {
	if ($_FILES["file"]["error"] > 0) {
	  $error = 'Error Uploading!';
	} else {
    $count = '1';
    $file_loc = $path . $_FILES["file"]["name"];
    $base = $_FILES["file"]["name"];
    while ( file_exists($file_loc) ) {
		$file_loc = $path . $count.'-'. $_FILES["file"]["name"];
		$base = $count.'-'. $_FILES["file"]["name"];
		$count++;
	}
    move_uploaded_file($_FILES["file"]["tmp_name"], $file_loc);
	}
}

The jQuery

$('#mainftp').uploadify({
	'uploader' : 'js/uploadify/uploadify.swf',
	'script' : 'js/uploadify/uploadify.php',
	'multi' : true,
	'auto' : true,
	'height' : '32',
	'width' : '250',
	'buttonImg' : 'img/browse.png',
	'cancelImg' : 'img/cancel.png',
	'folder' : 'files/',
	onProgress: function() {
		$('#loader').show();
	},
	onAllComplete: function() {
		$('#loader').hide();
		$('#allfiles').load(location.href+" #allfiles>*","");
	}
});

Notes about this javascript:

Uploadify was unzipped directly from the download on their site. To upgrade, simply replace the js/uploadify/ folder with the newer version.
height and width are for the respective dimentions of your custom button image – the demo’s being in img/browse.png
folder is the location where the files will be uploaded to. This is also the folder that should be listed on line #3 of the PHP code above in the $src_folder variable.
$(‘#loader’).show(); and $(‘#loader’).hide(); start and stop the loading gif that many applications use now to show that something is being uploaded/processed.
$(‘#allfiles’).load(location.href+” #allfiles>*”,”"); – replaces the whole div with the id of allfiles with and updated listing with the newly uploaded files in it

Tutorial: How to Implement Jcrop into an Application

Chris Cagle — Sat, 10 Oct 2009 20:17:19 +0000

When creating the ‘image control panel’ for the latest version of GetSimple, I decided to integrate the wonderful Jcrop jQuery plugin into it. Amazingly, there are very few tutorials online that show the full extent of how to use Jcrop in real world situations. The only one I found that was of use was TalkInCode’s tutorial. I did start out using that example’s ImageManipulation class, but changed it slightly so that after submission, you are brought back to the original page instead of being shown the thumbnail.

Demo & Features

View the Demo or download the files.

Some of the more unique features of this demo are:

The aspectRatio changes to 1:1 when ctrl-Q or command-Q is pressed
The dimensions of the selected area are shown in an interesting way
Stats on the thumbnail and the current image are displayed

The Basic HTML

The demo/download has some extra code for displaying the image stats & linking of the css, js and class files.


" id="cropbox" />


Selection Dimentions
 x 



  
  
  
  
  
    ctrl-Q or command-Q for square

The PHP

//the name of the passed image
//example would be:   http://myapplication.com/image.php?i=photo.jpg
$src = $_GET['i'];

//folder where the images are
$src_folder = 'images/';

//folder where the thumbnails will be saved to
//you may need to chmod 775 or 777 this folder
$thumb_folder = 'images/thumbnails/'; 

if ($_SERVER['REQUEST_METHOD'] == 'POST'){

	require('inc/imagemanipulation.php');

	$objImage = new ImageManipulation($src_folder . $src);
	if ( $objImage->imageok ) {
		$objImage->setCrop($_POST['x'], $_POST['y'], $_POST['w'], $_POST['h']);
		$objImage->save($thumb_folder . 'thumbnail.' .$src);
	} else {
		echo 'Error!';
	}
}

The jQuery

function updateCoords(c) {
	$('#handw').show();
  $('#x').val(c.x);
  $('#y').val(c.y);
  $('#w').val(c.w);
  $('#h').val(c.h);
  $('#pich').html(c.h);
  $('#picw').html(c.w);
};

function checkCoords()
{
  if (parseInt($('#x').val())) return true;
  alert('Please select a crop region then press submit.');
  return false;
};

jQuery(document).ready(function() { 

	$(window).load(function(){
	var api = $.Jcrop('#cropbox',{
    onChange: updateCoords,
    onSelect: updateCoords,
    boxWidth: 500,
    boxHeight: 500
  });
  var isCtrl = false;
	$(document).keyup(function (e) {
		api.setOptions({ aspectRatio: 0 });
		api.focus();
		if(e.which == 17) isCtrl=false;
	}).keydown(function (e) {
		if(e.which == 17) isCtrl=true;
		if(e.which == 81 && isCtrl == true) {
			api.setOptions({ aspectRatio: 1 });
			api.focus();
		}
	});
});

});

The New & Improved Way to Turn WordPress 2.7 into a Membership Community

Chris Cagle — Thu, 05 Feb 2009 17:35:18 +0000

Last March I wrote an article for WPDesigner (then subsequently republished it here) detailing the ways you could use a base install of WordPress (then on version 2.3) into a membership directory with the help of just a few plugins. This worked, and still works beautifully for me over at my Pittsburgh Designers community site. But since writing this article new plugins have become available with the unveiling of the completely revised WP core update 2.7.

Replacing the Old Plugins

In my previous installations I used only three plugins: Dealsway’s User Manager and IWG’s Role Manager. This time around I wanted more customization and more control over what was being shown to the users. I ended up trying every plugin I could find that might have a remote chance in helping me accomplish my end objective. The following is my final list of plugins and customization tricks that I used in creating my latest membership project: BUYAPITTSBURGHHOME.com.

Profile Setup & Customization

While this is arguably the most important part of the membership site, I really wasn’t looking for a replacement to the User Manager plguin I was currently using. I had no problem with it, and it was a fairly easy to use plugin. On my membership tutorial, someone suggested looking at the Register Plus plugin. I decided to give it a shot, and I am glad I did. While I still needed to hack the /wp-admin/users-edit.php file to get my profile fields in the order I wanted them, I was happy with the noticeable improvements this plugin had over User Manager.

There are many things that Register Plus does well, but I chose it for the fact that I may need some of it’s features down the road, not particularly right now. I did like the fact that it gave you the ability to replace some of the outgoing WP themed emails surrounding the registration events, but after some testing I decided that it wasn’t the best plugin to handle this. New User Email Setup did the trick, and made the outgoing emails completely customizable.

I also added the old and reliable User Photo plugin. I had installed this on many client WP directory sites, but this is the first time I used it myself. There are a ton of options, but once you find the right combination – it’s a set it and forget it type of plugin.

Plugins I Use

Plugins I Tested (but came up short)

WP User Manager

Admin Interface & Branding

One of the most important things I wanted more control over this time was to have a more customizable admin section where the members enter their profile data. There are a slew of plugins that add various levels of branding the admin dashboard, but only one went to the extent I needed.

Customize your Community (or CYC) was created by one of the true WordPress gurus, Joost De Valk. It is extremely easy to use, and works like a charm when paired with the WP Hide Dashboard plugin (without it, members can type in /wp-admin/index.php and get to your dashboard).

I ended up hacking the CYC plugin so I could order my custom profile fields the way I wanted them displayed, but this was just my preference, and not required at all for it to work perfectly.

Plugin I Use

Customize Your Community

Plugins I Tested (but came up short)

Displaying Authors

As soon as I found Custom Author Permalink, I knew it was a godsend. Anyone wanting to get rid of the awful /author/ permalink structure needs this plugin. The great thing about it is that you can activate the plugin just to set the permalink, then deactivate immediately afterward – it doesn’t have to always be ‘on’ to work.

In my old setup, I needed to ‘approve’ a member by creating a new post on their behalf in order for their profile page to become visible. Now, the plugin Show authors without posts takes care of this for me. One problem is that now that every profile is visible, I had to reverse engineer a little PHP code to check to see if certain profile fields met certain criteria, otherwise I would just do a redirect back to the site’s homepage.

Plugins I Use

Plugins I Tested (but came up short)

List Authors Plus

WordPress Security

To be honest, I didn’t have much in the way of security back when I created my original membership directory. Now, since there are a slew of great security related plugins available, I definitely made this a high priority.

My biggest problem was that I had a ton of spam registrations – a problem that seems to plague many WordPress site administrators. While you can never stop a registration strictly because someone wants to look around, I found that WP-reCAPTCHA took care of all the spam registrations once and for all. Although the Register Plus plugin gave me the ability to implement CAPTCHA, this plugin gave me more customizable options.

Another problem of mine was that although I relied on Role Manager (and I still do) to restrict a member’s movement within the admin panel, I realized that there could be plenty going on in the background that I had no clue about. In came Audit Trail – a plugin that tracks every movement and attempt of a logged in user. The only thing I would change is for it to do is to track what was changed when a member updated his or her profile. Audit Trail already tries to capture this, but when you start adding custom profile fields it loses its functionality.

As I mentioned above, I still use IWG’s Role Manager plugin to restrict which actions can be done by logged in members. I teamed this with the already mentioned WP Hide Dashboard plugin, and my users can now only see what I want them to see.

I also installed WP Security Scan just to see what I could find – which at the time was nothing, but I figure this will end up finding its way onto my regular checklist.

Plugins I Use

Plugins I Tested (but came up short)

Miscellaneous & Vital Plugins

Statistics: For this project, I wanted to see how far I could integrate a statistics package into the WordPress backend. I tried out StatPress Reloaded and WordPress Reports, but in the end kept with my reliable stalwarts Statcounter and Google Analytics. I think the next plugin I want to test is for Mint.

Database Backups: Backups are essential to preserving an online community in case of a disaster and should be scheduled to run on at least a weekly basis. For me, I originally started using WP-DBManager, but after finding that it never really took a complete backup (presumably because of my horrible host) I switched to WordPress Database Backup and never looked back.

SEO: I am not sure how useful sitemaps are to the search engines, but I figured creating one wouldn’t hurt. I only tried Google XML Sitemaps, and stuck with it because looked to be the best right from the start. I also chose to install Platinum SEO Pack for the flexibility it gave when creating the page titles.

Development: WP-phpMyAdmin and WP Easy Uploader were essential for me when I was doing development work on the site. With these two, my time in development was greatly reduced.

Other Usefuls: Here is the rest of the list I used when creating my community: WP Super Cache, Weasel’s HTML Bios, Article Templates, WP125, WP-Components

Very Promising: These are quality plugins that I just don’t have a use for yet. They are ones I want to keep in my back pocket just incase I ever have a need for them: SimplePie Plugin for WordPress, RegLevel, WordPress Newsletter, Member Access

How to: Sync Emails between your Blackberry and Outlook

Chris Cagle — Wed, 22 Oct 2008 01:31:15 +0000

When I started my home business, I had no way of checking my email unless I was physically at home. This worked for about a year, but after not responding to some important emails in a timely fashion, I knew I had to change something.

In came my first Blackberry Curve.

I loved it, and it was a breeze to setup using the setup wizard that came on the device. The only problem, I noticed, was that there was no easy way to sync emails between my Outlook 2003 (insert your desktop client here) and my Blackberry. Actually I read on many forums that it was virtually impossible without a BES server.

Blackberry apparently only allows you to sync your tasks, calendar and contacts though the Desktop Manager – nothing else. The important thing to me were to have the emails synced, but forum after forum, I found people telling me it couldn’t be done.

Moving to Gmail

I lived with the fact that my Blackberry had no idea what my Outlook was doing and vice versa for almost 5 months until I was forced to move my whole email setup from GoDaddy’s servers into Google Apps because of GoDaddy’s horrible email limitations.

Moving my admin @ cagintranet.com email address was pretty simple using Google Apps for Business. It is a free service, and all it took was setting up a couple new CNAME entries within GoDaddy’s domain control panel (which Google had tutorials walking me through the whole process).

Outlook Setup

Setting up Outlook was pretty easy too, and I originally settled on connecting to my new Gmail account via regular old POP3 access, but later switched it to IMAP. I did this because by using IMAP, I was able to keep what I did in Outlook synced with what Gmail saw. If I moved an email into a folder within Outlook, it was moved into a corresponding “label” within Gmail. When I sent an email, it was placed in my Outlook’s Sent Itmes folder as well as the Sent Items in Gmail. Anyway, you get the hint, so after taking the next hour or so moving all my old emails from Outlook into my new Gmail account, I was ready to reset up my Blackberry to connect to Google’s servers.

Disclaimer: You can use any desktop client (Mail, Thunderbird, etc.) to interface between Gmail and your computer – I have Outlook, which is why I used it in this example.

Blackberry Setup

Because I switched email servers, I had to go into the “Personal Email Set Up” icon on my Blackberry and delete the admin @ cagintranet account that was already there.

Using the default setup wizard when adding a new account to the Blackberry, uses the POP3 connection protocol. POP3 is fine, but it is what was stopping me from having any sort of two-way email sync with Outlook. I decided to poke around the internet for an alternative, and lo and behold, I found a Google article detailing the steps needed to setup a Blackberry via IMAP.

The steps in that article are a little long (22 in all), but they were easy to follow and the outcome was perfect. I now have my Outlook desktop client syncing with my Gmail account which also syncs with my Blackberry – all in harmonium. I realize that this only helps a select few of you out there, but I thought it could be helpful enough that I wanted to post it here.

How to Create your own BlogCatalog Widget via their API

Chris Cagle — Thu, 21 Aug 2008 04:00:25 +0000

When releasing the first version of my WP-SocialCount WordPress plugin a while back, an interested visitor asked if I would be so kind as to include a way to reshape the BlogCatalog widget with the next release of the plugin. I had every intention of doing that until I saw just how much would have to be changed in my plugin to accommodate this – so I decided to write this instead.

Current BlogCatalog Widgets

Currently, the list of widgets that BlogCatalog provides it’s users is pretty meager. Hopefully this tutorial will allow it’s members to promote themselves a little easier (and in better style!) than before.

Step 1: Get your API Key

To get your API key, all you need to do is sign in, and go to it’s developers page. A couple sections down, you will see something like the image below. Write down your key and save it for later.

Step 2: Construct the API Calls

In order to make the API call, we need to know the structure that BlogCatalog requires the calls to be in. Looking at their developers page, we see that they only have two types of calls. One is for gathering User data and the other is for getting Blog data.

We are going to start off using the User data api call because this should give us quite a bit of the information we need right off the bat.

The structure as outlined by their documentation is: http://api.blogcatalog.com/getinfo?bcwsid=[apikey]&username=[username]

Looking over this call I see that the only thing we don’t currently have is the [username]. Remember, we got the [apikey] back in Step 1.

Step 3: Set Initial Variables

To make our coding as easy as possible, lets set some variables right off the bat so that we can reference them anytime we need their data later on.

FYI: I will be adding each new step on top of each previous step so that you can see how we build the application…

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

FYI: I X’d out my api key, but you can easily insert your own key in here…

Step 4: Use PHP to Capture Your Data

Since BlogCatalog returns all their data in the form of XML (their documentation didn’t state this, but it’s the format their examples are in, so let’s run with that) we will use the simplexml_load_file php function to load the file into the variable $userfeeddata.

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

//Pulling API user feed data
$userfeeddata = simplexml_load_file ("http://api.blogcatalog.com/getinfo?bcwsid=$api&username=$username");

Step 5: Pull That Data Into Variables

After loading that file of data into our $userfeeddata variable, we can start pulling the information we need out. You can see below that I am pulling the avatar and url from this data. How I realize the hierarchy of the data is done by doing a print_r command on the $userfeeddata variable.

print_r ($userfeeddata);

I usually add this line of code in right after we load the data, and then comment it out once I have everything that I need. After analyzing the print_r output, this is what I came up with:

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

//Pulling API user feed data
$userfeeddata = simplexml_load_file ("http://api.blogcatalog.com/getinfo?bcwsid=$api&username=$username");
//print_r ($userfeeddata);

//Loading that data into variables for later
$avatar = $userfeeddata->result->avatar;
$url = $userfeeddata->result->weblogs->weblog->url;

Step 6: Use this Data for the Second of our API Calls

back in Step 2 we found that BC gives us two types of API calls. We already used the User data feed, but now we will make use of the Blog data feed: http://api.blogcatalog.com/bloginfo?bcwsid=[apikey]&url=[blog url]

Just as before, we already have the [apikey] value, but we don’t yet have the [blog url]. Actually we do, and it is in the form of $url, which we got in Step 5. So, lets make another call to the API, only this time using the one to get Blog information:

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

//Pulling API user feed data
$userfeeddata = simplexml_load_file ("http://api.blogcatalog.com/getinfo?bcwsid=$api&username=$username");

//Loading that data into variables for later
$avatar = $userfeeddata->result->avatar;
$url = $userfeeddata->result->weblogs->weblog->url;

//Pulling API blog feed data
$blogfeeddata = simplexml_load_file ("http://api.blogcatalog.com/bloginfo?bcwsid=$api&url=$url");

Using the print_r command again, I find a some more data that I want to pull out to include in our new widget.

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

//Pulling API user feed data
$userfeeddata = simplexml_load_file ("http://api.blogcatalog.com/getinfo?bcwsid=$api&username=$username");

//Loading that data into variables for later
$avatar = $userfeeddata->result->avatar;
$url = $userfeeddata->result->weblogs->weblog->url;

//Pulling API blog feed data
$blogfeeddata = simplexml_load_file ("http://api.blogcatalog.com/bloginfo?bcwsid=$api&url=$url");

//Loading that data into variables for later
$tags = $blogfeeddata->result->weblog->tags->tag;
$categories = $blogfeeddata->result->weblog->categories->category;
$bcurl = $blogfeeddata->result->weblog->bcurl;
$views = $blogfeeddata->result->weblog->views;
$rank = $blogfeeddata->result->weblog->rank;
$friends = $blogfeeddata->result->weblog->neighborhood->user;
$viewers = $blogfeeddata->result->weblog->recent_viewers->user;

Step 7. Echoing the Data back to the Page

We have all our data mining complete, so now we can focus on sending this it out to our web page.

Here we are echoing out some of the user information that we received during the two API calls we did. You can see that we are showing your Avatar, which is linked to your BlogCatalog page, and your site’s number of views and rank.

//Echos out User Information
echo "
";
echo "Views: ". $views ."
";
echo "Rank: ". $rank ."
";

The next data we want to show are the tags and categories of the blog in question. To do this, we can use a foreach loop that will cycle through each tag and category and create a link back to the BlogCatalog page for each one.

Hint: You can see that I had to sanitize the variables by converting all letters to lowercase and replace spaces with underscores in order for them to work correctly in the URL.

//Cycle through and display tags
	echo "Tags:";
	$set = 0;
	foreach ($tags as $i => $tag) {
		if($set < $limit){
			echo "". $tag ." ";
		}
		$set  ;
	}

	echo "
";

	//Cycle through and display categories
	echo "Categories: ";
	$set = 0;
	foreach ($categories as $i => $cat) {
		if($set < $limit){
			echo "". $cat ." ";
		}
		$set  ;
	}

DEMO: View the final outcome of this tutorial (with a little bit of CSS and HTML markup added, which you can see in the header section of the page when you do a “view source”).

SOURCE CODE: Download the full PHP source code.

Using the WordPress Link Manager to Display Your Portfolio

Chris Cagle — Mon, 11 Aug 2008 04:09:21 +0000

For web designers or other businesses alike, setting up a quality portfolio is essential. This tutorial will show you how you can use WordPress’s Link Manager to create and display your portfolio. This will allow you to use WordPress to it’s fullest extent, without the need of extra plugins or any hacked code.

Step 1. Supplying the Data

Lets start off by populating our Links manager with some data. In the screenshot below you can see the fields that I am using:

Name – Client Name
Web Address – To link back to. This can either be an internal posting explaining the project in detail or the actual client website (which is what I use).
Description – For title and alt attributes.
Categories – Skills that were used in creating the project.
Advanced: Image Address – Link to the screenshot of your project
Advanced: Notes – Description of the project

Optional fields include “Target” where you can force your links to open into a new browser window and “Keep this link private.” This is how you can set up a portfolio entry but not have it shown in the display on the site. This could be helpful for when you have a project finished, but you can’t show it until it’s live.

When you are finished adding all your portfolio entries, you can go to Your WP Dashboard > Manage > Links to see the full list.

Step 2. Display Your Portfolio

WordPress has two different ways to display it’s “bookmarks” which we are now using as portfolio entries. They are wp_list_bookmarks and get_bookmarks

We will use the get_bookmarks template tag because it allows us to manipulate how our “bookmarks” look. The only caveat is that this template tag returns an array – which we will need to use some PHP code to parse though it. To see the data that get_bookmarks outputs, I quickly added this little snippet to my code:

$arr_portfolio = get_bookmarks();
print_r ($arr_portfolio);

The output from the print_r on get_bookmarks shows how the array is structured.

From that file, we can decipher enough to get the rest of the data echo’d out into an unordered list. The only thing that took a little tweaking was the fact that you have to find your own categories by running SQL on the wp_term_relationships and wp_terms tables in order to derive the category names by their id and the link’s id.

";
foreach ($arr_portfolio as $site) {

   echo "";
   echo "". $site->link_name ."";
   echo "link_url ."\" title=\"". $site->link_description ."\">";
   echo "link_image ."\" />";
   echo "". $site->link_notes ."";

   $cats = $wpdb->get_results("SELECT * FROM wp_term_relationships, wp_terms WHERE wp_term_relationships.object_id = $site->link_id AND wp_terms.term_id = wp_term_relationships.term_taxonomy_id");
   echo "Skills Used: ";
   foreach ($cats as $cat) {
   	echo $cat->name .", ";
   }

   echo "";
}
echo "";
?>

The great thing is that this code doesn’t need to be placed within the_Loop. It will work great within it’s own template or on the sidebar.

View the demo portfolio using this code.

Generating an Automatic Popular Post List via Del.icio.us or Digg in WordPress

Chris Cagle — Wed, 30 Jul 2008 04:00:07 +0000

Photo Credit: reportergimmi

A few months ago I wrote an article on how to create a popular posts list, and in the example I used a category called ‘Popular’ to determine what was shown within the list. This approach is great for those that remember to periodically update their list by adding new posts to that category, but I wanted a way for this to be done automatically.

Auto Popular List based on Number of Comments

In this example I check the number of comments, and if they are greater than or equal to 10 (see the 8th line of the code below) then I display the post. This means that this Loop will show any post that has 10 or more comments. The $popular->query('showposts=50'); at the top of the script is so that this Loop will run the ‘number of comments’ check for each of your 50 latest posts.

The trick here will be finding the happy medium between those two variables. If you have the ‘number of comments’ variable set to low, you could get too many posts in your list that meet the criteria. But on the other hand, if you have the ‘showposts’ variable set too low then there may not be enough posts that end up hitting on the ‘number of comments’. A balance needs to be met here. If it was me, I would shoot to have approximately 3 to 5 posts show up in my list. Of course, since this is a dynamically created, the number of posts shown number can change at any given time.

Popular Articles

query('showposts=50');
while ($popular->have_posts()) : $popular->the_post();
    $total = get_comments_number();
    if ($total >= 10) { ?>
         Score:

Auto Popular List based on Comments & Del.icio.us Bookmarks

This example is exactly the same except for on the $total line I use my own WP-SocialCount plugin to pull in the amount of Del.ico.us bookmarks that the post has. I feel this gives us a more complete idea of whether or not a post is really “popular” — rather than solely relying on it’s number of comments.

Popular Articles

query('showposts=50');
while ($popular->have_posts()) : $popular->the_post();
    $total = (get_comments_number() +  wpsocialcount('delicious', 'count', get_permalink()));
    if ($total >= 10) { ?>
         Score:

Digg too…

If your posts regularly show up on Digg as well, then you can use the same plugin and replace the $total line (line 7) in the above example with this:

$total = (get_comments_number() +  wpsocialcount('delicious', 'count', get_permalink()) +  wpsocialcount('digg', 'diggs', get_permalink()));

Scoring Methods

The default scoring will be all that all ‘hits’ are of equal strength:
Total Score = Comments + Del.icio.us Bookmarks + Diggs

Alternatively, if you feel that a Digg or Bookmark is twice as important as a regular old comment, then you could change the $total line to reflect this.

$total = (get_comments_number() + 2*(wpsocialcount('delicious', 'count', get_permalink()) + wpsocialcount('digg', 'diggs', get_permalink())));

Creating a Simple Online Application using the Flickr API

Chris Cagle — Fri, 18 Jul 2008 04:00:40 +0000

Photo Credit: *dans

The Flickr API is one of the most widely used APIs out there. In this article I will show you how to build your own simple online application using PHP and the Flickr API.

The sample online application we build today will be one that takes a Flickr image URL (e.g. http://www.flickr.com/photos/dans180/854998249/), then outputs the code needed for you to properly display the photo’s credit. Remember, every time you use a Creative Commons licensed photo from Flickr, you need to provide the proper attribution and that is usually considered a link back to the photo while mentioning the photographer’s name. This is an example of the kind of output that we hope to get:

Real Link:
Photo Credit: *dans

HTML Code Output:

Photo Credit: *dans

Getting Started

First off, you will need to get an API key. Get one here and hold onto it for later.

Next, we need to build the form that our visitors can input the URL into. This should be pretty basic stuff for most of us.

The HTML Form


	
		
		Flickr Photo URL:

The PHP if-statement

This form is setup to POST the data back to itself for processing. To handle this, we need to make use of an if-statement to check to see if the form is submitting data back to itself, or if it just needs to show a blank form to a new visitor.

The PHP evaluation isset allows us to determine whether or not a variable is set. In our example, we check to see if the variable ‘photo‘ is set – because that is the name of the input field where the visitor enters the Flickr image’s URL.

If the variable ‘photo‘ is set, the next step is to initialize some variables. The first variable is the image URL that the user submitted into our form, while the second will be the API key we got from Flickr.

In order to make the URL submitted usable to us, we need to split it up into its relevant sections. I use the PHP function explode to help break the URL up by the character ‘/’. All we need from this URL is the photo id, and we can see below is the 6th of these so called sections.

PHP FACT: PHP starts it’s count with 0.

Structuring the Flickr API

After turning the contents of the photo id section into it’s own variable, we now have everything we need to start the API call.

After searching the Flickr site a while, I found the flickr.photos.getInfo method – and judging by the example it displays, it looks to be exactly what we want. Notice we already have both of the required variables to make this call: $photo_id and $api_key.

Next, we need to find out what the correct call syntax that Flickr requires in order to get data back from their API. Luckily, they are nice enough to give us an example PHP call here. This test gives us the insight needed as to what an API call should be structured like:

http://www.flickr.com/services/rest/?method=flickr.test.echo&format=php_serial&api_key=eaab5c513e33c01544385641ff9af42f

After we modify their example to use the method flickr.photos.getInfo, we also need insert a new argument for the photo_id. Our newly structured API call now looks like this: (changes are in red)

http://www.flickr.com/services/rest/?method=flickr.photos.getInfo&format=php_serial&photo_id=$photo_id&api_key=$flickr_api_key

You can test the validity of our newly structured call by pasting it into any web browser’s address bar. You will get back real data if it works, or errors when it fails.

Using the Data from the Flickr API

Once we get a working API call, we need to have our application read in the data that is returned. To import this data into our web app, we use the function file_get_contents, then re-format it using the unserialize function.

Since all good coders do error checking, we also need to run a quick check to see if the API call returned no data (an error). We can do so with this simple line:

$status = $flickroutput['stat']; //Extracts the 'stat' value from the data returned

Now, with a second if-statement, we check to see the variable $status‘s value, and if it doesn’t contain the word ‘fail‘ then we know we made a successful call. Putting it all together, it looks like this:

try again."; //A bad URL was entered into the form
	};

} else { //The form was not submitted

};
?>

Once we know we’ve made a successful API call, we need to extract the ‘username‘ of the photo’s owner. We do this with this line:

$flickr_user  = $flickroutput['photo']['owner']['username'];

… but this is sometimes not an easy thing to figure out. I have found the best way to find out what to extract is by analyzing the unserialized data we get back from Flickr. PHP allows us to look at the data in an easier to read format by using print_r.

print_r ($flickroutput)

This is probably the hardest part of using the API. If you insert the print_r command into your PHP document right after we unserialize the Flickr data, we can easily see the different levels of the data structure.

Hint: You can view the output of our print_r command here. The different tiers are highlighted in red.

The way our data extract works is ‘photo’ is the first level within the $flickroutput data. The next tier down is ‘owner’, which houses the last level called ‘username’ which holds the data we need. That’s how we get $flickroutput['photo']['owner']['username'] — each [] is referencing it’s own tier.

Output the Data to the Visitor

Once we have the $flickr_user variable set with this extract, we are ready to output our finished code. We will output it twice: One as an example “live” link, and the other will be the raw HTML code that the visitor can input into his or her site.



	Preview: 
	Photo Credit: 
	HTML Code:
			<cite>
			Photo Credit: <a href="" title="Photo Credit: "></a>
		</cite>
	

	try again."; //A bad URL was entered into the form
	};

} else { //The form was not submitted

};
?>

Putting it all Together

Now that we have the form and the PHP sections completed, we need to put it all together into an application page. You can download the example page here, or you can take a look at the working example I’ve put up.

CSS Tip: Easy Cross Browser & Valid CSS Text Shadows

Chris Cagle — Sun, 22 Jun 2008 13:42:49 +0000

Photo Credit: Glockenblume

Although I am certain that I am not the only one doing this, I have developed an extremely easy way to get CSS text shadows without the need to use the wildly unsupported CSS property of text-shadow.

Lorem ipsum dolor sit amet consectetuer

The only problem that some people may see with this example is “duplicate content” because the title is shown twice in the HTML. I’ve decided that sometimes when all you need is a simple text drop shadow, this is an acceptable problem. This technique is extremely easy, and I have used it on a couple sites of mine thus far with no cross-browser issues.

The Code (HTML)


	Lorem ipsum dolor sit amet consectetuer
	Lorem ipsum dolor sit amet consectetuer

The Code (CSS)

.post_title {
position:relative;
font-family:arial;
}

.post_title h1 {
position:absolute;
top:2px;
left:2px;
font-size:30px;
color:#C9D8E9;
padding:0;
margin:0;
}

.post_title h6 {
position:absolute;
top:0;
left:0;
font-size:30px;
color:#4471A2;
padding:0;
margin:0;
}