Displaying gender in the form of icons instead of words

Started by vroony, July 23, 2015, 05:23:09 AM

Previous topic - Next topic

vroony

I've created a custom field to allow the user to select gender from a radio button selection while making a profile:



But when I view this on someone's profile, I want it to show the images male.png or female.png (depending on the user's choice, of course) instead of the text "male" or "female". How can I do this?

NOTE:I'm aware there is a built-in gender field, but I don't want to use that for... reasons of my own...which I'd rather not disclose. Please understand.

Illori

do you have anything in the Show Enclosed Within Text (Optional): field? if so what? without something there no image will show at all.

margarett

In radio buttons (and others) no HTML is allowed (for security reasons), neither BBC is parsed unfortunately.

This has been discussed before (several times actually) and I don't think it can be changed :(

edit: actually I think I found a "manual" way. It will break if you edit the field again but if not it should work. Give me some minutes
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

vroony

Quote from: Illori on July 23, 2015, 05:51:41 AM
do you have anything in the Show Enclosed Within Text (Optional): field? if so what? without something there no image will show at all.

I'm not exactly sure what I should put to achieve what I want, so I put this...


<img src="mysiteurl.com/male.png">
<img src="mysiteurl.com/female.png">


This obviously made both images show up. I want it to vary depending on what the user chooses?

vroony

Quote from: margarett on July 23, 2015, 06:47:21 AM
In radio buttons (and others) no HTML is allowed (for security reasons), neither BBC is parsed unfortunately.

This has been discussed before (several times actually) and I don't think it can be changed :(

edit: actually I think I found a "manual" way. It will break if you edit the field again but if not it should work. Give me some minutes

Whew... I was pretty crestfallen for a moment,,  :D

margarett

OK, we can try this.

I created a custom profile field, radio button, as attached.

The options are links to images (each option a link), eg:
<img src="http://localhost/male.png">
<img src="http://localhost/female.png">


When you submit this, SMF will sanitize the HTML input, by replacing every HTML character with its "textual" equivalent: "<" becomes "&lt;" and so on. So when I look at my table "smf_custom_fields" table, column "field_options", I find this
&lt;img src=&quot;http://localhost/male.png&quot;&gt;,&lt;img src=&quot;http://localhost/female.png&quot;&gt;
So you see both radio options separated by a comma and all html delimiters replaced with literal characters. If I change that to valid HTML, eg:
<img src="http://localhost/male.png">,<img src="http://localhost/female.png">
It actually works. In my profile I can choose by image an not just by text anymore. And it also shows correctly in the mini-profile (topic view)

If you go back to edit the profile field this will be reverted, though...
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

Illori

dont you need to use {{INPUT}} somewhere so it just shows one of the 2 images depending on the input selected?

margarett

In all honesty... I have no idea how that works :P
(my bad, of course...)
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair


margarett

I will look at it, thanks. Who knows maybe there is a easier way ;) (although I would suggest that it should have been said before and I couldn't find it...)
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

Illori

i dont see why it would not work if you put <img src="http://localhost/{{input}}.png"> in the field and left it at that... i dont know why your install was giving you issues with the html in that box i have not seen that before.

vroony

Quote from: Illori on July 23, 2015, 07:32:28 AM
i dont see why it would not work if you put <img src="http://localhost/{{input}}.png"> in the field and left it at that... i dont know why your install was giving you issues with the html in that box i have not seen that before.

before I try margarett's method, I want to try yours since it looks simpler, and frankly, less scary  ;D

But, I'm not sure how that's supposed to work? Does the image's name have to be the same name as the input? Whatever, I'll give it a go...

Illori

yes it has to be the same as the options that the user can select.

but it should be {INPUT} not {{INPUT}}

vroony

Seems like I left the thread to die...
Well, I've tried everything I could, it's just not working. I renamed my images male.png and female.png and tried the suggested option, but the image isn't displaying...

Illori

can you take a screenshot of the config you have for the profile field in the admin panel?

vroony

Never mind. It was some dumb spelling error. Thanks for all the help!

Advertisement: