Mini profile images based off faction

[Niomi]

So I've been at this for a bit and I'm finally at my wits end (it's probably super simple too) but what I'm trying to do is; I have a drop down custom field labeled "Factions" and depending on which faction is selected from the drop down I want different images to be displayed. However, when I use the code below it either registers the faction but not the {else} for those who haven't been put into a faction, and if I fiddle with it at all it'll show only the {else} but not the selected faction. 

Any ideas?

<div class="groupicon">
         {if $[user.mini_custom_field.value] == "Pirates"}
  <img src="http://img.png" style="border-radius:150px;width:80px;height:80px;">
       
        {elseif $[user.mini_custom_field.value] == "Cultist"}        
         <img src="http://img.png" style="border-radius:150px;width:80px;height:80px;">
       
         {elseif $[user.mini_custom_field.value] == "chill peeps"}
         <img src="http://img.png" style="border-radius:150px;width:80px;height:80px;">
{else}
     <img src="http://img.png" style="border-radius:150px;width:80px;height:80px;">

{/if}
   </div>

[Lynx]

Whenever you need to go through Profile Custom Fields and / or Mini-Profile Custom Fields, you need to enclose it within a {foreach} loop to cycle through them. Your code needs to cycle through the custom fields so it can find it.

Try this and see if it works:


<div class="groupicon">
  {foreach $[user.mini_custom_field]}
     {if $[user.mini_custom_field.name] == "Factions"}
         {if $[user.mini_custom_field.value] == "Pirates"}
  <img src="http://img.png" style="border-radius:150px;width:80px;height:80px;">
       
        {elseif $[user.mini_custom_field.value] == "Cultist"}        
               <img src="http://img.png" style="border-radius:150px;width:80px;height:80px;">
       
         {elseif $[user.mini_custom_field.value] == "chill peeps"}
               <img src="http://img.png" style="border-radius:150px;width:80px;height:80px;">

         {else}
           <img src="http://img.png" style="border-radius:150px;width:80px;height:80px;">

         {/if}
     {/if}
  {/foreach}
</div>


I've also added in a check for the Custom Field name of "Factions".

[Niomi]

Lynx,

Thanks for the response! I did attempt to use the {foreach} code but I took it out because when I use those the entire code doesn't seem to work. The images only show up with only the {if} statements and the {else} code is completely ignored so this is why I'm at a loss. With the {foreach} it is acting like the images aren't even there/doesn't see them, if I drop the {foreach} it'll recognize the faction ones but not the {else} ones.

I'm testing it here link. I currently have the admin account as a 'cultist' group, the guest one works fine as it's a separate {else} code for guests only, and then the last post is a member post, who hasn't been assigned any faction group and should display the icon similar to the guest one, but it's blank as well.

[Lynx]

Niomi,

Taking a look, it's not actually putting anything in the 2 that aren't showing. Can you post your template (I'm assuming it's the mini-profile template) so I can take a look? If you don't want to post it, feel free to PM it to me.

[Lynx]

Niomi,

Thank you for the PM. I've replied to it.

[Lynx]

Tumbleweed,

I need your help please, oh mighty Template Guru!

With permission from Niomi, here is her mini-profile template:

SPOILER: Click to show


<style>  
.minihov1 {  
position: relative;
   overflow: hidden;
   width: 250px;
   height: 400px;
   background-color:#1B1B1A;
   padding:5px;
z-index:8;
}
.boxbg {
  background-color:#1b1b1a;
position:relative;
  z-index:20;
   padding:5px;
   position: relative;
   width:230px;
   margin-top:-30px;
   margin-left:5px;
}
.box1 {
background-color: #292929;
   position: relative;
   height: 30px;
   width: 30px;
   border:2px solid #111;
   text-align: center;
   margin-left:5px;
}
.box2 {
  background-color:#292929;
   position: relative;
   height: 30px;
   width: 30px;
   border:2px solid #111;
   text-align: center;
   margin-left:4px;
}
.box3 {
  background-color: #292929;
   position: relative;
   border:2px solid #111;
   height: 30px;
   width: 30px;
   text-align: center;
   margin-left:3px;
}
.box4 {
   background-color: #292929;
   position: relative;
   height: 30px;
   border:2px solid #111;
   width: 30px;
   text-align: center;
   margin-left:2px;
}
   .box5 {
  background-color: #292929;
   position: relative;
   height: 30px;
   width: 30px;
   border:2px solid #111;
   text-align: center;
   margin-left:1px;
}
  .box6 {
  background-color: #292929;
   position: relative;
   height: 30px;
   width: 30px;
   border:2px solid #111;
   text-align: center;
   margin-left:-1px;
}
.miniinfo {
   text-align:center!important;
   position: absolute;  
   width:250px;
   z-index:10;
   bottom:410px;
   height:400px;
   background-color:rgba(41, 41, 41, .8);
   transition: 0.5s linear;
   -webkit-transition: 0.5s linear;
   -moz-transition: 0.5s linear;
   -o-transition: 0.5s linear;
   -ms-transition: 0.5s linear;
}
.datministuff {
font:10px Verdana;
text-align:justify;
padding-right:10px;
padding-left:10px;
padding-bottom:10px;
padding-top:6px;
width:220px;
margin:35px auto;
background-color:#1B1B1A;
height:210px;
overflow:auto;
color:white;
}
.thegoods {
color:white;
font:10px Calibri;
text-align:justify;
font-weight:bolder;
background-color:#292929;
padding:5px;
position:absolute;
line-height:1.8;
height:15.5px;
width:94px;
margin:-52px 5px;
}
.thesmeed {
color:white;
font:10px Calibri;
   text-align:right;
font-weight:bolder;
background-color:#292929;
padding:5px;
line-height:1.8;
position:absolute;
height:15.5px;
width:94px;
margin:-24px 5px;
}
.theveed {
color:white;
font:10px Calibri;
font-weight:bolder;
   text-align:right;
line-height:1.8;
background-color:#292929;
padding:5px;
position:absolute;
width:94px;
height:15.5px;
margin:4px 5px;
}
.themead {
color:white;
font:10px Calibri;
font-weight:bolder;
text-align:right;
line-height:1.8;
background-color:#292929;
padding:5px;
position:absolute;
height:15.5px;
width:94px;
margin:32px 5px;
}
.minihov1:hover .miniinfo { bottom:5px;}
   .stat1 {
font:11px Calibri;
font-weight:bolder;
   padding:5px;
   background-color:#292929;
   color:#fff;
   height:15px;
   text-align:right;
   width:100px;
   margin-top:5px;
   margin-bottom:0px;
}
.stat2 {
   font:11px Calibri;
   font-weight:bolder;
   padding:5px;
   height:15px;
   width:94px;
   background-color:#292929;
   color:#fff;
   text-align:right;
   margin-top:5px;
   margin-bottom:0px;
   margin-left:5px;
}
.userlinkstyle a {
font:10px Calibri!important;
   font-weight:bolder!important;  
   color:#fff!important;
}
.skilltitle {
color:#$[user.group.color];  
}
.invpop {
padding:15px;  
}
.invuserpop {
text-align:left;
   border-bottom:5px solid #$[user.group.color];
   margin-bottom:10px;
   font:26px Oswald;
   color:#$[user.group.color];
}    
   .miniminiinfo {
font:10px calibri;
letter-spacing: 0px;
text-transform: uppercase;
text-align: center;
padding-top: 3px;
font-weight: 900;
}
   .mininame {
   background-color: #20201E;
padding: 5px;
   width: 250px;
   height:55px;
margin: -38px 0px 0px;
}
   .mininame1 {
padding: 10px 10px 10px 10px;
   width: 228px;
   border: 1px solid #444;
}
.minidisplayname {
text-align: center;
   font:10px calibri;
letter-spacing: 1px;
color: #f4f4f4 !important;
text-transform: uppercase;
padding-bottom: 3px;
margin: 0px 35px;
}
.minidisplayname a {
font:10px calibri;
letter-spacing: 1px;
color: #f4f4f4 !important;
text-transform: uppercase;
}    
   .groupicon {
position:relative;
z-index:1000;
margin-top:-50px;
border-radius:150px;
width:80px;
border:5px solid #1c1c1a;
margin-left:-10px;
background-color:rgba(32, 32, 30, .96);
height:80px;
}
</style>
<div class="$[miniprofile_class]">  
{if $[user.is_member]}
   
 <div class="minihov1">
 <div style="width:250px;height:400px;background-image:url('http://i.imgur.com/ceV5vQE.png');{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "250x400 Avatar"}background-image: url('$[user.mini_custom_field.value]');}{/if}{/foreach}background-size:cover;"></div>
   

<div class="miniinfo">
<div class="datministuff">

<table><tr><td>
 
   <div style="width:100px;height:100px;float:left;margin-top:5px;border:5px solid #292929;">$[user.avatar]</div>

 </td>
   
<td>
   <div class="thegoods">
       <span style="color:#$[user.group.color]">@</span>$[user.username]</div>
   
     <div class="thesmeed">
<img src="http://i.imgur.com/mq1DT1p.png" style="float:left;width:20px;height:20px;margin-top:-2px;"><span style="none"><span class="money_symbol" style="color:#$[user.group.color]"></span> <span class="money_amount"></span></span></div>  
   
   
<div class="theveed">
 <img src="http://i.imgur.com/uG9kn5f.png" style="float:left;width:20px;height:20px;margin-top:-2px;margin-left:-3px;"><span style="color:#$[user.group.color]">{foreach $[user.mini_custom_field]}
                                                                                               {if $[user.mini_custom_field.name] == "Rank"}
                                                                                               $[user.mini_custom_field.value]
                                                                                               {/if}
                                                                                               {/foreach}</span>RANK</div>  
<div class="themead">
 <img src="http://i.imgur.com/ctPgcBN.png" style="float:left;width:20px;height:20px;margin-top:-2px;margin-left:-2px;">{foreach $[user.mini_custom_field]}
                                                                                               {if $[user.mini_custom_field.name] == "LVL"}
                                                                                              LEVEL<span style="color:#$[user.group.color]"> $[user.mini_custom_field.value]
                                                                                               {/if}
                                                                                               {/foreach}</span></div> </td></tr></table>
 <center> <table><tr><td>
  <div class="stat1">
   <img src="http://i.imgur.com/GV1UUiN.png" title="HP" style="float:left;">  {foreach $[user.mini_custom_field]}
                                                                                               {if $[user.mini_custom_field.name] == "HP"}
                                                                                               $[user.mini_custom_field.value]
                                                                                               {/if}
                                                                                               {/foreach}</div></td>
 
 
 
  <td><div class="stat2"><img src="http://i.imgur.com/KQR9p6N.png" title="SP" style="float:left;"> {foreach $[user.mini_custom_field]}
                                                                                               {if $[user.mini_custom_field.name] == "SP"}
                                                                                               $[user.mini_custom_field.value]
                                                                                               {/if}
                                                                                               {/foreach}</div></td>
    </tr><tr>
  <td><div class="stat1"><img src="http://i.imgur.com/X8y0mA5.png" title="ATK" style="float:left;"> {foreach $[user.mini_custom_field]}
                                                                                               {if $[user.mini_custom_field.name] == "ATK"}
                                                                                               $[user.mini_custom_field.value]
                                                                                               {/if}
                                                                                               {/foreach}</div></td>
  <td><div class="stat2"><img src="http://i.imgur.com/UMO9JxO.png" title="DEF" style="float:left;"> {foreach $[user.mini_custom_field]}
                                                                                               {if $[user.mini_custom_field.name] == "DEF"}
                                                                                               $[user.mini_custom_field.value]
                                                                                               {/if}
                                                                                               {/foreach}</div></td>
</tr></table>
   
   
<div style="margin-left:-1px;margin-top:5px;width:203px;font:10px Calibri;font-weight:bolder;background-color:#292929;color:#fff;text-align:center;padding:8px;text-transform:uppercase;">PLAYED BY <span style="color:#$[user.group.color]">{foreach $[user.mini_custom_field]}
                                                                                               {if $[user.mini_custom_field.name] == "Alias"}
                                                                                               $[user.mini_custom_field.value]
                                                                                               {/if}
                                                                                               {/foreach}</span>
</div>
   
  </center>
 
</div>
 <div class="boxbg">
  <table><tr><td>
     <div class="box1">
         
         
         {foreach $[user.mini_custom_field]}
           {if $[user.mini_custom_field.name] == "Profile"}
            <a href="$[user.mini_custom_field.value]"><img src="http://i.imgur.com/QSZpL3m.png" style="width:20px;height:20px;margin-top:5px;margin-left:-.5px;"></a>
         {/if}
             {/foreach}

     
     
     
      </div></td><td>
   
 <div class="box2">
     
       <a href="#" class="modal-link" data-modal-target="skills">
     <img src="http://i.imgur.com/jL3hY3H.png" style="width:25px;height:25px;margin-top:3px;margin-left:-.5px;"></a>
                </div>  </td>
     
     
     
  <td><div class="box3">
     
      <a href="#" class="modal-link" data-modal-target="inven">
      <img src="http://i.imgur.com/jVEPrLE.png" style="width:23px;height:23px;margin-top:3px;"></a>
      </div></td>
   <td><div class="box4">
       
       {foreach $[user.mini_custom_field]}
           {if $[user.mini_custom_field.name] == "Plotter"}
            <a href="$[user.mini_custom_field.value]">
       <img src="http://i.imgur.com/v9QOCDG.png" style="width:23px;height:23px;margin-top:3px;margin-left:-.5px;"></a>
     {/if} {/foreach}
       </div></td>
 

   
   <td><div class="box5">  

     <img src="http://i.imgur.com/enjwZSo.png" style="width:23px;height:23px;margin-top:3px;">  <div class="awards $[user.id] $[user.name]" style="margin-top:-26px;"><img src="http://i.imgur.com/bS7swlN.png" style="width:23px!important;height:23px!important;"></div>
       
       
     
       </div>
     
   <td><div class="box6">
        {foreach $[user.mini_custom_field]}
           {if $[user.mini_custom_field.name] == "Tracker"}
            <a href="$[user.mini_custom_field.value]">
       <img src="http://i.imgur.com/gKgunsQ.png" style="width:20px;height:20px;margin-top:5px;"></a>
       {/if}{/foreach}</div></td>


  </tr></table> </div>
</div>
 

 </div>    
   
   
   
   

   
   

<div class="groupicon">
  {foreach $[user.mini_custom_field]}
     {if $[user.mini_custom_field.name] == "Factions"}
         {if $[user.mini_custom_field.value] == "Pirates"}
  <img src="http://i.imgur.com/BUPKuWh.png" style="border-radius:150px;width:80px;height:80px;">
       
        {elseif $[user.mini_custom_field.value] == "Cultist"}        
               <img src="http://i.imgur.com/T1EyczB.png" style="border-radius:150px;width:80px;height:80px;">
       
         {elseif $[user.mini_custom_field.value] == "chill peeps"}
               <img src="http://i.imgur.com/tTDHPHq.png" style="border-radius:150px;width:80px;height:80px;">
   
   {else}

  <img src="http://i.imgur.com/zENULZ4.png" style="border-radius:150px;width:80px;height:80px;">
         {/if}{/if}{/foreach}
</div>
   
   <div class="mininame">
       <div class="mininame1">
           
           <div class="minidisplayname" style="border-bottom: 1px solid #$[user.group.color];"> $[user] {if $[user.is_guest]}Guest{/if} </div>
<div class="miniminiinfo" style="color: #$[user.group.color];">
{if $[user.group]}
   <div align="center">$[user.group.name]</div>
   {else}
   <div align="center">No Group</div>
       {/if}        
</div>

       </div>
   </div>  
   
   
   {else}
   
    <!-- GUEST TEMPLATE -->
<div class="minihov1">
 <div style="width:250px;height:400px;background-image:url('http://i.imgur.com/ceV5vQE.png');{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "250x400 Avatar"}background-image: url('$[user.mini_custom_field.value]');}{/if}{/foreach}background-size:cover;"></div>
</div>
<div class="groupicon">

  <img src="http://i.imgur.com/zENULZ4.png" style="border-radius:150px;width:80px;height:80px;">
       
    </div>
   <div class="mininame">
       <div class="mininame1">
           
           <div class="minidisplayname" style="border-bottom: 1px solid #000;">{if $[user.is_guest]}Guest{/if} </div>
<div class="miniminiinfo" style="color: #000;">
   <div align="center">No Group</div>
</div>

       </div>
   </div>   {/if}
</div>

   
   <!-- POP UP CODES -->
   
<div id="inven" class="modal-content"><div class="oppayipyip">X</div><div class="invpop">
   
   <div class="invuserpop">$[user.name]'s Inventory</div>

   <div class="monetary_shop_items"></div>
   </div></div>

<div id="skills" class="modal-content"><div class="oppayipyip">X</div><div class="invpop">
   
   <div class="invuserpop">$[user.name]'s Abilities</div>

<table style="color:#555;font:10px Calibri;font-weight:bolder;text-transform:uppercase;padding:20px;">
<tr>

<td width="55px">

{foreach $[user.custom_field]}
                           {if $[user.custom_field.name] == "Ability Level #1"}
<div class="skilltitle">
$[user.custom_field.value]:
                           </div>
{/if}
{/foreach}

</td>
                       <td>

{foreach $[user.custom_field]}
{if $[user.custom_field.name] == "Ability Slot #1"}

$[user.custom_field.value]

{/if}
{/foreach}

</td>
</tr>
<tr>
                        <td>

{foreach $[user.custom_field]}
                           {if $[user.custom_field.name] == "Ability Level #2"}
<div class="skilltitle">
$[user.custom_field.value]:
                               </div>
{/if}
{/foreach}

</td>
<td>

{foreach $[user.custom_field]}
{if $[user.custom_field.name] == "Ability Slot #2"}

$[user.custom_field.value]

{/if}
{/foreach}

</td>

</tr>
<tr>
<td>

{foreach $[user.custom_field]}
                           {if $[user.custom_field.name] == "Ability Level #3"}
<div class="skilltitle">
$[user.custom_field.value]:
                           </div>
{/if}
{/foreach}

</td>
                       
                       <td>

{foreach $[user.custom_field]}
{if $[user.custom_field.name] == "Ability Slot #3"}

$[user.custom_field.value]

{/if}
{/foreach}

</td>
</tr>
<tr>
<td>

{foreach $[user.custom_field]}
                           {if $[user.custom_field.name] == "Ability Level #4"}
<div class="skilltitle">
$[user.custom_field.value]:
                       </div>
{/if}
{/foreach}

</td>
                       
                        <td>

{foreach $[user.custom_field]}
{if $[user.custom_field.name] == "Ability Slot #4"}

$[user.custom_field.value]

{/if}
{/foreach}

</td>
</tr>

</table>
   </div></div>


Around midway, there a line that starts out with <div class="groupicon"> - that section isn't working right. I've loaded the whole code into NP++ as HTML to see if I could find any issues, but I couldn't find anything for the life of me. If you get a moment, could you please peruse the code and see why it's not working right? I believe Niomi posted a link to their forum earlier on in this thread.

Any help would be appreciated! Thank you for your time!

[Tumbleweed]

Lynx , Thanks for the tag but  Niomi , sorry it won't happen tonight as I'm groggy, tired so looking at code isn't something I want to do and I do need to head to bed. I'll try to take a look after some snoozing and since it'll be Saturday when I wake up, I won't have work to contend with so should have free time.

[Niomi]

Tumbleweed,

I'm in no rush to have this done so please take your time! I just appreciate the help when/if able!

[Tumbleweed]

Dec 17, 2016 7:17:05 GMT -8 Niomi said:

Tumbleweed ,

I'm in no rush to have this done so please take your time! I just appreciate the help when/if able!

I'm sorry, I ended up being busy all day. A friend that owns a Subway franchise had his help not show up so he was desperate and so to earn a bit of extra $$$, I helped him out. (Not fun as I'm used to a desk job.)


