Add ReplyNew TopicNew Poll

 BBCode Requests, From a Zetaboard refugee
#
Hey, so I searched the subforum and couldn't find the information I was looking for regarding my questions. I run a Pokemon RP server that requires rather stylistic looking character biography posts, they use a variety of different types of BBcode and some CSS. I would like to know if it would be possible to implement BBcode the same way it works in ZetaBoards (like you type the code the same way) for a few different codes.

My ultimate goal is to be able to have my members create their character biographies on jcink or copy and paste them, and have them look just like they did on ZetaBoards.

The following codes that we would need are:
1. [table] [/ table] and [c]
I requested this in another thread that I wasn't sure of if they were asking for the same thing, but essentially it creates a neat bordered table, and the [c] act as divides between the information. So we'd be able to do [table=2]Info here[c]Info here[/ table] and it would create two columns, divided by a line.

2. [quote][/ quote] and [quote=insert title][/ quote] or [quote=title, more info][/ quote] (where the comma after title causes the 'more info' to appear on the right side of the quote bar. The title would be on the left side)

It basically creates a border around text, but can be used to surround tables and spoilers for a stylistic approach.

3. Flash player (can't post due to errors, but after the url you put ?autoplay=1?loop=1 to have it autoplay and loop infinitely)
This basically creates a youtube flash player that with the autoplay code and looping, makes it auto play once someone opens the thread, and it will loop. It's a cool method we use to give our character biographies 'theme songs' and it helps set the mood for certain roleplay scenarios (like ominous music for a villain scene). X and Y standing for width and height of the flash player, replaced with number values.

4. Spoilers that can be clicked to open up, contains text or images.

A link to an example of a character biography can be viewed here: http://w11.zetaboards.com/uPrp/topic/30516853/1/#new
It's on a white background that's much easier to see, as opposed to my other screenshots in the other thread. I'll attach screenshots as well. The biography is basically one giant quote, and inside it are more quotes, tables, and spoilers all sectioned off. The flash player is at the top in a quote itself.

Any help with this would be greatly appreciated, you'd definitely be saving my community!

(Sorry if you know all of this, just trying to be as descriptive as possible; I'm not familiar with jcinks features)

This post has been edited by Medic: Jul 11 2018, 05:46 PM

Attached 3 File(s)
Attached Image Attached Image Attached Image
PM
#
Hey there! There's actually a feature on Jcink that allows you to make your own BBcode and you can learn more about creating your own BBcode here.

Regarding #1 see this thread.




Theoretically, most of these could work except #2 since quote is already a function on here, for when some text is quoted. For example:

QUOTE
A basic quote


CODE
[quote]A basic quote[/quote]


QUOTE (Title here)
A basic quote with a title

CODE
[quote=Title here] A basic quote with a title [/quote]





In terms of #3, Flash players are dying out. However, if you want to add a code to add a Youtube video to a post you can create a BBcode for that:

<!-- start utube --><div class="utube" style="width: 500px; overflow: hidden; margin: 0 auto"><iframe width="500" height="315" src="//www.youtube.com/embed/(PARAM1)" frameborder="0" allowfullscreen></iframe></div><!-- end utube -->

I called my bbcode:

utube

And made it a 1 param bbcode. To use it, you take the string of characters after v= in the Youtube video URL, and put it into the code.

So for the video:

youtube.com/watch?v=NdiSbAaVICc

The code would look like:

[utube]NdiSbAaVICc[/utube]




Regarding #4, here's a 2 param custom BBcode you can set for that:

CODE
<!-- start toggle --><div class="toggle-wrapper"><div class="toggle-title" onclick="$(this).next().toggle()">(PARAM1)</div><div style="display:none" class="toggle-content">(PARAM2)</div></div><!-- end toggle -->





EDIT: Depending on how you want to handle it, Jcink also allows for custom profile fields (learn more here) and allows you to make your own profile template so if you like, you could use both to create a custom profile template, used for your character applications instead of posting them - that's actually what I do for my sites, cause I find it cleaner, and then members don't have to interact with code.

This post has been edited by owl: Jul 11 2018, 06:34 PM

signature
Kindly do not contact me on Discord or PM me for support.

user posted image
#
Thanks for the reply! I've set up the youtube player, but is there any way to have it autoplay or loop? Primarily just the autoplay feature is what I'd need.
PM
#
Try this instead:

CODE
<!-- start utube --><div class="utube" style="width: 500px; overflow: hidden; margin: 0 auto"><iframe width="500" height="315" src="//www.youtube.com/embed/(PARAM1)?autoplay=1&loop=1" frameborder="0" allowfullscreen></iframe></div><!-- end utube -->

signature
user posted image
#
QUOTE (Cory @ Jul 12 2018, 03:06 PM)
Try this instead:

CODE
<!-- start utube --><div class="utube" style="width: 500px; overflow: hidden; margin: 0 auto"><iframe width="500" height="315" src="//www.youtube.com/embed/(PARAM1)?autoplay=1&loop=1" frameborder="0" allowfullscreen></iframe></div><!-- end utube -->


Omg, thank you! This is perfect!
PM
#
So the only thing that I really need now would be the [table] and [c] BBcodes that are a staple feature of zetaboards.

Also, is there a way to implement the BBcode that lets you adjust image sizes?
On Zetaboards you could custom change the image sizes by doing
[i mg=x,y]image url[/img]
(Spaced img so it doesn't error)
PM
#
Tables:

QUOTE (owl @ Jul 11 2018, 05:54 PM)
Regarding #1 see this thread.


Also, this:

CODE
[img=x,y]image url[/img]


Would be a three parameter code. Like this:

CODE
[img=parameter one,parameter two]parameter three[/img]


And I don't think it can be accomplished, unless someone else has some Javascript knowledge that could help, or some solution I'm not seeing.

That being said, we can add one that can define the height (and keep the width in ratio) OR one that can define the width (and keep the height in ratio).


signature
Kindly do not contact me on Discord or PM me for support.

user posted image
#
Those alternatives would (defining height/width) would be beneficial! So basically we'd be able to adjust either the height or width, and it adjusts proportionally? (Just so I fully understand)
PM
#
Basically, you'd have to pick height or width (I tend to go for width, it's up to you), for the [img=100px]image here[/img] code. You can have an additional code with a different name for whatever you don't pick. Actually, I was able to develop one code to do both. Try this:

BBCode name: img
BBCode type: 2 Param Type
HTML conversion: <!-- start img size --><img style="height: auto; width: auto; (PARAM1)" src="(PARAM2)"><!-- end img size -->
Display on form: No

How to use it for height:

CODE
[img=height:100px]IMAGE HERE[/img]


How to use it for width:

CODE
[img=width:100px]IMAGE HERE[/img]


How to use it for height and width:

CODE
[img=width:100px;height:400px]IMAGE HERE[/img]


This post has been edited by owl: Yesterday at 08:09 pm

signature
Kindly do not contact me on Discord or PM me for support.

user posted image
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | Feature Requests | Next Newest »

Options Add ReplyNew TopicNew Poll