[MOD] Select box with images showing on profile

Level: Easy. User requires knowledge of html image links and will have to upload several images somewhere to use.

Keywords: Affiliation, Sorting House Hat, Select box with images (profile)

The custom code was written by Tammy. All credit goes to her.

---------

There is already a Select Box option in the Edit Profile Field but it just shows text; what about if you want to display an image on the member's profile?

For example, if you had a Hogwarts House affiliation profile field, here's how to change the display of

Hogwarts House: Gryffindor
to
Hogwarts House: Gryffindor

---------

Step 1. Create the images that you wish to use for this mod and upload them to your site or somewhere you can legally link from.

You may save these and upload them to your own server:

Step 2. Go to the Profile Information panel in the admin panel (/admin.php?action=authorfields)

Step 3. Click the link to Add new profile field.

Step 4. Input this information, making sure that you replace the YOUR IMAGE URL GOES HERE! with the url to your images in the Custom Profile Code area: (The Name: and Title: parts can be changed to whatever you want)

Name: sorting
Title: Hogwarts House
Field enabled: (check)
Type: Custom Code

Custom Form Code:

$output .= "<div><label for='af_".$field['field_name']."'>".$field['field_title'].":</label><SELECT type='text' class='textbox'  name='af_".$field['field_name']."'><option".(!empty($user["af_".$field['field_id']]) && $user["af_".$field['field_id']] == "Hufflepuff" ? " selected" : "").">Hufflepuff</option><option".(!empty($user["af_".$field['field_id']]) && $user["af_".$field['field_id']] == "Gryffindor" ? " selected" : "").">Gryffindor</option><option".(!empty($user["af_".$field['field_id']]) && $user["af_".$field['field_id']] == "Ravenclaw" ? " selected" : "").">Ravenclaw</option><option".(!empty($user["af_".$field['field_id']]) && $user["af_".$field['field_id']] == "Slytherin" ? " selected" : "").">Slytherin</option></select></div>";

Custom Profile Code:*

if($field['info'] == "Hufflepuff") $thisfield = "<img src ='YOUR IMAGE URL GOES HERE!'>Hufflepuff";else if($field['info'] == "Gryffindor") $thisfield = "<img src="'YOUR" IMAGE URL GOES HERE!'>Gryffindor";else if($field['info'] == "Ravenclaw") $thisfield = "<img src="'YOUR" IMAGE URL GOES HERE!'>Ravenclaw";else if($field['info'] == "Slytherin") $thisfield = "<img src="'YOUR" IMAGE URL GOES HERE!'>Slytherin";

*Make sure that you replace the four instances of YOUR IMAGE URL GOES HERE!'s with the url to your images. Make sure that the single set of ' surrounding the url is there.

If you want to change this sorting hat example to something else, then all you need to do is change the instances of "Gryffindor" "Hufflepuff", "Ravenclaw" and "Slytherin" to whatever you want them to be.

You can add more types than the four listed here but try and see if you can get this to work before fiddling with it. You may want to create an unsorted hat and have it be the default; when you add it, list it first.

Step 5. Save/Submit.

Step 6. Make sure that it will be shown on your skins. If you are using the {authorfields} variable on the profile pages of you skins then you don't have to change anything, but if you are using the individual variables by themselves them you will use {sorting} or whatever you named the field.

Working example:

http://www.potionsandsnitches.net/fanfiction/viewuser.php?uid=1