Update 1/22/08 : This tutorial has been improved with features from our newest release. All edits and improvements are highlighted below. If you have created scripts using the old version of this page all your code should still work.

Personalize your profile photos with ImageChef

by Chris

Member photos ("avatars," in web-speak) breathe life into your site and transform simple profiles into colorful representations of the people who make up your community. We're working with ImageChef to access their great tools for creating custom, personalized images and merge them into your KickApps-powered community.

With this tutorial, we’re going to place an ImageChef hyperlink on your member registration page so a new user can open a new window, create a custom ImageChef image, and then upload the image as their profile photo within your community.

To integrate the link into your site, simply:

  1. Log in to the Affiliate Center.
  2. Browse to edit your custom header and footer.
  3. Paste this JavaScript code into the <head></head> section of your Global Page Template (under Configure > Pages). We've commented the code so you can hack on it if you're feeling confident:
<script language="javascript">
function addImageChef(){
      // This is your link text
      var icMessage = '<br/> Need a photo? ';
      icMessage += '<a href="http://www.imagechef.com/ic/product.jsp?pid=kickapps&callbackUrl=';
      icMessage += self.location.href;
      icMessage += '&siteName=';
      // On the next line, replace KickApps with your community name
      icMessage += 'KickApps';
      icMessage += '" target="_blank">Browse and customize images with your name ';
      icMessage += 'at ImageChef</a>. Once you\'ve created your image, return ';
      icMessage += 'here to upload it.';

    // This is an array of pages that are affected
    var icPageIds = 
        [['login/registerUser.jsp','ka_contentContainer'],['pages/newPhotoUpload.jsp','ka_fieldPhotoUpReq']];
    // First, see if this page is one of the affected pages
    for (var i=0; i<icPageIds.length; i++){
      	if (Ka.Info.PAGE == icPageIds[i][0]){
            	// If it is, let's find the first .ka_Help div, which will hold the link text
            	var nodes = $(icPageIds[i][1]).getElementsByTagName('div');
           	for (var i = 0;i < nodes.length;i++){
              	if (nodes[i].className=='ka_Help'){
               		nodes[i].innerHTML += icMessage;
                 	    break;
                  }
              }
          }
    }
}
//queue up the function to be ran when the DOM is ready
Ka.addDOMLoadEvent(addImageChef);
</script>
 

*Note that we're using $ here as a shortcut to document.getElementById

Once the code is in place, a handy link will appear on your member registration and personal profile upload forms, opening a new window with a bunch of ImageChef images to browse and customize. When your members have created and downloaded their image, they simply return to your community and upload it.

You should see more members showing up in your community with creative profile images, more conversations, and a friendlier atmosphere. Speaking of which, if you have a KickApps community and haven't uploaded your own profile photo, stop right now and upload one!

We're continuing to work with ImageChef to streamline this process and add links back to your site from theirs, so the whole experience is even more seamless for your users. Right now we don't support animated profile images, so your members will have to choose "static" images for their profiles. Keep an eye on KickDeveloper for any updates we release to this functionality.

Should we integrate ImageChef more deeply into the KickApps experience? Let us know on the KickDeveloper message boards – we're listening!

Did you enjoy this tutorial? Have questions, comments, or want to submit one of your own? Contact us at support@kickapps.com.