Printable Version of Topic
Click here to view this topic in its original format
Jcink.com Forums > General Support > how to allow html / css / bbcode in a custom profile field?


Posted by: oakhearted Jul 11 2018, 02:31 AM
Just curious because here's my profile so far
this is the field which i want to allow html, css and bbcode!

<!-- |field_5| -->

https://birding.jcink.net/index.php?showuser=1

please help me out with this

thank you!

Posted by: Cory Jul 11 2018, 01:32 PM
Admin CP → System Settings → User Profiles → Allow HTML in Custom Profile Fields?

Doesn't look like there's an option for BBCode, but you can make BBCode work in custom profile fields with JavaScript.

Posted by: owl Jul 11 2018, 03:04 PM
QUOTE (Cory @ Jul 11 2018, 01:32 PM)
Doesn't look like there's an option for BBCode, but you can make BBCode work in custom profile fields with JavaScript.


Word?

Posted by: Heaven is a Halfpipe Jul 11 2018, 03:40 PM
QUOTE (owl @ Jul 11 2018, 08:04 PM)
QUOTE (Cory @ Jul 11 2018, 01:32 PM)
Doesn't look like there's an option for BBCode, but you can make BBCode work in custom profile fields with JavaScript.


Word?


I wouldn't mind if you made that code, Cory.

Posted by: John Jul 11 2018, 06:20 PM
QUOTE (Cory @ Jul 11 2018, 01:32 PM)
Admin  CP → System Settings → User Profiles → Allow HTML in Custom Profile Fields?

Doesn't look like there's an option for BBCode.

Just confirming that this observation is correct. There is no option to allow BBCode, only HTML.

Posted by: Cory Jul 12 2018, 12:39 AM
What BBCode's would y'all like to use in custom profile fields?

Posted by: Heaven is a Halfpipe Jul 12 2018, 01:21 AM
QUOTE (Cory @ Jul 12 2018, 05:39 AM)
What BBCode's would y'all like to use in custom profile fields?


For me, I'd say just the basics. Color, bold, italics, underline.

Posted by: Cory Jul 12 2018, 01:29 AM
Before creating the code, I'll allow up to 24 hours for more feedback.

Posted by: owl Jul 12 2018, 12:00 PM
CODE
Bold, italics, and underlined text - in that order. If possible, the [LIST]to <ul> (edit, and [/list] to </ul>) and [*] to <li> would be super helpful and amazing. Are you looking to post this code on your site? I need to go back through and finish my registration.

Posted by: Cory Jul 12 2018, 12:09 PM
I'll release the code on my board and post it here.

Posted by: Cory Jul 13 2018, 05:28 AM
Styles: Bold, Underline, Italic, Color

CODE
<script>
//<![CDATA[
$('#profile-customfields div.row2:contains([/), span.postdetails:contains([/)').each(function() {
   $(this).html($(this).html().replace(/\[b\](.+?)\[\/b\]/ig, '<strong>$1</strong>').replace(/\[u\](.+?)\[\/u\]/ig, '<span style="text-decoration: underline">$1</span>').replace(/\[i\](.+?)\[\/i\]/ig, '<em>$1</em>').replace(/\[color=(.+?)\](.+?)\[\/color\]/ig, '<span style="color: $1">$2</span>'));
});
//]]>
</script>

Lists: Will only work in the main profile when using a textarea field.

CODE
<script>
//<![CDATA[
$('#profile-customfields div.row2:contains([/)').each(function() {
   $(this).html($(this).html().replace(/\[list\]<br>/ig, '<ul>').replace(/\[\/list\]/ig, '</ul>').replace(/\[\*\](.+?)<br>/ig, '<li>$1</li>'));
});
//]]>
</script>

Hyperlinks:

CODE
<script>
//<![CDATA[
$('#profile-customfields div.row2:contains([/), span.postdetails:contains([/)').each(function() {
   $(this).html($(this).html().replace(/\[url=(.+?)\](.+?)\[\/url\]/ig, '<a href="$1" target="_blank">$2</a>'));
});
//]]>
</script>

Images:

CODE
<script>
//<![CDATA[
$('#profile-customfields div.row2:contains([/), span.postdetails:contains([/)').each(function() {
   $(this).html($(this).html().replace(/\[img\](.+?)\[\/img\]/ig, '<img src="$1" alt="" />'));
});
//]]>
</script>

Posted by: Dusty Jul 13 2018, 12:22 PM
Nice stuff Cory. If you're interested, you can also iterate over a set of provided tags to translate them without the need for a function per tag.

Although, genuine curiousity: RegExp can be pretty slow. I think it would be more performance-oriented to write a script that would translate these tags to html in the User CP itself, and then have another script on the front-facing site that would iterate over each relevant profile field and re-insert its text as HTML - a la $(this).html($(this).text()) - to save the 'heavy lifting' for the backend.

Posted by: owl Jul 13 2018, 07:24 PM
Redacted to relevant support forum.

Posted by: Cory Jul 15 2018, 01:15 AM
Dusty: The only reason I split them into different functions is to give users a choice of what BBCode's they want to enable in custom profile fields. I doubt everyone wants to use the same ones.

I like your idea, but it almost seems like using HTML in custom profile fields in the first place. If a user sees HTML tags after they edit their profile that contained BBCode tags, that could cause some confusion and make people think there's a bug. Plus, a lot of people don't know a thing about HTML, so they won't know what HTML tags do what.

'
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)