BbCode pages

BbCode pages [Paid] 1.1.1

No permission to buy ($25.00)

Xon

Well-known member
Xon submitted a new resource:

BbCode pages - Enhance pages with bb-code

Adds a "bb-code mode" to Page node type, which supports bb-code and attachments, with edit history support.

Page nodes in 'bb-code mode' support editing via the front-end, in addition to the admincp.

The original "template" data is updated with the HTML of what a guest would see for that bb-code.

Permissions;
  • View attachments to pages
  • Can edit any page
  • Upload attachments to pages
  • Upload videos to pages
  • Attachment Size (kb)
  • Maximum Attachment Count

Read more about this resource...
 

Russ

Well-known member
Thanks Xon! This makes editing pages a breeze. We're converting our documentation over to these pages and it has been a pleasure. This is a little preview of how it works:

gGIZ8tgR3y.gif
 
Last edited:

Xon

Well-known member
Xon updated BbCode pages with a new update entry:

1.0.3 - Bugfix update.

  • Fix handling of when an admin edits a non-bb-code page and saves it as bb-code. This fixes cases where attachment counter bugs count and doesn't correctly work.

    When an admin edits a non-bb-code page from the front-end, the existing template will be rendered to html and then to bb-code. This is a lossy and not particularly reliable process, so it is recommended the original template contents is kept on hand to be manually converted to bb-code

Read the rest of this update entry...
 

Kevin

Well-known member
Is there a recommended way of managing sidebars? Over the next few months I'll be creating a bunch of pages that look like the stock XF layout of having a main content area and then a right sidebar.

EDIT: I should mention, I'm not planning on using widgets in the sidebars as the content of each pages sidebar will be static content unique to the individual page so I just need to do the layout.
 

Xon

Well-known member
Pages have limitede capacity to influence how the side-bars display in the admincp.
 

Xon

Well-known member
After saving as raw html, check the template _page_node.120 that is has the expected contents.
 

sixlxvi

Well-known member
Brilliant add on.

Does it work with help pages?

Just the page node-type.

Actually, it's worth noting that it kind of can! The add-on takes the BB code and converts it to HTML which you can then simply paste into Help pages, HTML templates, widgets, etc. Because the add-on converts BB code to HTML so well, I think you should add that to its description, Xon. More people should know about the utility of this!

For example, the add-on with output all this crazy HTML from what I made with BB code:
HTML:
<div class="bbTable">
<table style='width: 100%'><tr><th></th><th><div style="text-align: center"><b><span style="font-size: 18px">Regular Member</span></b>&#8203;</div></th><th><div style="text-align: center"><span style="font-size: 18px"><span style="color: rgb(44, 130, 201)">Tacoma3G Supporter</span></span>&#8203;</div></th></tr><tr><td><div style="text-align: right">add new posts &amp; threads:&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr><tr><td><div style="text-align: right">search all posts &amp; threads:&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr><tr><td><div style="text-align: right">edit your posts:&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr><tr><td><div style="text-align: right">edit profile details:&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr><tr><td><div style="text-align: right">buy, sell, trade items:&#8203;</div></td><td><div style="text-align: center">yes, limited&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr><tr><td><div style="text-align: right">participate in giveaways:&#8203;</div></td><td><div style="text-align: center">yes, limited&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr><tr><td><div style="text-align: right">upload photos &amp; videos to posts:&#8203;</div></td><td><div style="text-align: center">photos only&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr><tr><td><div style="text-align: right">use private messaging:&#8203;</div></td><td><div style="text-align: center">receive only&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr><tr><td><div style="text-align: right">add profile avatar &amp; banner image:&#8203;</div></td><td><div style="text-align: center">avatar only&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr><tr><td><div style="text-align: right">change website colors &amp; use dark mode:&#8203;</div></td><td><div style="text-align: center">light/dark only&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr><tr><td><div style="text-align: right">use push notifications:&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="✖️" title="Multiplication sign    :heavy_multiplication_x:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2716.png" data-shortname=":heavy_multiplication_x:" />&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr><tr><td><div style="text-align: right">use custom user title in posts:&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="✖️" title="Multiplication sign    :heavy_multiplication_x:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2716.png" data-shortname=":heavy_multiplication_x:" />&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr><tr><td><div style="text-align: right">change username:&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="✖️" title="Multiplication sign    :heavy_multiplication_x:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2716.png" data-shortname=":heavy_multiplication_x:" />&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr><tr><td><div style="text-align: right">use built-in forum bookmarks system:&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="✖️" title="Multiplication sign    :heavy_multiplication_x:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2716.png" data-shortname=":heavy_multiplication_x:" />&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr><tr><td><div style="text-align: right">add custom signature to posts:&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="✖️" title="Multiplication sign    :heavy_multiplication_x:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2716.png" data-shortname=":heavy_multiplication_x:" />&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr><tr><td><div style="text-align: right">access private forum sections:&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="✖️" title="Multiplication sign    :heavy_multiplication_x:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2716.png" data-shortname=":heavy_multiplication_x:" />&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr><tr><td><div style="text-align: right">custom build thread URL:&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="✖️" title="Multiplication sign    :heavy_multiplication_x:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2716.png" data-shortname=":heavy_multiplication_x:" />&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr><tr><td><div style="text-align: right">blue username &amp; supporter badge:&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="✖️" title="Multiplication sign    :heavy_multiplication_x:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2716.png" data-shortname=":heavy_multiplication_x:" />&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr><tr><td><div style="text-align: right">access exclusive vendor discounts:&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="✖️" title="Multiplication sign    :heavy_multiplication_x:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2716.png" data-shortname=":heavy_multiplication_x:" />&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr><tr><td><div style="text-align: right">use new website features early:&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="✖️" title="Multiplication sign    :heavy_multiplication_x:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2716.png" data-shortname=":heavy_multiplication_x:" />&#8203;</div></td><td><div style="text-align: center"><img class="smilie smilie--emoji" loading="lazy" alt="☑️" title="Check box with check    :ballot_box_with_check:" src="https://cdn.jsdelivr.net/joypixels/assets/6.6/png/unicode/64/2611.png" data-shortname=":ballot_box_with_check:" />&#8203;</div></td></tr></table>
</div>

