Image in Custom Profile Fields

[Water Crystals]

There's two parts to this. I've tried doing it myself but it only shows up as text (BBCode of the image link) in both places. I doubt it's simply not working, but rather I don't really know what I'm doing so could someone please help me?

1) I'd like to set up specific custom profile fields where I can put an image BBCode or even just the url into and it'll show up in profiles + mini-profiles as that image. I understand that using the "text field" option (with light BBCode selected) is the way to go, however it won't work for me. It always shows as whatever I put into it, not turn it into an image. I also only want the image to appear - no title, etc. I think that happens anyway, but felt it was worth mentioning.

I was really happy with how it placed itself with what I did (added some if/foreach or whatever into the post list, as seen from another thread, but the issues mentioned above were too confusing for me to know how to fix it.

2) Using the above thing- for some, I'd also like to make them appear in the Signature. I managed to move it, but it shows up both there and in the default spot - and again, no image just text. I think one time I did get an image but only in the mini-profile bit and the part in the signature remained text. So confusing.

Note: Please tell me exactly where anything needs to go because I'm terrible at working out which template or layout or whatever to put stuff. 

[Nscalerr]

Hi

For a start it needs to be html for the mini-profile and not bbcode, (which is only used inside a post).

[Water Crystals]

Uh...?

I use BBCode in my other custom profile field for adding a clickable link. And it does say you can use light BBcode in a custom profile if you select that option for a text field.

[adminabp]

Light BBCODE includes Bold, Italic, Underline, Strike-through, superscript, subscript, URLs, and Smileys...not image links

[Water Crystals]

Hmmm. I was misinformed or misread somewhere then. I assumed since links worked that images could to?

Okay, so how can I make images work? And fix the other issues I mentioned?

[Water Crystals]

Bump

[Water Crystals]

Bump?

[₪» ⅀ ƪ Ƒ «₪]

I will try to help you. :) So, the best way to do this is to make the image happen through the layout templates themselves, rather than having the user try to make an image in their individual profiles. I am going to walk you through how to make a brand new custom profile field in this method; you can just alter the one you currently have, though.

1. Go to admin panel > members > custom profile fields.
2. Make a field, in this example I will name the field "Image." Put your own profile field name wherever I use the name "Image."
3. Set "Type" to "Text Field."
4. Click (View/Edit) and select "URL (plain text)". It's important to do plain text.
5. Make "Location" include mini-profile, it's up to you if it includes profile. "Who Can Edit" can be whatever you want.

Now to put it into the code.

6. Go to admin panel > themes > layout templates > mini-profile.
7. I won't tell you where to put this because I don't know your specific template. But I will give you the code that you can insert anywhere you want this image to show up:
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "Image"}
<img src="$[user.mini_custom_field.value]">
{/if}
{/foreach}
I can help you pick the exact spot to put it into the code if you need me to. It will require you to send me the entire mini-profile layout template and for you to tell me where you want it to show up in the actual mini-profile, referencing the current mini-profile setup as seen in a thread for me to see where you want it.

Additionally, I can help you format the image if you need me to. 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, etc.

Now, when they go to their edit profile, they can put the direct image link into the "Image" field and it will make that image show up in the mini-profile where you put this code. They only put the link in and only the image will show. Direct links can be hosted on a variety of sites, such as deviantart.com, and you can always get the direct link of an image by right-clicking and selecting "copy image address" (on windows).

If you have a code that cycles all of your custom profile fields, as in it shows every single profile field automatically, you will need to make an exemption. Let me know if this is the case for you and I'll walk you through how to do that. You will know if this is the case for your forum if you see the "Image" field anywhere other than the place that you put the code I gave you, and if the 2nd "Image" field that shows doesn't produce an image but rather produces just the link.

Please let me know if this works for you. If you run into issues, I will help you - please give me the forum link and a link to a thread with a mini-profile that shows the issue.

Now, for the signature issue you are having.

