Custom Profile Fields

[poncho]

LINK TO FORUM
I'm not experienced in coding, nor too familiar with Proboards. What I'm trying to do is have my Custom Profile Fields be displayed with a member's post down below their avatar and currently a message that reads, "I joined on ___ I've made ___ posts

This is the Layout Template coding for Mini-Profiles, I'm not even 100% sure is where I should be looking.

<style>
   .byolink a{
       font-family: fjalla one;
       font-size: 18px;
       text-transform: uppercase;
       text-align: right;
       border-radius: 10px;
   }
   
   .byolink a:hover{
       font-family: fjalla one;
       color: #dadada;
       font-size: 18px;
       text-transform: uppercase;
       text-align: right;
       border-radius: 10px;
   }
   
    .byolink {
       font-family: ms gothic;
       font-size: 14px;
       text-transform: uppercase;
       text-align: right;
       border-radius: 10px;
   }
   
   .otherinfo {
       font-family: verdana;
       font-size: 11px;
       text-align: justify;
       color: #181818;
   }
   
   .info {
       font-family: verdana;
       font-size: 11px;
       text-transform: uppercase;
       text-align: right;
       color: #181818;
   }
   
</style>


<div class="$[miniprofile_class]" style="width: 150px;font-size: 11px;">
   <center>
             
     
       <div class="ranking" style="font-family: fjalla one; text-transform: uppercase; font-size: 14px; letter-spacing: 1px;">{if $[user.group]}
$[user.group.name]
{elseif $[user.rank]}
$[user.rank.name]
           {/if}</div>
       
{if $[user.avatar]}
       
       <div class="avatar" style="-webkit-box-shadow: 0px 0px 1px #000000;box-shadow: 0px 0px 1px #000000;-moz-box-shadow: 0px 0px 1px #000000;"><div align="center">$[user.avatar]</div></div>
       <div class="byolink" style="font-size: 15px; font-family: fjalla one; font-weight: bold;">$[user]
           {if $[user.is_guest]}Guest{/if}</div>
{/if}

   
       <div class="otherinfo" style="background-color: #ffffff; -webkit-box-shadow: 0px 0px 01px #000000;box-shadow: 0px 0px 1px #000000;-moz-box-shadow: 0px 0px 01px #000000;font-size: 11px; font-family: font-family: fjalla one;">{if $[user.is_member]}
               
           <div class="info" style="font-family: fjalla one; font-size: 11px;">
           
      {foreach $[user.mini_custom_field]}

               <span class="$[user.mini_custom_field.content_class]">
                           $[user.mini_custom_field.value]</span>
               {/foreach}

          </div>
           <div style="font-size: 11px;">I joined on <span style="color: #8f3131;">$[current_user.registered_on_short]</span> I've made <span style="color: #8f3131;">$[user.posts]</span> posts</div></div>
                       
{/if}
       
       {if $[user.personal_text.message]}
<br><div class="text" style="font-family: ms gothic; font-size: 12px; text-transform: lowercase; text-align: center;">$[user.personal_text]</div>
{/if}
       
{if $[user.miniprofile_badge]}
<div class="$[user.miniprofile_badge_container_class]">
{foreach $[user.miniprofile_badge]}
$[user.miniprofile_badge.icon]
{/foreach}
</div>

   </center>
   </div>


[Scott]

poncho, custom profile fields will only show on the profile/mini-profile if there is data in the fields. It looks like you have it setup correctly but just have not entered any data in fields yet.

[poncho]

I've tried submitting data in the fields as a test and it still doesn't show.

[Scott]

poncho, what is the username of member that has data entered?

[poncho]

I've used my own Admin account as a test and I've used a member account Melissa Devaroux as well. I'd actually prefer that the Custom Fields displayed regardless if data was input or not, if that is possible.

[poncho]

bump

[Kami]

May 14, 2020 22:03:08 GMT -8 poncho said:

I've used my own Admin account as a test and I've used a member account Melissa Devaroux as well. I'd actually prefer that the Custom Fields displayed regardless if data was input or not, if that is possible.

I can't speak to the rest of this, but the Custom Fields don't exist at all until they're filled out.

There's a work around by doing something like:


Field Name: {foreach $[user.custom_field]}{if $[user.custom_field.name] == "Field Name"}$[user.custom_field.value]{/if}{/foreach}


I don't know off the top of my head if that's the right syntax, but along these lines -- no value will populate, but it will at least show the fields are there.

You can also play around with conditional statements to show/hide a class based on whether or not the field is filled. so something like:

<div{if $[user.custom_field.name] == "Field Name"}class="hideything"{/if}
This class doesn't show up unless the field is populated
</div>


would work so you could have a "default" value, then if the field is filled out (rendering the if conditional true) the class appears and you can set the css to be display: none;  thereby effectively having a 'default' value that makes it appear as if the content is there even if the field isn't filled.

I am not entirely sure I made sense, so let me know if I need to clarify anything!

[poncho]

It sounds helpful, but i'm not really sure how to apply it to my own coding without risking plugging it in the wrong place. What do I input and where?

[Kami]

May 20, 2020 4:14:16 GMT -8 poncho said:

It sounds helpful, but i'm not really sure how to apply it to my own coding without risking plugging it in the wrong place. What do I input and where?

Ah, sorry, I had assumed erroneously that you had some more in-depth familiarity with the templates, my bad!

So here is the bit of template that generates your custom fields:

{foreach $[user.mini_custom_field]}

<span class="$[user.mini_custom_field.content_class]">
$[user.mini_custom_field.value]</span>
{/foreach}

So, basically, this says: For each custom field that exists, create a span with the mini custom field class, that containes the value of what the user has entered into that field.

What you'd want to do is modify this to:

A. Show content OUSIDE the "foreach" loop (because we don't want the content repeating for literally each field.

B. Have a "default" value if the field isn't populated, so that it doesn't look weird.

To do this, we're going to replace the above code with this instead:

Field Name: <span{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Field Name"} class="hidethis"{/if}{/foreach}>Your Default Value</span>{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Field Name"}<span class="$[user.mini_custom_field.content_class]">
$[user.mini_custom_field.value]</span>{/if}{/foreach}

So to explain:


Field Name: This is the name of a specific field. Keep this outside of any foreach loops, because we want to have this visible at all times.

[The Purple]: We will put this specific foreach loop within the span tag. This foreach loop has a conditional (if) statement, that says that if the miniprofile custom field name matches what we specify (in this case, "Field Name"), to display the following class name. Since the field name doesn't exist until the field is populated, the conditional will be false which means the class does not appear until the field is populated. This is how you will get a default value if the field is not specified. Please note that you'll need to replace Field Name with the actual name of the field, and that this is case sensitive (so field name and Field Name are different).

Your Default Value: replace this with whatever you want to appear by default if someone doesn't have the field filled out. You can have this as plain text, or as a link, whatever.

[The Red]: This is another foreach loop to display the custom field value when the field is filled. Notice that unlike the original value, I am again calling out a specific Field Name (in case it wasn't clear, this should match all the other instances of Field Name as in the other portions). The reason I am specifying this is because since we need this content to be in a foreach loop, we don't want it repeating for every single field, just displaying for this particular field.

---

Next, add this to your css:

/* Hide default mini profile custom field value */
.hidethis {
display: none;
}


Anywhere is fine, as long as it's before the closing </style> tag. I'd put it on the bottom though.

---

And then lather, rinse, repeat for however many custom fields you have, replacing FIELD NAME with the actual field name of each field.

PLEASE NOTE: there is a 25 foreach loop limit on each template, so if you have more than 25 fields, you'll need to either trim them down or make a choice on which fields you want to have a default value and which you don't.


---

Hope this helps! Let me know if you have any questions.

[poncho]

Wow it looks great, thank you

[Kami]

no problem!