Spoiler Tags Plugin v1.0
Posted: Fri Mar 06, 2020 2:32 am
So, I've created my first plugin. As per the title, this plugin adds spoiler tags to Flatpress that you can use in posts and static pages. It was made with help from the "BBCode Plugin Tips" on the wiki, and requires the BBCode plugin by Hydra & NoWhereMan that comes as standard with Flatpress.
I found a post on the old Flatpress archive forum asking for this all the way back in 2012, but no one ever answered or took up the challenge. I decided to change that, and you can download my plugin by clicking HERE.
With this post, I'll teach you how to use my Flatpress Spoiler Tags Plugin.
Below is a standard spoiler tag. You can use it by simply wrapping your content in [spoiler][/spoiler] tags.
The spoiler has a default text of "Spoiler", as shown below:
When clicked, it looks like this (what you will see will vary by whatever you put between the tags):
You can define the text of the clickable spoiler field by defining the attribute like [spoiler=YourText] on the opening of the tag.
This can be seen below with the word "Spoiler1":
Sadly, BBCode doesn't allow spaces in attributes and will stop parsing after the first word. Luckily, we can use a workaround to add a space to our spoiler attribute using an " " between words.
This is shown below with the words "Spoiler 2":
You can style the spoiler very easily by editing the spoiler.css file found in the plugin's /res folder. The code uses HTML5's "<details>" and "<summary>" elements, making it very easy to create hidden content on websites.
Sadly, these elements currently don't work for users of Internet Explorer, but according to user "Finesse" on THIS post on a StackOverflow question on this issue, adding the following polyfill inside the "<body>" of your blog will fix this:
You can generally find the "<body>" tag in your theme's header.tpl file.
That's it, I hope you enjoy using the plugin!
You can see a live example of it working at https://www.clockworkknight.com/flat/?x ... 306-031247
Credit of course goes to Hydra & NoWhereMan for their BBCode plugin that comes as standard with Flatpress, the "BBCode Plugin Tips" on the wiki, and of course "Finesse" from StackOverflow for the Internet Explorer fix.
I found a post on the old Flatpress archive forum asking for this all the way back in 2012, but no one ever answered or took up the challenge. I decided to change that, and you can download my plugin by clicking HERE.
With this post, I'll teach you how to use my Flatpress Spoiler Tags Plugin.
Below is a standard spoiler tag. You can use it by simply wrapping your content in [spoiler][/spoiler] tags.
The spoiler has a default text of "Spoiler", as shown below:
When clicked, it looks like this (what you will see will vary by whatever you put between the tags):
You can define the text of the clickable spoiler field by defining the attribute like [spoiler=YourText] on the opening of the tag.
This can be seen below with the word "Spoiler1":
Sadly, BBCode doesn't allow spaces in attributes and will stop parsing after the first word. Luckily, we can use a workaround to add a space to our spoiler attribute using an " " between words.
This is shown below with the words "Spoiler 2":
You can style the spoiler very easily by editing the spoiler.css file found in the plugin's /res folder. The code uses HTML5's "<details>" and "<summary>" elements, making it very easy to create hidden content on websites.
Sadly, these elements currently don't work for users of Internet Explorer, but according to user "Finesse" on THIS post on a StackOverflow question on this issue, adding the following polyfill inside the "<body>" of your blog will fix this:
Code: Select all
<script src="//cdn.jsdelivr.net/npm/details-polyfill@1/index.min.js" async></script>
That's it, I hope you enjoy using the plugin!
You can see a live example of it working at https://www.clockworkknight.com/flat/?x ... 306-031247
Credit of course goes to Hydra & NoWhereMan for their BBCode plugin that comes as standard with Flatpress, the "BBCode Plugin Tips" on the wiki, and of course "Finesse" from StackOverflow for the Internet Explorer fix.