- ┈┈ About
- ┈┈ Requirements
- ┈┈ Demo
- ┈┈ Install / How to Use
- ┈┈ Extra styling
- ┈┈ 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:
🔍 spoilertags.gitlab.io/s/v3/demo
Demo Code:
📝 jsfiddle.net/glenthemes/4h1n3g7r/
💡 spoilerTags has had a couple previous versions if you need to use the old one(s):
※ 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/v3/filter.js"></script>
<link href="//spoilertags.gitlab.io/s/v3/style.css" rel="stylesheet">
<script>
spoilerTagsV3({
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-Text-Color:#50586c;
--Spoiler-Warning-Text-Align:center;
--Spoiler-Warning-Row-Spacing:1.35em;
--Spoiler-Tags-Color:#222222;
--Spoiler-Button-Padding:0.7rem;
--Spoiler-Button-Background:#ffffff;
--Spoiler-Button-Border-Size:1px;
--Spoiler-Button-Border-Color:#eeeeee;
--Spoiler-Button-Roundness:4px;
--Spoiler-Button-Text-Color:#444444;
--Spoiler-Button-HOVER-Border-Color:#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:1s;
--Posts-Min-Height:200px;
} /* do not delete this bracket */
</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
yes
orno
stays 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
:
If you wish to style parts of the spoiler overlay further (e.g. fonts), you can press Enter after } /* do not delete this bracket */
and paste:
.spoilertags .screen {
/* additional styling for the spoiler overlay */
}
.spoilertags .message {
/* additional styling for the spoiler message */
}
.spoilertags .tags {
/* additional styling for filtered tags detected */
}
.spoilertags button {
/* additional styling for the "show anyway" button */
}
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