Displaying Custom Profile Fields In Profile/Mini-Profile

[Crow Valkairi]

Forum URL: (private)


I am attempting to display information entered in custom profile fields on the profile page and on the mini-profile, and I need some help with the coding to do this.

Say I have a custom field titled "Health" that is set as a text field. I want to display this on the profile page in its own container. What bit of code do I use to display the title and then the content of that field?

This what is already in my profile page template code:

<tr class="$[user.custom_field.content_class]">
         <td> <span class="field"><b>$[user.custom_field.name]:</b></span> <span class="value">$[user.custom_field.value]<hr></span></td>
                                       </tr>

And this is helpful, as the information is displayed in its own container, but I would like to have separate containers for a few fields. So like A, B, and C in one container, and D, E, and F in a separate container.

I love coding but I just don't know enough about it yet lol

[Crow Valkairi]

Wait what? Why was this moved? Brian

[Brian]

Oct 26, 2017 8:38:40 GMT -8 Crow Valkairi said:

Wait what? Why was this moved? Brian

This is a coding question, and thus belongs in the coding boards as the Support Board is for technical support and not design help.

[Crow Valkairi]

Ohh. Woops!

Thank you! :D

[Crow Valkairi]

Bump!

Still need help with this, please.

Currently, I am using an if statement to show the fields if the user has put something in them in their edit profile. However, I am running into the issue of all the divs showing when only one or two fields have been used... Here's the coding for the mini profile in the hopes that it will help.

{if $[user.mini_custom_field]}
    <div class="info">
               {foreach $[user.mini_custom_field]}
                {if $[user.mini_custom_field.name] == "Age"}
                <span class="field">$[user.mini_custom_field.name]:</span>
                <span class="value">$[user.mini_custom_field.value] yr(s)</span>
               {/if}
               {/foreach}
               {foreach $[user.mini_custom_field]}
                {if $[user.mini_custom_field.name] == "Gender"}
                <span class="field">$[user.mini_custom_field.name]:</span>
                <span class="value">$[user.mini_custom_field.value]</span>
                {/if}
               {/foreach}
  </div>
    <div class="info">
    {foreach $[user.mini_custom_field]}
                {if $[user.mini_custom_field.name] == "Height"}
                <span class="field">$[user.mini_custom_field.name]:</span>
                <span class="value">$[user.mini_custom_field.value] in</span>
                {/if}
               {/foreach}
               {foreach $[user.mini_custom_field]}
                {if $[user.mini_custom_field.name] == "Weight"}
                <span class="field">$[user.mini_custom_field.name]:</span>
                <span class="value">$[user.mini_custom_field.value] lbs</span>
                {/if}
               {/foreach}
    </div>
    <div class="info">
               {foreach $[user.mini_custom_field]}
                {if $[user.mini_custom_field.name] == "Health"}
                <span class="field">$[user.mini_custom_field.name]:</span>
                <span class="value">$[user.mini_custom_field.value]</span>
                {/if}
               {/foreach}
               {foreach $[user.mini_custom_field]}
                {if $[user.mini_custom_field.name] == "Strength"}
                <span class="field">$[user.mini_custom_field.name]:</span>
                <span class="value">$[user.mini_custom_field.value]</span>
                {/if}
                {/foreach}
                {foreach $[user.mini_custom_field]}
                {if $[user.mini_custom_field.name] == "Speed"}
                <span class="field">$[user.mini_custom_field.name]:</span>
                <span class="value">$[user.mini_custom_field.value]</span>
                {/if}
                 {/foreach}
           </div>
    <div class="info">
    {foreach $[user.mini_custom_field]}
                {if $[user.mini_custom_field.name] == "Log Thread"}
                <span class="field">$[user.mini_custom_field.name]:</span>
                <span class="value"><a href="$[user.mini_custom_field.value]">link</a></span>
                {/if}
               {/foreach}
    </div>
    {/if}

I want to have code so that each field has its own if statement to show, rather than if anything in any of the mini profile fields then all of them will show, but I'm not well-versed enough in code to know how to do that. Suggestions?

[Crow Valkairi]

Bump!

I'm not sure how often I'm allowed to bump, so I'm gonna try to stick with 24 hours until otherwise told. This is kind of a pressing issue, as I can't open my site until it's resolved Dx

[Alanna 🥀🖤]

Without linking your forum, not many people can help you.

However the code you have displayed should work fine, just remove the bold as it is not needed:

