Epic Worlds

I had already posted this once before but I lost my blog and hadn't run the back up where that post was located.

So! What is this? Awhile ago I realized that with the way the internet is, people being caught off guard by things, I realized that it would be important to have some sort of safety for those who use writefreely and may have NSFW images on their blog.

What this code does is allow you to add to an image a nsfw class that blurs the image and makes it visible if it clicked on.

NOTE: This only works on the website itself. If you post the link to your social media, it'll show the nsfw image if that is your primary image.

How do you do this? Try this out! There are two methods. One for the selfhosted instance and the other is if you have an account with write.as.

Self-host Method

This is going to be how you will add the NSFW image filter on your selfhosted writefreely instance. You'll need to edit the following files:

• collection.tmpl
• collection-post.tmpl
• chorus-collection.tmpl
• chorus-collection-post.tmpl

When you set it up, make sure you put the css in the header of the document and the javascript after </body>.

Too use either of these methods, you'll want to add the class="nsfw" to the image. For example, it would look like <img src="image.ext" alt="FileName" class="nsfw" />

Javascript

	<script>
		document.addEventListener("DOMContentLoaded", () => {
			const nsfwImages = document.querySelectorAll("img.nsfw");

			nsfwImages.forEach(img => {
				// Create wrapper
				const wrapper = document.createElement("div");
				wrapper.classList.add("nsfw-wrapper");

				img.parentNode.insertBefore(wrapper, img);
				wrapper.appendChild(img);

				// Create overlay
				const overlay = document.createElement("div");
				overlay.classList.add("nsfw-overlay");
				overlay.textContent = "NSFW — Click to Reveal";
				wrapper.appendChild(overlay);

				wrapper.addEventListener("click", () => {
					wrapper.classList.toggle("revealed");
				});
			});
		});
	</script>

CSS

<!-- NSFW ADDITION --> 
	<style>
	.nsfw-wrapper {
		position: relative;
		display: inline-block;
	}

	.nsfw-wrapper img.nsfw {
		filter: blur(20px);
		transition: filter 0.3s ease;
		cursor: pointer;
	}

	.nsfw-wrapper.revealed img.nsfw {
		filter: blur(0);
	}

	.nsfw-overlay {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		color: white;
		font-size: 1.1rem;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		pointer-events: none;
		border-radius: 4px;
		transition: opacity 0.2s ease;
	}

	.nsfw-wrapper.revealed .nsfw-overlay {
		opacity: 0;
	}
	</style>
	<!-- END OF NSFW -->

Write.as method

This is the easiest one to do as Write.as already has a place that you can put your javascript.

All you need to put in the javascript section is:

(function () {
  function initNSFW() {
    document.querySelectorAll("img.nsfw").forEach(img => {
      // Prevent double-wrapping
      if (img.parentElement.classList.contains("nsfw-wrapper")) return;

      const wrapper = document.createElement("span");
      wrapper.className = "nsfw-wrapper";

      const overlay = document.createElement("div");
      overlay.className = "nsfw-overlay";
      overlay.textContent = "NSFW. Please click to view";

      img.parentNode.insertBefore(wrapper, img);
      wrapper.appendChild(img);
      wrapper.appendChild(overlay);

      wrapper.addEventListener("click", () => {
        wrapper.classList.toggle("unblurred");
      });
    });
  }
  initNSFW();
  document.addEventListener("DOMContentLoaded", initNSFW);
})();

And the CSS you want to add in the CSS section is:

/* ==============================
   NSFW Labels
============================== */
/* NSFW image blur system */

.nsfw-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.nsfw-wrapper img {
  filter: blur(18px);
  transition: filter 0.25s ease;
  display: block;
}

.nsfw-wrapper.unblurred img {
  filter: none;
}

.nsfw-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 0.5em;
  pointer-events: none;
}

.nsfw-wrapper.unblurred .nsfw-overlay {
  display: none;
}

Ending

There you go! Enjoy!

Discuss...