Mini Profile custom fields issue

Mad Madison
New Member

RAWR! SAID THE MADOSARUS REX

Posts: 42

Mini Profile custom fields issue Mar 10, 2018 21:14:18 GMT -8

Quote

Post by Mad Madison on Mar 10, 2018 21:14:18 GMT -8

forum

I've been trying to get the icons to look like this... but tend to end up with a mess as seen here, with many fields simply repeating themselves.

Maybe fresh eyes could help me spot where I'm messing up the code. I have a feeling my issue is inside <div class="mp-box">, since before adding this section everything else worked fine.

I've tried looking for a guide to using the custom profile fields in the proboards support forums, but I just couldn't seem to find any. If anyone knows of guides that might help build mini-profiles from scratch I'd love to read it.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="$[miniprofile_class]" style="padding:0px;border-radius:0;border:0;">
		<div class="w-group">
			{if $[user.group]} $[user.group.name] {elseif $[user.rank]}<br>
			$[user.rank.name] {/if} {if $[user.is_guest]}Guest{/if}
		</div>{if $[user.avatar]}
		<div class="avatar">
			$[user.avatar]
		</div>{/if}
		<div class="w-custom">
			{if $[user.custom_title]}$[user.custom_title]{/if}
		</div>
		<div class="w-name">
			$[user]
		</div>
		<div class="mp-box">
            {foreach $[user.mini_custom_field]}
            {if $[user.mini_custom_field.name] == "Character Profile"}
        		<a href="$[user.mini_custom_field.value]" title="profile"><i class="fas fa-user"></i></a>
            {else}
            <i class="fas fa-user"  title="profile"></i>
    		{/if}
            {/foreach}
            
            {foreach $[user.mini_custom_field]}
            {if $[user.mini_custom_field.name] == "Plotter"}
        		<a href="$[user.mini_custom_field.value]" title="plotter"><i class="fas fa-users"></i></a>
            {else}
            <i class="fas fa-users"  title="plotter"></i>
			{/if}
			{/foreach}
            
            {foreach $[user.mini_custom_field]}
            {if $[user.mini_custom_field.name] == "Thread Tracker"}
        		<a href="$[user.mini_custom_field.value]" title="tracker"><i class="fas fa-list-ul"></i></a>
            {else}
            <i class="fas fa-list-ul" title="tracker"></i>
			{/if}
            {/foreach}

			{if $[user.is_online]}<span style="float: right;font: bold small-caps normal 9px Verdana,sans-serif;line-height: 15px;">online</span>{else}<span style="float: right;font: bold small-caps normal 9px Verdana,sans-serif;line-height: 15px;color:#ccc;">offline</span>{/if}
		</div>
		<div class="w-stats">
			{foreach $[user.mini_custom_field]}
            {if $[user.mini_custom_field.name] == "Played by"}
			<div class="mc-field">
				$[user.mini_custom_field.name]:
			</div>
			<div class="mc-value">
				$[user.mini_custom_field.value]
			</div>
            {/if}
            {/foreach}
            
            {foreach $[user.mini_custom_field]}
            {if $[user.mini_custom_field.name] == "Class"}
			<div class="mc-field">
				$[user.mini_custom_field.name]:
			</div>
			<div class="mc-value">
				$[user.mini_custom_field.value]
			</div>
            {/if}
            {/foreach}
            
            {foreach $[user.mini_custom_field]}
            {if $[user.mini_custom_field.name] == "Race"}
			<div class="mc-field">
				$[user.mini_custom_field.name]:
			</div>
			<div class="mc-value">
				$[user.mini_custom_field.value]
			</div>
            {/if}
            {/foreach}
            
            {if $[user.gender]}
			<div class="mc-field">
				gender:
			</div>
			<div class="mc-value">
				$[user.gender.text]
			</div>
            {/if}
            
            {foreach $[user.mini_custom_field]}
            {if $[user.mini_custom_field.name] == "Occupation"}
			<div class="mc-field">
				$[user.mini_custom_field.name]:
			</div>
			<div class="mc-value">
				$[user.mini_custom_field.value]
			</div>
            {/if}
            {/foreach}
		</div>
	</div>
</body>
</html>

Last Edit: Mar 13, 2018 3:54:00 GMT -8 by Mad Madison

Mad Madison
New Member

RAWR! SAID THE MADOSARUS REX

Posts: 42

Mini Profile custom fields issue Mar 13, 2018 13:49:47 GMT -8

Quote

