- ┈┈ About
- ┈┈ Requirements
- ┈┈ Demo
- ┈┈ Install / How to Use
- ┈┈ Help / Troubleshooting
Originally created for Tumblr use, spoilerTags() is a tag-filtering plugin for blog themes based on the existing tag filtering system for the Tumblr dashboard. You can set your own tags to filter, and if a post contains those tags, it will cover it up with a warning message, which readers can dismiss by clicking a button if they still wish to proceed. This is helpful for your followers or passers-by who wish to go through your blog without being spoiled, or seeing something they potentially might not want to see.
Author: @ glenthemes
View on Tumblr: glenthemes.tumblr.com/post/648322958817902592/spoilertags
※ this plugin is not exclusive to Tumblr, and can also be used on other sites for temporarily hiding particular content.
- As of October 2023, jQuery is no longer required 🎉
- Basic CSS & HTML knowledge is a plus.
Demo Preview:
🔍 jsfiddle.net/glenthemes/4h1n3g7r/show
Demo Code:
📝 jsfiddle.net/glenthemes/4h1n3g7r/
💡 If you're here for the jQuery version of spoilerTags, please read the old docs!
※ The following instructions are for Tumblr users.
🌸 Step 1 — Find your posts:
Start by finding {block:Posts} or {block:Posts in your theme code.
If you see {block:PostSummary}, ignore that.
Once you've found it, add posts-selector, like so:
<div class="posts" posts-selector>🌸 Step 2 — Find your tags:
Find {Tag} in your theme. That line and its surrounding lines should look something like this:
{block:Tags}
<a href="{TagURL}">{Tag}</a>
{/block:Tags}Add init-tags, like so:
{block:Tags}
<a href="{TagURL}" init-tags>{Tag}</a>
{/block:Tags}🌸 Step 3 — Adding the essentials:
Paste the following after <head>:
<!--✻✻✻✻✻✻ spoilerTags by @glenthemes ✻✻✻✻✻✻-->
<script src="//spoilertags.gitlab.io/s/v2/filter.js"></script>
<link href="//spoilertags.gitlab.io/s/v2/style.css" rel="stylesheet">
<script>
document.addEventListener("DOMContentLoaded", () => {
spoilerTagsV2({
filter: [
"#spoiler",
"#spoilers",
],
message: "This post contains the following:",
includeHashtag: "yes",
tagSeparator: ", ",
viewPostText: "show anyway",
shrinkPosts: "yes"
})
})
</script>
<style spoilertags>
:root {
--Spoiler-Overlay-Color:#ffffff;
--Spoiler-Warning-Padding:25px;
--Spoiler-Warning-Color:#50586c;
--Spoiler-Warning-Row-Spacing:1em;
--Spoiler-Tags-Color:#222222;
--Spoiler-Button-Padding:0.7rem;
--Spoiler-Button-Background:#ffffff;
--Spoiler-Button-Border:#eeeeee;
--Spoiler-Button-Roundness:4px;
--Spoiler-Button-Text-Color:#444444;
--Spoiler-Button-HOVER-Border:#222222;
--Spoiler-Button-HOVER-Background:#222222;
--Spoiler-Button-HOVER-Text-Color:#efefef;
--Spoiler-Button-HOVER-Speed:0.25s;
--Spoiler-Fade-Speed:0.4s;
--Shrink-Posts-Speed:0.8s;
}
.show-spoiler button {
font-family:inherit;
text-transform:uppercase;
letter-spacing:1px;
font-size:12px;
cursor:help;
}
</style>🌸 Step 4 — Change the tags you want filtered:
From the code we pasted from the previous step, you can set your tags here:
Things to note:
- Each line represents one tag.
- Make sure that each tag stays inside the quotation marks.
- Make sure each tag has a comma
,at the end. - Your list of tags should stay inside the square brackets area
[ ].
🌸 Step 5 — Warning message:
Things to note:
- Make sure that message stays inside the quotation marks.
- Do not remove the comma
,at the end.
🌸 Step 6 — Include/Exclude hashtag:
Declare whether you want a hashtag # to precede each tag or not.
| Available Options: | What it looks like |
|---|---|
yes |
 |
no |
 |
Things to note:
- Make sure that
yesornostays inside the quotation marks. - Do not remove the comma
,at the end.
🌸 Step 7 — Tag separator:
Declare how you want multiple tags to be separated.
Things to note:
- Make sure that your separator (including any spaces) stays inside the quotation marks.
- Do not remove the comma
,at the end.
🌸 Step 8 — "Show Anyway" button text:
Things to note:
- Make sure that your button text stays inside the quotation marks.
- Do not remove the comma
,at the end.
🌸 Step 9 — Shrink posts
Declare whether or not you want long posts to shrink/shorten.
🌸 Step 10 — Customize Appearance
Colors, padding, hover speeds etc can be customized in this list called :root:
Please contact me on Discord (discord.gg/RcMKnwz) either through DM or in the #theme-help channel of my server!
When asking for help, please remember to include:
- What theme you're using (if applicable), and by who.
- Full theme code, you can paste it through pastery.net.
- Summary of what you're trying to do / what you're stuck on!
If you found spoilerTags useful, please consider dropping me a tip! ✨
☕ ko-fi.com/glenthemes