Spoiler Tags Plugin v1.0

Tongara · Post by **Tongara** » 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:

Code: Select all

<script src="//cdn.jsdelivr.net/npm/details-polyfill@1/index.min.js" async></script>

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.

Arvid · Post by **Arvid** » Sun Apr 19, 2020 10:55 am

This is pretty cool

Would you like to add it to the plugins page on the wiki?

fraenkiman · Post by **fraenkiman** » Sat Oct 15, 2022 8:51 pm

Hello, everyone,

I took the liberty of creating a wiki article for Tongara's plugin.

In addition, in v1.0.1 it is no longer necessary to manually place the polyfill JavaScript in the body.

Have fun with the plugin

Best regards
Frank

Arvid · Post by **Arvid** » Sun Dec 11, 2022 1:26 pm

A little suggestion: The plugin crashes if the BBCode plugin is not activated. Solution is easy, just check for the existance of plugin_bbcode_init():

Code: Select all

function plugin_spoilertags() {
	if (!function_exists('plugin_bbcode_init')) {
		return;
	}
	$bbcode = plugin_bbcode_init();

All the best,
Arvid

fraenkiman · Post by **fraenkiman** » Wed Dec 14, 2022 12:06 am

Hello Arvid,

thank you very much for your hint and the solution

.
The fix for the plugin is complete and available for download on the wiki.

With best regards
Frank

Shatter · Post by **Shatter** » Sat Dec 17, 2022 6:46 pm

I was wondering if there is a way to change the look of the spoiler title?
Something in the flavor of changing the triangle to a different image or icon
and changing the color of the font?

Thanks in advance

fraenkiman · Post by **fraenkiman** » Sat Dec 17, 2022 11:58 pm

Hello Shatter,

you can do that via stylesheet. You can experiment around with the following spoilertags.css:

Code: Select all

details > summary {
    list-style-type: none;
    color: #B83C32; /* Colors of the font of the spoiler title */
    font-weight: bold; 
    text-decoration: none;
    cursor: pointer;
}

details > summary::-webkit-details-marker { /* FIX for Safari */
    display: none;
}

details > summary::before {
    /* content: '▶'; */
    content: url(../../../fp-plugins/spoilertags/img/expand_right.png); /* Image as expand sign; size is not scalable !!! */
    vertical-align: top;
}

details[open] > summary::before {
    /* content: '▼'; */
    content: url(../../../fp-plugins/spoilertags/img/expand_down.png); /* Image as expand sign; size is not scalable !!! */
    vertical-align: top;
}

details {
    display: block; /* Do not deactivate !!! */
    border: #ccc solid 1px; /* Framing of the hidden content inside the spoiler tag */
    border-radius: 3px;
    padding: 5px;
}

details:hover {
    border: #999 solid 1px;
}

details[open] > summary {
    margin-bottom: 5px;
    font-style: italic; /* italic font of spoiler title when expanded '▼' */
}

I recommend to test the changes with different browsers.

With best regards
Frank

FlatPress support forum

Spoiler Tags Plugin v1.0

Spoiler Tags Plugin v1.0

Re: Spoiler Tags Plugin v1.0

Re: Spoiler Tags Plugin v1.0

Re: Spoiler Tags Plugin v1.0

Spoiler Tags Plugin v1.0.2

Re: Spoiler Tags Plugin v1.0

Re: Spoiler Tags Plugin v1.0

Who is online