Empty custom fields still showing in mini profiles.

The Coding Help board is exclusively for general coding help, not for modifications having to do with themes, templates, or plugins. If you have any questions involving those three categories please post them in the appropriate board.

Empty custom fields still showing in mini profiles. Mar 21, 2020 7:53:20 GMT -8

Post by lunari on Mar 21, 2020 7:53:20 GMT -8

Hello! So, I've been doing a lot of tweaking with the mini profiles on my forum (here), and I've nearly gotten them to look the way I want them to...except that any custom field that isn't filled out, still shows up in the mini profile, just with a blank answer. I thought they are supposed to not show if not filled out? Maybe I messed that up by doing something, because I did add the name of the field (so, for example, it'll show "Marital Status:" then the custom field answer next to it). But here's the code I have in my mini profile template in case someone knows a way around it:

<!-- PROFILE HOVER (OPTION 2) BY TRINITY BLAIR OF ADOXOGRAPHY, DO NOT STEAL -->

<div class="$[miniprofile_class]">

    <!-- THIS IS WHERE THE DEFAULT HOVER IMAGE IS CHANGED, REMEMBER TO ONLY REPLACE THE URL WITH YOUR OWN -->

    <div class="minicontainer" style="background-image: url('http://imageshack.com/a/img924/5246/LsQn5m.jpg');{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Hover Image"}background-image: url('$[user.mini_custom_field.value]');{/if}{/foreach} background-size: cover;">

        <div class="profilemini">

            <div class="minicontent1">

                <div class="minicontent2">

                    <center>

                        $[user]<br />

                        <!-- THIS IS YOUR USER'S GROUP NAME -->

                        <span style="text-transform: uppercase; font-size: 9px;">

                    	{if $[user.is_member]}

            				{if $[user.is_banned]}

            					(Banned User)

            				{elseif $[user.is_deleted]}

            					(Deleted User)

            				{else}

            					{if $[user.group]}

            						($[user.group.name])

            					{else}

            						($[user.rank.name])

            					{/if}

            				{/if}

            			{else}

            				(Annonymous)

            			{/if}<br>

                            Player: {foreach $[user.custom_field]}

{if $[user.custom_field.name] == "Player"}

<span class="$[user.custom_field.content_class]">

$[user.custom_field.value]

</span>

{/if}

{/foreach}

                            </span>

                    </center>

                    <br />

                    <!-- THIS IS WHERE THE AVATAR AND INFORMATION IS DISPLAYED -->

                    <center>$[user.avatar]</center><br />

                    <span style="font-size: 10px;">

                    {if $[user.is_member]}

            			{if $[user.is_banned]}

            				<center>I was banned!</center>

            			{elseif $[user.is_deleted]}

            				<center>I was deleted!</center>

            			{else}

            				                			{/if}

            		{else}

            			<center>I'm just visiting!</center>

            		{/if}

                        

                    Location: $[user.location]<br />

                    Marital Status: {foreach $[user.custom_field]}

{if $[user.custom_field.name] == "Marital Status"}

<span class="$[user.custom_field.content_class]">

$[user.custom_field.value]

</span>

{/if}

{/foreach}<br>

                    Occupation: {foreach $[user.custom_field]}

{if $[user.custom_field.name] == "Occupation"}

<span class="$[user.custom_field.content_class]">

$[user.custom_field.value]

</span>

{/if}

{/foreach}<br>

                    {foreach $[user.custom_field]}

{if $[user.custom_field.name] == "Profile"}

<span class="$[user.custom_field.content_class]">

<a href="$[user.custom_field.value]">Profile</a>

</span>

{/if}

{/foreach}</span>

                </div>

            </div>

        </div>

    </div>

</div>

<!-- THIS IS THE STYLING CSS -->

<style>

    .profilemini {

        position: absolute;

        width: 200px;

        height: 300px;

        opacity: 0;

        -webkit-transition-duration: 1s;

        transition-duration: 1s;

        -moz-transition-duration: 1s;

    }

    .profilemini:hover {

        opacity: 1;

    }

    .minicontainer {

    	width: 200px;

        height: 300px;

        border: 10px solid #eee;

    }

    .minicontent1 {

        width: 200px;

        height: 300px;

    	background-color: white;

    }

    .minicontent2 {

        padding: 1px;

    }

</style>

<!-- END PROFILE HOVER (OPTION 2) BY TRINITY BLAIR OF ADOXOGRAPHY, DO NOT STEAL -->

Empty custom fields still showing in mini profiles. Mar 21, 2020 9:56:03 GMT -8