Do you want it to basically be that the image shows in the mini-profile or the signature, but never both? If you want to go this route, there will need to be a difference between the accounts in order to tell the code to show it in the mini-profile or signature respectively. Some sort of identifier for the code to differentiate the types of accounts.

The easiest way to do this would be a member group. If they are already in particular member groups and you can't/don't want to change that, or you don't want to have a visible member group for this, then you can make a hidden member group that doesn't show up anywhere and the members don't know exists. If you did this, then you can put them into this hidden group in order to change where the image shows.

For example, it can be that all accounts by default show in the mini-profile, but if you add them to the hidden "Group A" then it will show in their mini-profile.
You could also make it so that the image doesn't show in the mini-profile or signature at all unless they are added into "Group A" (signature) or "Group B" (mini-profile).

Please explain if this is not what you want or if putting them into member groups to determine if it's a mini-profile/signature wouldn't work for you, and the reason it wouldn't work.

[Water Crystals]

Thank you so much for offering to help ₪» ⅀ ƪ Ƒ «₪! So I haven't tried it out yet; I want to answer your question about the signature first, in case that changes the code or adds additional steps etc.

What I'd like is that the custom profile field with the image doesn't show in the profile but rather the signature. This will be edited (thus image url added/removed) by staff only. It'll apply to everyone (non-staff) who has something in that field; so not by specific group or otherwise.

I super appreciate the in-depth details you gave and everything makes sense so I'm excited to get this resolved. Let me know if you have any questions or need anything. I can PM you my templates or such if needed (don't like to share them publicly). 

[₪» ⅀ ƪ Ƒ «₪]

No problem!
Alright, so you want it only in the signature, and only when staff add it. Makes it quite simple, then. :)

So complete steps 1-4 as given.

5. "Location" if you want it to show up on your main profile, let me know. Otherwise, change this to mini-profile only.
"Who can edit" will now be staff only.

New steps!

6. Go to admin panel > themes > layout templates > thread > post list

7. Find this code. On the default theme, it's on line 37-39, but it won't be exactly there if you've modified your template. It may also look differently if you've customized your theme. Let me know if you can't find it.
{if $[post.created_by.signature]}
<div class="signature">$[post.created_by.signature]</div>
{/if}
This code is basically saying "if this account has a signature, then put the signature here." Since we want our image to show up regardless if the account has a signature or not, we will put it above the {if} so that it isn't dependent on the signature but still shows up in the same spot.

8. The code to add will be:
{foreach $[post.created_by.custom_field]}
{if $[post.created_by.custom_field.name] == "Image"}
<img src="%24[post.created_by.custom_field.value]" class="fr-fic fr-dii">
{/if}
{/foreach}
Some explanation, in case you want to know:
Any time you want to use a custom profile field in your code, you have to run a {foreach} loop. What it does is ask the code to run through all the custom fields that your site has total, so that it can either show them all (which is what it does by default) or so that you can call upon a specific one. Unless the code checks all of the fields, it can't bring an individual one out. So if you want a single one, you have to call all of them first with a {foreach} just so the code can access it. At least... that's the best way I can think to put it, since that kind of thing is only something I vaguely understand myself :)
Then the {if} is telling it which custom field you specifically want. In this case, you are saying "if its name is image." The code then disregards all the fields that aren't named image and focuses only on that one.
And finally, the image code is set up to enter an image, except that the normal URL for the image is instead replaced with the field value. When they put an image link into their profiles, it puts the link into the src="" spot, thus completing the code for an image and allowing it to show.
I like to translate {foreach} and {if} statements into normal english sentences in my head. It's the easiest way to understand it, keep it all straight, and work with long, complex ones. So if I put the entire thing I just gave you into english, it is essentially:
"I want the code to look through all my custom profile fields until it finds one called 'Image.' When it finds one called Image, then insert this <img class="fr-fic fr-dii"> code. When an account has a link in the Image field, then the link will go into this <img class="fr-fic fr-dii"> code and create an image."
I learned how to do these things from your exact position. An admin coming to Support for help and having others assist me. Knowing the logic behind the code I'm giving you will hopefully give you a bit more understanding, which I know I greatly treasured when I was trying to learn. But you can also nod your head, go "uh-huh," and just copy what I give you if you prefer xD