Post by Mad Madison on Mar 13, 2018 13:49:47 GMT -8

Now I'm thinking it might be something with the else values I might be doing wrong, since the others are working just fine.

I'm having difficulty finding what language this is as well. Maybe that way I could find a guide to properly open and close these statements. I've found something, and for a second I thought it was PHP, but then this smarty guide confused me.

Last Edit: Mar 13, 2018 14:12:22 GMT -8 by Mad Madison

Brian
Support Helper

Posts: 48,130

Mini Profile custom fields issue Mar 13, 2018 14:10:46 GMT -8 Mad Madison likes this

Quote

Post by Brian on Mar 13, 2018 14:10:46 GMT -8

Not sure why you've got DOCTYPE, <html>, <head>, <title>, and <body> tags in the mini-profile template.

Those serve absolutely no function outside of the Forum Wrapper template where they indicate the beginning and end of the document. Every other layout template is a piece that gets inserted into the $[content] variable of the Forum Wrapper template, so those tags only belong in the Forum Wrapper.

Anyways... Your custom fields are repeating because of the {else} you've included. Whenever you specify {foreach $[user.mini_custom_field]} you're telling the page to output the HTML you specified within the statement for each of the user's custom fields that they've filled out.

So when you add an if statement in the loop telling it to do this:

{if $[user.mini_custom_field.name] == "Character Profile"} <a href="$[user.mini_custom_field.value]" title="profile"><i class="fas fa-user"></i></a>

It's going to output the HTML within the if statement when the loop reaches the custom field in the list with a name that matches the one you specified.

But when you tell it to do this afterwards:

{else} <i class="fas fa-user" title="profile"></i>

It's going to output that HTML instead when the custom field name in the current iteration of the loop does not match the one you specified in the if statement on the earlier line.

Since you have 7 custom fields filled out in your profile it's going through the foreach loop 7 times. It's outputting the HTML of your if statement when it reaches the Character Profile field, but for the other 6 fields it's failing that if statement and moving on to the {else}.

When read literally, the loop below says this:

- For each custom field filled out and visible in the mini-profile...
- Output this linked icon if the custom field name is "Character Profile"
- ...Or else output just this icon

{foreach $[user.mini_custom_field]} {if $[user.mini_custom_field.name] == "Character Profile"} <a href="$[user.mini_custom_field.value]" title="profile"><i class="fas fa-user"></i></a> {else} <i class="fas fa-user" title="profile"></i> {/if} {/foreach}

So if you just remove the {else} and the line after it in each of the affected custom field loops the problem should go away.

Last Edit: Mar 13, 2018 14:12:28 GMT -8 by Brian

Help improve the Plugin Library!

Mad Madison
New Member

RAWR! SAID THE MADOSARUS REX

Posts: 42

Mini Profile custom fields issue Mar 13, 2018 14:25:29 GMT -8

Quote

Post by Mad Madison on Mar 13, 2018 14:25:29 GMT -8

Brian Ah! I had just edited the above trying to look for a guide to help me out. Do you happen to know what language this is? Is this a specific language for proboards? Is there a guide on proper ways to use these tags anywhere I might have missed?

Oh man, I had forgotten to remove the body tags after I had used a cleaner to spruce up the code. ><
Thanks for letting me know that mess was still there. XD

Removing the else did fix the repeating issues. I think I understood the explanation above. Especially after the reading literally part, that made it a lot clearer. Thank you.

What I was trying to do with the {else} was:

If the custom field above is not filled out, use the blank icon instead.

Though I guess this works as well. I'll just need to add height to the box these icons are in so it remains the same height with or without them there.

I really appreciate the help Brian. You're a lifesaver.
Still, if you know of any guides that might help me write these up nice and clean you'd be teaching me how to fish. ;3
Thank you again!

Last Edit: Mar 13, 2018 14:25:59 GMT -8 by Mad Madison

Brian
Support Helper

Posts: 48,130

Mini Profile custom fields issue Mar 13, 2018 14:36:50 GMT -8 Mad Madison likes this

Quote

Post by Brian on Mar 13, 2018 14:36:50 GMT -8

Mar 13, 2018 14:25:29 GMT -8 Mad Madison said:

Do you happen to know what language this is? Is this a specific language for proboards?

HTML is used everywhere on the web, but the if statements and foreach loops used in the layout templates are exclusive to ProBoards.

Mar 13, 2018 14:25:29 GMT -8 Mad Madison said:

Is there a guide on proper ways to use these tags anywhere I might have missed?