Anyway, Just now I put that on my test site and thus far I am stumped as the if statements seem right to me at the moment.  I'm sure it is something simple (maybe?) that we are missing but I haven't found what that is yet.     I'll look at it again tomorrow when my brain is fresher but no promises. I'm not the Guru MSG so nicely said I am when it comes to mini-profiles with custom fields, as I rarely mess with them.

[Boy_Wonder]

I'm not 100% sure but could it be the 'else' that's throwing it? I've never used else with custom profile fields

[Kami]

Dec 18, 2016 3:23:57 GMT -8 Boy_Wonder said:

I'm not 100% sure but could it be the 'else' that's throwing it? I've never used else with custom profile fields

No, that's correct syntax.

> if custom field faction is filled out
>> if faction is x
>>> (code)
>> else if faction is y
>>> (code)
>> else
>>> (code for any other selection

[Lynx]

Is the "elseif" supposed to be written as 1 word, or 2? Is it elseif or else if? I know in JS it would be else if, but not sure about the templates.

[Niomi]

Dec 18, 2016 9:09:19 GMT -8 Lynx said:

Is the "elseif" supposed to be written as 1 word, or 2? Is it elseif or else if? I know in JS it would be else if, but not sure about the templates.

I've tried both just if, else if and elseif statements but unfortunately for me the result seems to be the same. (Or well not the same, but doesn't work either way as it should.)

[Boy_Wonder]

Is all capitalisastion correct? The reason I ask is that yes that can also throw it

[Niomi]

Dec 18, 2016 9:28:07 GMT -8 Boy_Wonder said:

Is all capitalisastion correct? The reason I ask is that yes that can also throw it

Yeah I learned that the hard way awhile back, but I double checked that, too. Even copy/pasted it from the code to the custom profile fields section to make sure.