As before, this is a basic code, no formatting given. It'll just make the image show if staff enter one into the user's account.

If you are having issues or want further advice or anything, let me know.

Now, if it still showing up in your mini-profile as well, then I will need to code an exemption in there. If so, please message me your mini-profile layout template and give me a link to a thread on your site with a mini-profile that is showing the image field.

[Water Crystals]

Can I just say, those explanations were a huge help ₪» ⅀ ƪ Ƒ «₪. I really appreciate you taking the time to help me learn and understand it, as I do want to get better. And I've improved so much myself since being helped on this site as well, so I know what you mean. I hope I can get as good as you and others one day to also return the favor

Onto the code...
I did everything and did run into a problem, so I might need that exception yeah. Btw I do also want it to show in the profile as well as mini-profile, yes.

Just to check I've done this correctly, this is what I have. It aligned weird when I pasted it here, but eh pasting on Proboards has been weird lately. 

{if $[post.edited]}

<div class="edited_by"><span class="italic">Last Edit:</span> $[post.edited.date] by $[post.edited.by_user]{if $[post.edited.reason]}: $[post.edited.reason]{/if}</div>

{/if}

{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}
So what happens are the following:

• A thin, coloured bar appears at the very top and bottom of the mini-profile. Almost like an intentional, cool border of some kind but obviously not what I was aiming for.
• The link appears as plain text in the mini-profile, where the custom profile field shows up as normal.
• A broken image icon appears in the signature.

Note: I have tried several different image links just to confirm it wasn't just that specific one I was using.

I've PM'ed you my mini-profile layout template, though guests can't see member mini-profiles so I'm not sure a link would help. Let me know if there's anything else you need.

[₪» ⅀ ƪ Ƒ «₪]

You're very welcome! I knew only the basics when I started - bold, italic, underline, center, that kind of thing. I was the epitome of a novice. But I bothered everyone at Support for so many years, I inevitably picked up a few tricks, and can now comfortably code my theme as needed. I'm still far from elite or anything but I can get the trick done. So of course I want to pass along the favor to other people, since I'd still be relying on others to code everything for me if it weren't for some special people here that advised me. Always feel free to tag me or message me, for assistance in coding or just a simple question or explanation you want clarified, whatever. ^^

Alright, so I've made an account on your forum (assuming zyver-rpg is indeed the correct forum) under username "elf" so that I'll be able to see your profiles correctly. Can you please link me to a specific thread where the new "Badges" custom profile field is showing? As in, where you can see the issues you reported in the bullet points there.

EDIT:
Right off the bat I'll say that the:
src="%24[post.created_by.custom_field.value]"
part, the % 24 should be a single dollar sign. $. Chances are, it converted wonky when you copy/pasted from here.
Short version of the issue, certain symbols activate certain codes, so if you want to use these symbols without affecting the code, you are able to use a bit of gibberish to create the illusion of the symbol. It will look like the simple symbol to us, but it is registered as alternate gibberish to the code, so it won't activate any effects. Like.... you can make a space with &nbsp; and it appears as a normal space to us.
So, most likely, the dollar sign was converted into some "gibberish" to avoid affecting the code -- except that we want it to affect it. xD
So instead of copy/pasting it, just type in the dollar sign. It should appear as ="$[
Lemme know if that fixes the broken image in the signature part of the problem.

EDIT EDIT:
Another problem I'll just jump into now is the placement of your statement. So, let me break down what is happening in the chunk of signature code you've given:
{if $[post.created_by.signature]}
<div class="signature">$[post.created_by.signature]</div>

