NSFW Image Blur WP Plugin

README.md

NSFW Image Plugin

This is an untested WordPress plugin done as an example for a reddit answer found here: https://www.reddit.com/r/Wordpress/comments/absiu0/anyone_knows_how_to_make_an_image_blurry_until/

WARNING

I wrote this in the GIST editor and have yet to test it on a WP Install. Please install at your own risk.

Installation

Download all files and upload in a single folder under /wp-content/plugins/

Within the wp-admin, activate the plugin.

Usage

[nsfw_blur] <img src="https://placekitten.com/640/480" alt="It's a cat!"> [/nsfw_blur]

imgblur.css

.nsfw.blur img {
  filter: blur(20px);
}

imgblur.js

jQuery(function() {

  if (jQuery('.nsfw').length > 0) {
    jQuery('.nsfw').on('click', function(e) {
      e.preventDefault();
      jQuery(this).toggleClass('blur');
    });
  }

});

nsfw-img-blur.php

<?php
/*
Plugin Name: NSFW Image Blur
Plugin URI: https://gist.github.com/tmort/19fa30f909af21a514bfe6a3893a7522/
Description: Shortcode to blur images wrapped in shortcode tag [nsfw_blur]
Version: 0.1.0
Author: Tom
Author URI: http://github.com/tmort
*/

/*
This was created for https://www.reddit.com/r/Wordpress/comments/absiu0/anyone_knows_how_to_make_an_image_blurry_until/
This has been untested in WP Environment.
*/

// https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts 

define('IMGBLUR_PATH', plugin_dir_path(__FILE__));

add_action( 'wp_enqueue_scripts', 'imgblur_enqueue' );
function imgblur_enqueue() {
	wp_enqueue_script( 'imgblur-js', IMGBLUR_PATH.'/imgblur.js', array('jQuery'), true );
	wp_enqueue_style( 'imgblur-css', IMGBLUR_PATH.'/imgblur.css', array(''), false, 'all' );
}

// https://codex.wordpress.org/Shortcode_API
/*
Usage: [nsfw_blur] <img src="https://placekitten.com/640/480" alt="It's a cat!"> [/nsfw_blur]
Output: <div class="nsfw blur"><img src="https://placekitten.com/640/480" alt="It's a cat!"></div>
*/
add_shortcode( 'nsfw_blur', 'nsfw_blur_func' );
function nsfw_blur_func( $atts, $content ){
	return "<div class='nsfw blur'>".$content."</div>";
}

Thank you! Works great!

I added some CSS to it:
.nsfw.blur {
overflow: hidden; */so the blur stays inside the box */
background: #23282d;
margin: 0.4em 0; */ to get the same margins as a paragraph */
}
.nsfw.blur img {
display: block;
}

Everything works except the blur. I really need something like this. HELP!