Second draft - JavaScript Library for Behance Integration

This post is more than 2 years old.

Yesterday I blogged an example of using the Behance API via JavaScript. In the first draft of my demo I built in basic support to get projects for a user. While this worked fine, it put the onus of displaying those projects on the coder, and for folks who may not be good with JavaScript, I wanted to provide a simpler solution.

With that in mind, I've added a new method to the API: renderProjects. Given a username, a place to put crap, and a template div (more on that in a second), it will handle fetching and rendering the projects for you. Here is an example of the front end HTML:

<!doctype html>
<html lang="en">
	<head>
	<style>
		.project {
			background-color: rgba(7, 219, 64, 0.72);
			width: 280px;
			float: left;
			margin: 0px 10px 10px 10px;
		}
	</style>
	</head>
	
	<body>
		
		<h1>My Projects</h1>
		<div id="projects">
		
		</div>
		
		<script src="jquery-2.0.0.min.js"></script>
		<script src="behance_api.js"></script>
		<script src="demo2.js"></script>
		
		<script id="projectTemplate" type="text/x-behance-template">
		<div class="project">
		<h2><a href="{{url}}">{{name}}</a></h2>
		<i>Created: {{created}}</i><br/>
		<i>Fields: {{fields}}</i><br/>
		<i>Stats: Appreciations={{appreciations}}, Comments={{comments}}, Views={{views}}</i><br/>
		<img src="{{covers_230}}">
		</div>
		</script>

	</body>
</html>

For the most part this is the same as yesterday's code, but notice the new script block at the bottom. You are allowed to build script blocks that contain stuff besides JavaScript. Handlebars.js makes use of this as well. The code within this block will not be displayed to the end user but can be picked up by JavaScript.

Inside the block I've put my considerable design skills to use to create a basic template for my projects. The values inside the squiggly brackets represent tokens that the JavaScript code will replace. The JavaScript for this template is much simpler now that the rendering is being done at the library level.

/* global $,console,document,behanceAPI */
var behancekey = "vNvOiZI0cD9yfx0z4es9Ix6r4L2J7KdI";

$(document).ready(function() {
	
	//Set my key
	behanceAPI.setKey(behancekey);
	
	//Now get my projects
	behanceAPI.renderProjects("gwilson", "projects", "projectTemplate");

});

Now let's look at the library.

/* global console,$ */
var behanceAPI = function() {
	var key;
	var baseURL = "http://www.behance.net/v2/";
	
	function _toDateStr(d) {
		return new Date(d*1000).toString();	
	}
	
	function _renderTemplate(p, template) {
		var result = template;
		//console.dir(p);
		result = result.replace(/{{name}}/gi, p.name);
		result = result.replace(/{{url}}/gi, p.url);
		if(p.covers[115]) result = result.replace(/{{covers_115}}/gi, p.covers[115]);
		if(p.covers[202]) result = result.replace(/{{covers_202}}/gi, p.covers[202]);
		if(p.covers[230]) result = result.replace(/{{covers_230}}/gi, p.covers[230]);
		if(p.covers[404]) result = result.replace(/{{covers_404}}/gi, p.covers[404]);
		
		var created = _toDateStr(p.created_on);
		result = result.replace(/{{created}}/gi, created);

		var modified = _toDateStr(p.modified_on);
		result = result.replace(/{{modified}}/gi, modified);

		result = result.replace(/{{fields}}/gi, p.fields.join(", "));

		result = result.replace(/{{appreciations}}/gi, p.stats.appreciations);
		result = result.replace(/{{comments}}/gi, p.stats.comments);
		result = result.replace(/{{views}}/gi, p.stats.views);
		
		return result;
	}
	
	function setKey(k) {
		key = k;	
	}
	
	function getProjects(user, cb) {
		var url = baseURL + "users/" + user + "/projects?api_key=" + key + "&callback=";
		$.get(url, {}, function(res, code) {
			cb(res.projects);
		}, "JSONP");
	}
	
	function renderProjects(user, displayId, templateId) {
		var templateOb = $("#" + templateId);
		var renderDom = $("#" + displayId);
		
		if(templateOb.length === 0 || renderDom.length === 0) {
			//Throw an error?
			return;
		}

		var template = $.trim(templateOb.html());
		getProjects(user, function(p) {
			var s = "";
			for(var i=0; i<p.length; i++) {
				s += _renderTemplate(p[i], template);	
			}
			renderDom.html(s);
		});
	}
	
	return {
		setKey: setKey,
		getProjects: getProjects,
		renderProjects: renderProjects
	};
	
}();

For the most part I assume this is self-explanatory. You can see my code pick up the DOM item for the template and grab out the HTML. That HTML, plus a project, is sent to _renderTemplate where the real work is done. I do a bit of manipulation where I can to help out, like on dates and the field list.

So to be clear, this is not as powerful of a solution as Handlebars, but as my library would still let you use it if you wanted to, I thought this was a nice simple way for users to quickly handle the layout. Here is a screenshot.

Anyway, this was fun, but I'll probably stop working on this unless I get bored, or unless someone asks me to continue. There is already a public JavaScript library for Behance (but not with my cool function), so unless there is interest, I'll just leave this for now as a fun experiment.