What this means, if you put it into "english" the way I do at least, is: "If the person who made this post has a signature, then show their signature here."
Meaning, anything within the boundaries of that {if $[post.created_by.signature]} code there is going to be conditional to the poster having a signature.
If the poster doesn't have a signature, the Badges won't show even if you enter an image into it.
To keep it from being dependent on the presence of a signature, we need to close the signature's {if} statement before or after we put the Badges code.
Which leads me to another problem--
The code you've given me doesn't show an {/if} closing the signature's conditional statement. It may be missing, which would cause a whole slew of issues. However, it could also just be further down in your layout template, and adding a new {/if} if there already is one would also cause issues. xD So, if you'd like, you can send me the layout template for this one, too, so I can verify if the signature's closing {/if} is or isn't missing.

[₪» ⅀ ƪ Ƒ «₪]

Going to reply to your mini-profile code issue in here just so everything is all together if you ever want to come back and reference it again, versus having it split between threads and PMs. I've had that happen a few times in my own Support endeavors, can get confusing xD

This chunk is your culprit that needs an "exemption." You'll have to pardon me, I don't know the technical phrasing of everything, just how I personally understand/translate it.
{foreach $[user.mini_custom_field]}

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

{/foreach}

What this is saying in "english" is:
"Go through all of the custom profile fields this site has.
Put their name here followed by a colon.
Put their value here after the colon."

Thus, every custom field you have will appear together like
Name: Value.
You can add, edit, remove your custom profile fields all you want, this code will simply adjust to continue automatically showing all of them, whether you have 3 or 30.

Since it's asking the code to show every single custom profile field, inevitably our new one "Badges" is going to appear, too. All of the fields are being summoned, after all, and nothing has told "Badges" that it isn't welcome.

Sooo, let's revoke its invitation. We're gonna be rude and tell the code:
"Go through all of the custom profile fields this site has.
If it isn't named Badges,
then put their name here followed by a colon.
Put their value here after the colon."

Everyone gets to party but poor Badges.
To do this, we're gonna bring back the handy {if} statement. Seriously, when I code in the layout templates, my life just becomes a series of {foreach} loops and {if} statements, endlessly. xD They may be my best friends now. Or.... enemies. Depending on the day.

The new code will look like this:
{foreach $[user.mini_custom_field]}

{if $[user.mini_custom_field.name] != "Badges"}

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

{/if}

{/foreach}

The new {if} statement means "If the name is not Badges." Before, when coding the signature, we were using == for it to say "if it is." Now, we are using the inverse, which is != and that means the opposite, "if it is not." Or, == is "if it matches this" versus != is "if it does not match this."

Then we close off the {/if} right before the {/foreach} ends. The {if} statement is only talking about the custom profile fields, so its condition ends once they're stated.

If done correctly (and I didn't make a typo or anything), it should no longer show in your mini-profile fields and be properly exempted.

[Water Crystals]

You make this fun!

Okay, so that worked. Now just got two things left:

1) The image in the signature still has the little icon to signify a broken image, though I know there's nothing wrong with the link or image itself so I assume the code's not correctly turning url into image.

2) I'd like it to show in the main profile as well. So far it only appears in the mini-profile, though likely because we haven't told it to show up in the main profile too.

[₪» ⅀ ƪ Ƒ «₪]

Glad I can entertain a little!

1) Hmmmm, and you fixed the $? Remember to send the thread > post list layout template to me so I can look it over. Also, a link to an example thread, please :)

2) As we just removed it from the mini-profile, if I am not mistaken, when you say "mini-profile" in this sentence, you mean in a thread? In the end, what we want is for Badges to show in the signature area when you are viewing a thread, and also show in the main user profile, which you navigate to by clicking on someone's name. The term "mini-profile" is specifically the little area of information on the left side to our posts, which is what we just removed the Badges code from, so it shouldn't be showing there at all.

We can add this to your main profile next! :) Please link me to a profile that has the Badges field filled out, tell me where you want it to appear, and message me the user profile > summary layout template.