{if $[user.mini_custom_field]}
<div class="info">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Age"}
<span class="field">$[user.mini_custom_field.name]:</span>
<span class="value">$[user.mini_custom_field.value] yr(s)</span>
{/if}
{/foreach}
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Gender"}
<span class="field">$[user.mini_custom_field.name]:</span>
<span class="value">$[user.mini_custom_field.value]</span>
{/if}
{/foreach}
</div>
<div class="info">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Height"}
<span class="field">$[user.mini_custom_field.name]:</span>
<span class="value">$[user.mini_custom_field.value] in</span>
{/if}
{/foreach}
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Weight"}
<span class="field">$[user.mini_custom_field.name]:</span>
<span class="value">$[user.mini_custom_field.value] lbs</span>
{/if}
{/foreach}
</div>
<div class="info">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Health"}
<span class="field">$[user.mini_custom_field.name]:</span>
<span class="value">$[user.mini_custom_field.value]</span>
{/if}
{/foreach}
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Strength"}
<span class="field">$[user.mini_custom_field.name]:</span>
<span class="value">$[user.mini_custom_field.value]</span>
{/if}
{/foreach}
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Speed"}
<span class="field">$[user.mini_custom_field.name]:</span>
<span class="value">$[user.mini_custom_field.value]</span>
{/if}
{/foreach}
</div>
<div class="info">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Log Thread"}
<span class="field">$[user.mini_custom_field.name]:</span>
<span class="value"><a href="$[user.mini_custom_field.value]">link</a></span>
{/if}
{/foreach}
</div>
{/if}

[Crow Valkairi]

Oh, I didn't know I was supposed to link it. My bad. I'm new to asking for template help e.o

artha.boards.net/

I have tried removing the bold, but then each div appears regardless of whether any information has been put into the profile fields. Which is what I am trying to avoid :/

I'll edit this post with more description in a sec.

Edit: @khristian

If I remove the if statements, then all the divs are displayed in the profile, regardless. Which creates these annoying boxes that look bad.


This is how I want the mini profile to look when no fields are being used.


And this is an example of a profile with all the fields filled out, so that it can be seen how the divs are necessary to group information.


I realize that it's using the divs that is causing problems, or at least I think that's what is causing me so much fuss, but I want them in order to keep the design clean and organized.

[Alanna 🥀🖤]

Then what is your problem exactly if they are working? Just add back the IF statement then.

[Crow Valkairi]

Maybe I'm not explaining it correctly.

The if statements will show all of the divs if any information is put into a single field. So if I only fill out age, but leave the rest blank, the divs for the other fields will show but will be blank. I want only age to show in that case.

Maybe that's a better explanation? @khristian

[Alanna 🥀🖤]

You cannot target specific custom fields to show up and not show up if no values are entered for them. The best way to do this would be to have each custom field within it's own div, otherwise you will not be able to make a div that has two or more fields within it NOT appear when none of the fields have been entered.

[Brian]

There's a way to make this work but it's gonna make your HTML look a lot less organized.

For this method to work your div tag, foreach statement, and if statement all need to be on a single line. The only place where line breaks can take place is between the opening and closing tags of the if statement.

Here's an example of a container formatted in this manner that targets two different custom fields:

<div class="info styled pad-all">{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Test"}
        <span class="field">$[user.mini_custom_field.name]:</span>
        <span class="value">$[user.mini_custom_field.value]</span>
    {/if}{if $[user.mini_custom_field.name] == "Test2"}
        <span class="field">$[user.mini_custom_field.name]:</span>
        <span class="value">$[user.mini_custom_field.value]</span>
{/if}{/foreach}</div>

The reason it needs to be formatted like this is so that the :empty CSS pseudo class can work. It targets only elements that have no children or text within them. Spaces and line breaks count as text even if they don't render whitespace, so there can only be line breaks between the if statements.

You can add this CSS to your style sheet to target the empty elements in the mini-profile and hide them from view:

.mini-profile .info:empty {
    display: none;
}

[Crow Valkairi]

Brian That worked perfectly! Thank you! I definitely don't mind a less organized-looking background if the foreground is what I want :P

Now, I also have fields that are displayed in the summary on the profile, and I've tried to take the code you've provided to use in the profile template as well, but it doesn't seem to work at all. Everything is just always visible.

I took the CSS code and just erased the mini part from it, and added it to the CSS style sheet below the mini-profile code.

.profile .info:empty {
    display: none;
}

I copied/pasted the code for the layout template, but changed user.mini_custom_field to user.custom_field, and changed the class to summary-content-box. Here's a section of it:

<div class="summary-content-box">{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Height"}
        <span class="field"><b>$[user.custom_field.name]:</b></span>
        <span class="value">$[user.custom_field.value] inches</span><br>
    {/if}{if $[user.custom_field.name] == "Weight"}
    	<span class="field"><b>$[user.custom_field.name]:</b></span>
        <span class="value">$[user.custom_field.value] pounds</span><br>
{/if}{/foreach}</div>

What am I doing wrong?

[Brian]

Your CSS selector is incorrect. Neither of those classes exist in your profiles. Use this instead:

.show-user .summary-content-box:empty

[Crow Valkairi]

Brian Ah! Perfect!

I've much to learn about coding Dx

Thank you so much!