jfh-main-profile-json [Jcink.com Wiki]

JFH: Main Profile JSON Variables

HTML Templates allow use of variables for your convenience to restructure the board layout. The main profile HTML template contains some variables that utilize JSON, or JavaScript Object Notation that allow you to build your own layout around the items. Examples and scripts will be provided below for each JSON variable.

Currently, only some of the portal profile elements are available as variables. See the availability chart below. We're working to add more profile elements as variables, so please check back.

Profile Element Available?
Recent Visitors Yes
Comments Yes
Topics No
Posts No
Friends No
Settings No

Understanding JSON

To utilize these templates, we have provided copy and paste examples for you to help you to edit and make into your own template. However, to fully customize these you must have a basic understanding of how JSON works.

Let's start off with a very basic JSON array based on the comment example.

var comment = [{"comment_id":"745","avatar":"<img src='http:\/\/support.b1.jcink.com\/uploads\/support\/\/av-1.png' border='0' width='25' height='25' alt='' \/>","name":"<a href='?showuser=1'>John<\/a>","date":"10 minutes ago","message":"One more test comment.... ","options":"[  <a href=\"index.php?showuser=11446&ctab=3&deletecomment=745&auth_key=x\">Delete<\/a> ]"},{"comment_id":"744","avatar":"<img src='http:\/\/support.b1.jcink.com\/uploads\/support\/\/av-1.png' border='0' width='25' height='25' alt='' \/>","name":"<a href='?showuser=1'>John<\/a>","date":"11 minutes ago","message":"Another comment&#33; ","options":"[  <a href=\"index.php?showuser=11446&ctab=3&deletecomment=744&auth_key=x\">Delete<\/a> ]"},{"comment_id":"743","avatar":"<img src='http:\/\/support.b1.jcink.com\/uploads\/support\/\/av-1.png' border='0' width='25' height='25' alt='' \/>","name":"<a href='?showuser=1'>John<\/a>","date":"11 minutes ago","message":"Hello&#33; Testing comment&#33; ","options":"[  <a href=\"index.php?showuser=11446&ctab=3&deletecomment=743&auth_key=x\">Delete<\/a> ]"}];

Looks pretty crazy, doesn't it? It's easier to work with than you think. To start, there are 3 comments contained in this JSON array, which has been set to the variable “comment.” Each comment is between {} and separated by commas. This type of string is automatically generated by the system for you, so you're not going to have to worry about creating it yourself. But you do need to understand how to access the data within it.

In the above string, each comment has these attributes: comment_id, avatar, name, message, and options.

To access this information we can use something called a for loop:

<script>
var comment = <!-- |comments| -->;
for (var i = 0; i < comment.length; i++){
	document.write(comment[i].name + ": ");
        document.write(comment[i].message + "<br />");
}
</script>

The above script loops through each available comment, and prints the name and message attributes. If you wanted to print the date, you could modify the script like so:

<script>
var comment = <!-- |comments| -->;
for (var i = 0; i < comment.length; i++){
	document.write(comment[i].name + ": ");
        document.write(comment[i].message + "<br />");
        document.write(comment[i].date + "<br />");
}
</script>

Accessing a key in the JSON array is simply done by doing “dot” and then the name of the key you're trying to print. In this case, we printed the name, message, and date keys.

This is the basic idea behind the use of JSON. For an in-depth tutorial on JSON we recommend the W3schools JSON Intro: http://www.w3schools.com/js/js_json_intro.asp

Comments

The variable for the most recent comments made on the profile is <!– |comments| –>, and the output when parsed by the code below looks like this:

Recent Comments)

The complete code to display the above is provided here, and also integrates the comment_form, copy and paste it into the Main Profile template:

<style>
.largeframe,.smallframe{text-align: center;padding:4px;margin-top:auto;margin-bottom:auto;width: 52px;height: 52px;background: transparent;float:right;}
.smallframe{width:27px;height:27px;margin-top: auto;margin-bottom: auto;float:right;}
#comment-message { width: 180px; } 
</style>

<div id="profile-comments" class="tableborder" style="padding:1px; max-width: 200px;">
	<table width="100%" cellspacing="1" cellpadding="6">
	<tbody><tr><td class="maintitle" valign="top">Recent Comments</td></tr></tbody>
	</table>
	<script>
	function print_comment(row){
	document.write('<div class="row2"><div class="pformstrip"></div>');
	document.write('<div class="smallframe">'+row.avatar+'</div>');
	document.write('<strong>'+row.name+'</strong><br>');
	document.write('<div class="desc">'+row.message+' '+row.options+'<br>');
	document.write('<strong>'+row.date+'</strong>');
	document.write('</div></div>');
	}

	var comment = <!-- |comments| -->;
	for (var i = 0; i < comment.length; i++){
		print_comment(comment[i]);
	}
	</script>
	<div class="row2"><!-- |comment_form| --></td></div>
</div>

Visitors

The variable for the most recent visitors on the profile is <!– |visitors| –>, and the output when parsed by the code below looks like this:

Recent Visitors)

The complete code to display the above is provided here copy and paste it into the Main Profile template:

<style>
.largeframe,.smallframe{text-align: center;padding:4px;margin-top:auto;margin-bottom:auto;width: 52px;height: 52px;background: transparent;float:right;}
</style>

<div id="profile-lastvisitors" class="tableborder" style="padding:1px; max-width: 200px;"><table cellspacing="1" cellpadding="6" width="100%"><tbody><tr><td class="maintitle" valign="top">Last Visitors</td></tr></tbody></table><!-- Visit 1 --> 

	<script>
	function print_visitor(row){
	
	document.write('<div class="row2">');
	document.write('<div class="largeframe">');
	document.write(row.visitor_avatar+'</div>');
	document.write('<div style="position:absolute;z-index:2;">');
	document.write('<strong><a href="?showuser='+row.visitor_id+'">'+row.visitor_name+'</a></strong></div>');
	document.write('<br>');
	document.write('<br>');
	document.write('<div class="desc">'+row.visitor_date+'</div>');
	document.write('<br>');
	document.write('<br>');
	document.write('</div>');
	
	}

	var visitor = <!-- |visitors| -->;
	for (var i = 0; i < visitor.length; i++){
		print_visitor(visitor[i]);
	}
	</script>
</div>

Please note that if you were using this variable previously, spelling errors were corrected in the variable names.

 
jfh-main-profile-json.txt · Last modified: 2019/02/10 14:07 by jcink