Image in Custom Profile Fields

[Water Crystals]

I've sent the two templates you asked for.

Yeah, sorry, confused the titles. What I meant was the broken image icon is showing in the mini-profile signature area, but nothing at all (in regards to what we're trying to do) is showing in the main profile so I assumed its lack of icon meant the code wasn't working there. So yes, I do just want it to show in the signature, which would naturally show in both the mini-profile and main profile. Hopefully that clears things up haha.

Let me know if you need anything else.

[₪» ⅀ ƪ Ƒ «₪]

EDIT: Okay, we're experiencing some issues with this $ thing. I can't even type it in this post without it converting, and if I copy/paste from this post into my layout templates, it brings the issue over there, too. I'm going to report this now and hopefully that will fix it. In the meantime, anything that says "%24" in my post is supposed to be a dollar sign - type it in by hand, do not copy it over, it is bringing its little issues over with it.

---

Alright, my friend! Others are much better/faster at diagnosing, they just whip open their console and start checking errors and typing away, but I am slower and still learning how to diagnose without having personal access to the site's layout templates. Funny, I learned how to code and now I am learning how to help. xD So bear with me, please.

What I did is opened up my lil test site, set up my own "Badges" custom profile field, put an image into the field for one of my test accounts, and then replaced the entire post list layout template with yours. So I have a fake version of your post list to work with. From here, I can see issues. Here is a little rascal of an error:


So there are a few problems with the chunk I just screenshot'd and we're gonna go through that, have you fix it up.

---

1) the $ is still showing up as %24 instead of the dollar sign. I'm not sure why, but double-check it is for sure a pure, normal $ in your code. ProBoards is being a brat today, it seems! It makes the most sense that it would cause the broken image, too. Erase it and type it in by hand to ensure it is pure. Personally, I would type in the entire
<img src="%24[post.created_by.custom_field.value]" class="fr-fic fr-dii">
part in by hand myself.

---

2) We have a random, unnecessary causing some trouble in there. It's in red, so it's pretty easy to spot, and in my version of your layout template it's on line #87. Currently, it is between the {/foreach} and the {/if}. Go ahead and remove that .


Here's a handy tip! If you ever feel uncomfortable erasing a code, because you're worried you will regret erasing it, aren't positive you want to remove it, or otherwise just want to keep it around but you don't want it to have any effect, you can "comment it out." Essentially, cancel it. Make it dormant. Inert. KAPOOEY.
To comment it out / cancel it, surround the unwanted code with <!-- and -->. Like this:
<!-- </div> -->
The cancelled code will become brown. This means it is no longer functioning, it is a ghost, but you still have it there if you ever want to bring it back, reference it.. whatever you may want.
You can comment out as much as you want, single words or big chunks, whatever. It's handy!
I personally get nervous deleting stuff, so commenting things out brings me some peace when I'm editing.
Comments are also useful for, well, commenting. You might use it to notate what the code below does, title different sections, give reminders to your future self if you ever come back to edit the code, etc. Like perhaps there's an important part you would write
<!-- DON'T TOUCH THIS -->
Or you could say
<!-- This creates the badges part -->
Or
<!-- Bother Brady if this breaks -->
Or whatever else your heart desires. A lot of coders use comments to credit their work, when they make premade codes, themes, etc.

---

3) We need to move our Badges code outside of the signature. Let's reorder this a little bit. Change this section:
{if $[post.created_by.signature]}

<div class="signature">$[post.created_by.signature]</div>

{foreach $[post.created_by.custom_field]}

{if $[post.created_by.custom_field.name] == "Badges"}

<img src="%24[post.created_by.custom_field.value]" class="fr-fic fr-dii">

{/if}

{/foreach}



{/if}

Into this:
{foreach $[post.created_by.custom_field]}

{if $[post.created_by.custom_field.name] == "Badges"}

<img src="%24[post.created_by.custom_field.value]" class="fr-fic fr-dii">

{/if}

{/foreach}

{if $[post.created_by.signature]}

<div class="signature">$[post.created_by.signature]</div>

{/if}

The badges will now be on top of the signature.
Remember, don't just copy/paste that $ in there. Type it in yourself. It's still causing weird conversion issues. In fact, I'm going to go report that to the admins, because it shouldn't be doing that.

---

And voila! It is now functioning on my test site. The G image is the random google image I threw in there as a test haha


(Working on the main profile stuff for you now btw)

[₪» ⅀ ƪ Ƒ «₪]

Time to deal with the main profile. I have turned off V6 so that its bugs do not affect this post. Hopefully that works. xD

Find this:
{foreach $[user.custom_field]}

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

<td class="headings">

$[user.custom_field.name]:

</td>