Which I can then paste wherever I want, allowing me to create this nice donating members benefits overlay (which is actually part of a different add-on by @Siropu:

1646839739200.png
 

sixlxvi

Well-known member
@Xon - found a couple bugs.

1. (This ended up being the answer to the question I had about the widget not displaying): If you edit the BB code part, then add HTML into the HTML part, the newly added HTML will not show on the frontend. Whether you add the BB code, save, then add the HTML, save - or add both BB code and HTML and then save only once, it won't show. It also won't show if you edit the template directly.

To get it to work, I had to clear all BB code and HTML and save, basically starting fresh. Only then could I add the BB code, save, add to the HTML, save, and see it on the frontend.

If this was confusing I can try to take a video of it.

2. Permissions behave odd: A page that is a child of a node where the node is private, inherits the privacy. Therefore, the page is private without manually making it as such. Standard XF behavior.

But with the add-on, the page will display red on the node permissions list, suggesting it has custom settings. I didn't give it custom settings but it had user permissions for my account showing. I didn't give myself explicit permissions. Clicking into those permission settings, all permissions are set to inherit, which is the XF default, which should = no explicit permissions are set and therefore should not show my name or the red text.

The reason this was happening was because of some confusion between the page permissions and the user / user group permissions. I assume having permissions to use BB code pages as a user or user group was making the page permissions think it was no longer default.


Request:

I don't know how difficult this would be, but could you create a second version of this add-on that only does the conversion part and is not built into the pages on the back or frontend? I really like the BB code to HTML conversion because it lets me paste the HTML in all sorts of widgets, pages, templates, etc. So I have been using it more for that than anything. It would be handy to have a stripped down version that only provides the converter.
 

Xon

Well-known member
1. (This ended up being the answer to the question I had about the widget not displaying): If you edit the BB code part, then add HTML into the HTML part, the newly added HTML will not show on the frontend. Whether you add the BB code, save, then add the HTML, save - or add both BB code and HTML and then save only once, it won't show. It also won't show if you edit the template directly.

To get it to work, I had to clear all BB code and HTML and save, basically starting fresh. Only then could I add the BB code, save, add to the HTML, save, and see it on the frontend.

If this was confusing I can try to take a video of it.
I think the confusion is the add-on isn't really designed to switch between bb-code mode => html like that so gets a little confused in it's state tracking.

2. Permissions behave odd: A page that is a child of a node where the node is private, inherits the privacy. Therefore, the page is private without manually making it as such. Standard XF behavior.

But with the add-on, the page will display red on the node permissions list, suggesting it has custom settings. I didn't give it custom settings but it had user permissions for my account showing. I didn't give myself explicit permissions. Clicking into those permission settings, all permissions are set to inherit, which is the XF default, which should = no explicit permissions are set and therefore should not show my name or the red text.

The reason this was happening was because of some confusion between the page permissions and the user / user group permissions. I assume having permissions to use BB code pages as a user or user group was making the page permissions think it was no longer default.
This is standard XF node behaviour. Private nodes without any permissions still show up as red/marked as customized.
 

sixlxvi

Well-known member
This is standard XF node behaviour. Private nodes without any permissions still show up as red/marked as customized.
Right, but this was a node without customized permissions that is a child of a node that does have the private setting.

1647046707703.png

The two nodes that say [TEST] were showing as red but with the add-on disabled, they go back to normal like this. Either way, not a big deal.
 
Top