Download attached file.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Marc Lucraft posted on 3/27/2014 at 1:19 PM

Hi Raymond,

Your entries on Behance integration have been great, and seem to be the ONLY solution for this I can find anywhere! Thank you.

I wonder if you could elaborate further on this, or point me in the right direction (I don't mind attempting this myself, even though my coding knowledge is small!)

I am keen to get just images from behance, and place them into a purecss.io grid, I assume this would be possible by using a similar method to your "projectTemplate" above.

The problem; each image needs to be in a div and every 3 of these would need to be contained in a div, like so:

<div class="pure-g-r">
<div class="pure-u-1-3"> BEHANCE IMAGE HERE </div>
<div class="pure-u-1-3"> BEHANCE IMAGE HERE </div>
<div class="pure-u-1-3"> BEHANCE IMAGE HERE </div>
</div>
<div class="pure-g-r">
<div class="pure-u-1-3"> BEHANCE IMAGE HERE </div>
<div class="pure-u-1-3"> BEHANCE IMAGE HERE </div>
<div class="pure-u-1-3"> BEHANCE IMAGE HERE </div>
</div>

One again, thank you and I'm sorry for the long comment!

Marc.

Comment 2 by Raymond Camden posted on 3/27/2014 at 4:10 PM

Yeah it's possible. I'll try to write it up later today.

Comment 3 by Raymond Camden posted on 3/27/2014 at 6:21 PM

Here it is - but note - I just log it out. You want to do something like $("something").html(result) instead.

https://gist.github.com/cfj...

Comment 4 by Marc Lucraft posted on 3/27/2014 at 6:36 PM

Raymond, you are a genius... Thanks.

I will let you know when I get the chance to implement it, and of course give you all the credit!!!!

:)

Comment 5 by Raymond Camden posted on 3/27/2014 at 6:41 PM

If you can, post the URL so we can see.

Comment 6 by Marc Lucraft posted on 3/27/2014 at 7:14 PM

Hmmmm, I guess it will be a while as I'm getting this page when trying to auth...

{"http_code":404,"messages":[{"type":"error","message":"Page not found"}]}

Comment 7 by Marc Lucrraft posted on 3/28/2014 at 2:50 PM

Hi Raymond,

Turns out it's not as easy as I first thought, and is above my knowledge!

Sorry to have wasted your time, but thanks for your help!

Marc

Comment 8 by Marc Lucraft posted on 3/28/2014 at 8:58 PM

Hi Raymond,

I must have been doing something wrong, I have combined this, with code from another source and got the desired result.

Working example here: http://marclucraft.github.io

Thanks a million!

Comment 9 by Raymond Camden posted on 3/29/2014 at 6:02 PM

Cool. Love to see creatives turn my ugly crap into something beautiful.

Comment 10 by Gustavo Denis posted on 4/10/2014 at 5:07 AM

Hi Raymond!
I integrated your script on my web page > www.gustavodenis.com
Everything works perfect. Thanks a lot!!!

When I tried to add the description field like the others I get "undefined" as result. Could you help me with this one? Am i missing something?

-gus.

Comment 11 by Raymond Camden posted on 4/10/2014 at 5:16 AM

Hmm - I'm not seeing description returned in the api. I checked the API (https://www.behance.net/dev... and don't see it there either.

Comment 12 by Gustavo Denis posted on 4/10/2014 at 7:46 PM

The field is listed after "stats" and before "modules", a little hidden.
https://www.behance.net/dev...

Comment 13 by Raymond Camden posted on 4/10/2014 at 7:53 PM

Ohhh - that is in the call for a specific project. It isn't returned when you ask for ALL the projects. So in theory I could add another XHR hit to get that, but that will slow it down a bit. Let me chew on this a bit.

Comment 14 by Raymond Camden posted on 4/10/2014 at 8:00 PM

So - afaik - we can't get the description in ONE call. It would be trivial for me to add a getProject API to my JS library, but you would need to modify my 'gallery' demo if you want to include it in the list.

Comment 15 by Gustavo Denis posted on 4/10/2014 at 8:08 PM

jaja, ok! my mistake. Thanks a lot man.

Comment 16 by Raymond Camden posted on 4/10/2014 at 8:13 PM

If you want me to add the JS for getProject, I will. It is trivial. Just being lazy now and not adding it unless you ask. ;)

Comment 17 by Gustavo Denis posted on 4/10/2014 at 8:47 PM

It would be great just for trying but I'm concerned about the load time.

Comment 18 by Raymond Camden posted on 4/10/2014 at 10:12 PM

Well if you used that call when a user selected a project, then the network request would be delayed until then. Screw it - I'll add it to the API now.

Comment 19 by Raymond Camden posted on 4/10/2014 at 10:29 PM

Ok got it - will blog it as a new blog entry a bit later today.

Comment 20 by Raymond Camden posted on 4/11/2014 at 4:13 PM
Comment 21 by Sandhi Firmadani posted on 4/22/2015 at 3:31 PM

Hi Raymond,

Thanks for this great tutorial, I've succeed implement your tutorial in my website. But you inspire me to work on this Behance API in PHP, and for those who interested implementing it in PHP or Drupal module, I have shared the tutorial at my blog http://www.firmadani.com/tu...

Thanks a bunch.