Post by elli on Mar 21, 2020 9:56:03 GMT -8

Notice how you have your field labels before the logic that shows the field itself:

Marital Status: {foreach $[user.custom_field]}
  {if $[user.custom_field.name] == "Marital Status"}
    <span class="$[user.custom_field.content_class]">
      $[user.custom_field.value]
    </span>
  {/if}
{/foreach}

This will cause the label to appear regardless of whether or not the field has a value. Compare this to the default:

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

The label is inside of the foreach, so it doesn't show unless there's an existing value. Does that make sense?

I would recommend rewriting your logic along these lines:

<!-- PROFILE HOVER (OPTION 2) BY TRINITY BLAIR OF ADOXOGRAPHY, DO NOT STEAL -->
<div class="$[miniprofile_class]">

  <!-- THIS IS WHERE THE DEFAULT HOVER IMAGE IS CHANGED, REMEMBER TO ONLY REPLACE THE URL WITH YOUR OWN -->
  <div class="minicontainer" style="background-image: url('http://imageshack.com/a/img924/5246/LsQn5m.jpg');{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Hover Image"}background-image: url('$[user.mini_custom_field.value]');{/if}{/foreach} background-size: cover;">
    <div class="profilemini">
      <div class="minicontent1">
        <div class="minicontent2">
          <center>
            $[user]<br>

            <!-- THIS IS YOUR USER'S GROUP NAME -->
            <span style="text-transform: uppercase; font-size: 9px;">
              {if $[user.is_member]}
                {if $[user.is_banned]}
                  (Banned User)
                {elseif $[user.is_deleted]}
                  (Deleted User)
                {else}
                  {if $[user.group]}
                    ($[user.group.name])
                  {else}
                    ($[user.rank.name])
                  {/if}
                {/if}
              {else}
                (Annonymous)
              {/if}<br>

              <!-- PLAYER FIELD -->
              {foreach $[user.custom_field]}
                {if $[user.custom_field.name] == "Player"}
                  $[user.mini_custom_field.name]:
                  <span class="$[user.custom_field.content_class]">
                    $[user.custom_field.value]
                  </span>
                {/if}
              {/foreach}
              <!-- END PLAYER FIELD -->

            </span>
          </center><br>

          <!-- THIS IS WHERE THE AVATAR AND INFORMATION IS DISPLAYED -->
          <center>$[user.avatar]</center><br>
          <span style="font-size: 10px;">
            {if $[user.is_member]}
              {if $[user.is_banned]}
                <center>I was banned!</center>
              {elseif $[user.is_deleted]}
                <center>I was deleted!</center>
              {/if}
            {else}
              <center>I'm just visiting!</center>
            {/if}

            {if $[user.location]}
              Location: $[user.location]<br>
            {/if}

            <!-- CUSTOM FIELDS -->
            {foreach $[user.custom_field]}

              <!-- MARITAL STATUS -->
              {if $[user.custom_field.name] == "Marital Status"}
                $[user.custom_field.name]:
                <span class="$[user.custom_field.content_class]">
                  $[user.custom_field.value]
                </span><br>
              {/if}
              <!-- END MARITAL STATUS -->

              <!-- OCCUPATION -->
              {if $[user.custom_field.name] == "Occupation"}
                $[user.custom_field.name]:
                <span class="$[user.custom_field.content_class]">
                  $[user.custom_field.value]
                </span><br>
              {/if}
              <!-- END OCCUPATION -->

              <!-- PROFILE LINK -->
              {if $[user.custom_field.name] == "Profile"}
                <span class="$[user.custom_field.content_class]">
                  <a href="$[user.custom_field.value]">Profile</a>
                </span><br>
              {/if}
              <!-- END PROFILE LINK -->

            {/foreach}
            <!-- END CUSTOM FIELDS -->

          </span>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- THIS IS THE STYLING CSS -->
<style>
.profilemini {
  position: absolute;
  width: 200px;
  height: 300px;
  opacity: 0;
  -moz-transition-duration: 1s;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
}

.profilemini:hover {
  opacity: 1;
}

.minicontainer {
  width: 200px;
  height: 300px;
  border: 10px solid #eee;
}

.minicontent1 {
  width: 200px;
  height: 300px;
  background-color: white;
}

.minicontent2 {
  padding: 1px;
}
</style>
<!-- END PROFILE HOVER (OPTION 2) BY TRINITY BLAIR OF ADOXOGRAPHY, DO NOT STEAL -->

This has the added benefit of reducing the number of foreach (you have a limited number to use) and making things more readable. I've added comments so you can see where each field begins and ends.