Oh yeah. You can usually search for "html (tag name here)" online and most of the results will be for documentation explaining what each HTML tag does.

www.w3schools.com/tags/tag_doctype.asp
www.w3schools.com/tags/tag_html.asp
www.w3schools.com/tags/tag_head.asp
www.w3schools.com/tags/tag_title.asp
www.w3schools.com/tags/tag_body.asp

Mar 13, 2018 14:25:29 GMT -8 Mad Madison said:

What I was trying to do with the {else} was:

If the custom field above is not filled out, use the blank icon instead.

There's unfortunately no way to output different HTML based on a custom field not being filled out through the layout templates. If a custom field isn't filled out it's left out of the foreach loop completely. The best you'd be able to do is use Javascript after the page has loaded so that you can tell the browser fill in the missing HTML.

Help improve the Plugin Library!

Mad Madison
New Member

RAWR! SAID THE MADOSARUS REX

Posts: 42

Mini Profile custom fields issue Mar 13, 2018 14:39:58 GMT -8

Quote

Post by Mad Madison on Mar 13, 2018 14:39:58 GMT -8

Brian
Hahah thanks again Brian. I do know html, it's the proboards exclusive ones I'm having problems with. XD

Are there any guides for those?

The only thing I've found that is vaguely similar is smarty, but obviously, it's not the proboards exclusive language.

Last Edit: Mar 13, 2018 15:08:48 GMT -8 by Mad Madison

Brian
Support Helper

Posts: 48,130

Mini Profile custom fields issue Mar 13, 2018 15:22:51 GMT -8 Mad Madison likes this

Quote

Post by Brian on Mar 13, 2018 15:22:51 GMT -8

There's unfortunately no documentation on how these work, but they pretty much work the same as in most web languages and share the same operators.

{if} / {/if}

HTML within an if statement only renders on the page if the if statement validates as true.

{if $[current_user.is_staff]} You're a member of a group that's considered forum staff! This if statement rendered as true because the staff variable outputs the value "1" (true). If you weren't staff it would output "0" (false), failing the if statement. {/if} {if $[current_user.gender.text] == "Male"} Hey, dude! This if statement rendered as true because your gender text is Male. (==) {/if} {if $[current_user.id] != 1} Hey... you're not the main admin! This if statement rendered as true because your user ID is not 1. (!=) {/if} {if !$[current_user.group]} You're not in a group! This if statement rendered as true because the variable either didn't return a true value or didn't return any value. (!$[variable]) {/if} {if $[user.is_staff] && $[user.is_online]} This person is a staff member! AND (&&) they're online! This if statement rendered as true because both variables returned "1" (true). {/if} {if $[user.is_banned] || $[user.is_deleted]} This is a banned user OR (||) a deleted user. This if statement rendered as true because one of the variables returned "1" (true). {/if}

{elseif}

An elseif statement gives an if statement another condition to check against if the first statement rendered as false and renders its own HTML if that condition is met.

{if $[current_user.is_staff]} Greetings, your highness. {elseif $[current_user.is_member]} Good morrow to thee, fellow citizen! {/if}

{else}

An else statement gives an if statement a final set of HTML to render if none of the previous conditions were met.

{if $[current_user.is_staff]} Greetings, your highness. {elseif $[current_user.is_member]} Good morrow to thee, fellow citizen! {else} Hail, traveler! Is this your first time in our kingdom? {/if}

{foreach} / {/foreach}

A foreach loop can go through certain variables and output HTML based on the various properties within that variable. You can determine which variables can be looped through based on whether or not they contain an index property when expanded in the Loops and Variables tree to the right of the template you're editing.

The following is a numerical list of each of our forum's categories: <br><br> {foreach $[category]} <div>$[category.iteration]. $[category.name]</div> {/foreach}

Last Edit: Mar 13, 2018 15:29:53 GMT -8 by Brian

Help improve the Plugin Library!

Mad Madison
New Member

RAWR! SAID THE MADOSARUS REX

Posts: 42

Mini Profile custom fields issue Mar 13, 2018 15:28:13 GMT -8

Quote

Post by Mad Madison on Mar 13, 2018 15:28:13 GMT -8

Brian Once again you are a life-saver. I'll be saving this for future refrence. I think it would be helpful for others as well. Maybe having a thread with this or something like it to guide those newcomers in the right direction would work wonders.

Once again, I really appreciate the time Brian. Have a great one!

Last Edit: Mar 13, 2018 15:28:41 GMT -8 by Mad Madison