Simple Machines Community Forum

Customizing SMF => SMF Coding Discussion => Topic started by: Random Username on January 12, 2023, 04:39:28 AM

Title: How do you include icons with custom profile fields?
Post by: Random Username on January 12, 2023, 04:39:28 AM
I can't seem to find where to add/upload the images nor connect them to options in registration fields.

Thank you!
Title: Re: How do you include icons with custom profile fields?
Post by: Kindred on January 12, 2023, 10:14:20 AM
you can upload them anywhere -- as long as you call out the correct location in your field definition.

In general, I'd suggest loading them to Themes/default/images
Title: Re: How do you include icons with custom profile fields?
Post by: Random Username on January 12, 2023, 02:05:24 PM
Is it possible you might provide an example of a field definition calling an image? I really appreciate it. Sorry I know so little.
Title: Re: How do you include icons with custom profile fields?
Post by: GL700Wing on January 13, 2023, 12:54:15 AM
1.  Resize images to required display dimensions and save to a folder/directory with read permissions for everyone.
2.  Create a custom profile field with the following in the 'Show Enclosed Within Text (Optional):' text box:
<img src="https://mywebsite.com/forum/cpf_images/{INPUT}.jpg" alt="{INPUT}"></img>where 'mywebsite.com/forum/cpf_images' is the full pathname of the folder/directory the images were saved to in Step 1.
3. Select 'Radio Button' as the 'Field Type'.
4.  Create an option for each of the images that can be selected - this is the case-sensitive filename without the filename suffix (eg, .jpg).


As per the example shown in the attached images JPG images of some actors were copied to the cpf_images folder/directory and a custom profile field was created to display an image on the topic view (and also in the profile).
cpf_images-1.jpgcpf_images-2.jpgcpf_images-3.jpg   
Title: Re: How do you include icons with custom profile fields?
Post by: Random Username on January 13, 2023, 08:12:16 AM
Thank you very, very much!!   8)
Title: Re: How do you include icons with custom profile fields?
Post by: Steve on January 13, 2023, 10:43:45 AM
So this topic can be marked solved then? Or do you still have questions regarding this?
Title: Re: How do you include icons with custom profile fields?
Post by: Random Username on January 13, 2023, 11:05:34 AM
Hi, had question but solution came to my typing it out. Added {INPUT} to the beginning of the code in the "Show Enclosed Within Text (Optional):" to provide a text label next to each icon when displayed in posts.

Thank you very much.
Title: Re: How do you include icons with custom profile fields?
Post by: Random Username on January 13, 2023, 01:11:18 PM
I'm afraid I marked it solves a ta early. I can't seem to capitalize the first letter of my text labels. I would appreciate a tad more help here, pretty please.  8)

Thank you
Title: Re: How do you include icons with custom profile fields?
Post by: Random Username on January 13, 2023, 02:45:37 PM
Solved. Made error in path is all.
Title: Re: How do you include icons with custom profile fields?
Post by: Random Username on January 21, 2023, 07:13:26 AM
Follow up question: How can I include spaces within the label for each icon!

Thank you again!
Title: Re: How do you include icons with custom profile fields?
Post by: Random Username on January 23, 2023, 11:58:10 PM
So I set up a flag for every country. It's super cool, showing a flag in their profile and memberlist. But it would be a lot more polished if I could include spaces in the country names. Currently the country name must match the filename to call the image. When it's done, I will share it as a modification package, though I might need a bit of help there too, I'm afraid. Still, it should save people the tedious work. Here is what I have now:

{INPUT} <img src="https://mysite/Themes/default/images/countries/{INPUT}.png" alt="{INPUT}"/>
The popup instructions include this, and I've tried playing with it to no avail: {KEY} - Used when a field has multiple options, is the unique numeric ID used to identify it.

I'd super appreciate a bit more help.