<td>

$[user.custom_field.value]

</td>

</tr>

{/foreach}

It should start around line #173.

We need to code an exemption for the Badges field so it doesn't show with all of the other custom profile fields.

We're doing this the same way we did the mini-profile code, except this time we have to use slightly different variables. You'll see that these variables are $[user.custom_field] instead of $[user.mini_custom_field] These are just differences between the types of layout templates you are using. Think of it like a dialect - both "mom" and "mum" have an identical meaning but are variations of the word. Same thing here, the variable means the same thing, it just has a variation depending on which layout template you're in. In this case, the different layout templates being for the mini-profile and user profile.

Here's our exemption, go ahead and replace that chunk I just gave you above with this chunk:
{foreach $[user.custom_field]}

   {if $[user.custom_field.name] != "Badges"}
   
<tr class="$[user.custom_field.content_class]">

<td class="headings">

$[user.custom_field.name]:

</td>

<td>

$[user.custom_field.value]

</td>

</tr>

   {/if}
   
{/foreach}

"Badges" is now removed from the automated cycle.

Now we're going to add it back in. Except this time we're going to add it in manually, in the way we want it to be - rather than the default automated way, which didn't work right for what we want.

Find this:
{if $[user.signature]}

<div class="content-box center-col">

Signature <hr />

$[user.signature]

</div>

{/if}
It should be around line #250.

Change that to this:
   {foreach $[user.custom_field]}
   {if $[user.custom_field.name] == "Badges"}
   <img src="$[user.custom_field.value]">
   {/if}
   {/foreach}
   
{if $[user.signature]}

<div class="content-box center-col">

Signature <hr />

$[user.signature]

</div>

{/if}

Now the Badges image is showing above my signature in my main profile. On my test site, it's the G image again:

Success! :)

If you have issues with this one, let me know.
Also let me know if you want it somewhere else other than above the signature in the user profile or if want any changes to the appearance of the image.
For example, if you want it to be a specific height and width no matter what size image they put in, or if you want it to have a minimum height/minimum or a maximum which allows them to put in their own shapes/size images but with limitations to ensure it isn't too small or large, or if you want to curve its corners or even make it a full circle, if you want there to be a border around the image, if you want it centered in the page, etc.

[Water Crystals]

I've fixed the %24 bits and the image showed up. I haven't tried the main profile bit though; not really sure where/which template I'm meant to be editing? Also, I've tried both inside the sig and above - I want to stick with it being inside the signature. This is what I'm using:

<img src="$[post.created_by.custom_field.value]" img style="width:100%;" class="fr-fic fr-dii">
Because the image wasn't displaying properly. Which I believe is related to another issue I'm having (https://support.proboards.com/thread/652582/help-displaying-boards) and not connected to what we're doing here. 

So keeping it in the signature, which template do I need to edit for your last post to get it to show in the main profile as well?

[₪» ⅀ ƪ Ƒ «₪]

The layout template you're editing is admin panel > structure > layout templates > user profile > summary.

The problem with keeping it in the signature is that, if the user does not have a signature, then the Badges will not show - even if they do have an image in Badges. So if you give them a badge image, but they don't have a signature, then nothing at all will show. It's dependent on the presence or absence of a signature. However, I can change things around so that it appears to be in the same area as the signature but doesn't rely on the signature being present. So, follow these steps instead of the ones given before for the main profile. I'm going to start from the beginning and outline all the steps. :)

---

1) Go to the user profile > summary layout template. Find this. It should start around line #173.
{foreach $[user.custom_field]}

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

<td class="headings">

$[user.custom_field.name]:

</td>

<td>

$[user.custom_field.value]

</td>

</tr>

{/foreach}


2) Replace that with this new code, which has the exemption in it:

{foreach $[user.custom_field]}

   {if $[user.custom_field.name] != "Badges"}
   
<tr class="$[user.custom_field.content_class]">

<td class="headings">

$[user.custom_field.name]:

</td>

<td>

$[user.custom_field.value]

</td>

</tr>

   {/if}
   
{/foreach}


3) Around line #250-ish, find this:
{if $[user.signature]}

<div class="content-box center-col">

Signature <hr />

$[user.signature]

</div>

{/if}


4) After discussing what you want on Discord, here's the revamp for that area. Replace that with this:
<div class="content-box center-col">

{if $[user.signature]}
                       
Signature <hr />

$[user.signature]
{/if}
                       
   {foreach $[user.custom_field]}
   {if $[user.custom_field.name] == "Badges"}
   <img src="$[user.custom_field.value]">
   {/if}
   {/foreach}
                       
</div>

Now, it will appear inside of the signature container like you want, but it isn't dependent on the signature being present.