Atte Liimatainen

<p>Generates base64 encoded, downscaled and blurred versions of media library’s images, which can be used f.e. as a placeholder.</p>
<h3>Inspiration</h3>
<p>After Wolt showcased their <a href="https://blurha.sh/" rel="nofollow ugc">Blurhash</a> technique, I wanted to make something similar to WordPress. Instead of encoding images to base83 like the food delivery company does, I went with base64 so development experience was easier.</p>
<h3>How to start using the plugin</h3>
<ul>
<li>Install and activate this plugin in your environment
<ul>
<li>The plugin should generate blurs for each image on the activation.</li>
</ul>
</li>
<li>Check an image’s details in your media library. It should have listing of all generated blurs.</li>
<li>To get a blur to a template, use <code>get_post_meta()</code>. Check example theme in <a href="https://github.com/AttLii/image-blur" rel="nofollow ugc">plugin’s repository</a></li>
</ul>
<h3>Customization</h3>
<p>The plugin provides few filters, so developers can modify generated blur images to their needs. By default, generated images are 8 pixels wide and passed once through gaussian blur function, which will result in roughly 250-1000 characters long string. To change these, use following hooks:</p>
<pre><code>function modify_image_blur_width( int $width ): int {
  return 15;
}
add_filter("image-blur-modify-width", "modify_image_blur_width");

function modify_gaussian_blur_strength( int $strength ): int {
  return 10;
}
add_filter("image-blur-modify-gaussian-blur-strength", "modify_gaussian_blur_strength");
</code></pre>


Image Blur

Generates base64 encoded, downscaled and blurred versions of media library's images, which can be used f.e. as a placeholder.

LingoJon

<p>Firefox allows a user to drag and drop an image from their desktop into the TinyMCE editor (Visual), where it is immediately converted to base64 code, which is undesirable as the image file size is much larger than the equivalent added by the standard WordPress method because…</p>
<ul>
<li>base64 images are larger than binary images</li>
<li>WordPress would normally have ‘crunched’  the image to give various different sizes, including a thumbnail, all smaller than the original</li>
</ul>
<p>To prevent this, “TinyMCE remove-base-64-image” contains a small piece of javascript that checks the TinyMCE editor every 1.5 seconds and immediately removes any base64 image found, also displaying an alert message:</p>
<p>‘Sorry, dragging images into the editor is blocked as it will cause your webpages to load slowly, please use the “Add Media” button!’.</p>
<p>If you manage multiple WordPress sites this plugin will save you time checking if your clients are unwittingly crippling their page downloads.</p>
<p>A <a href="http://www.pixeltiger.co.uk/program.html" rel="nofollow ugc">PixelTiger</a> plugin.</p>
<h3>Developer Notes</h3>
<p>I am aware that using setInterval to detect a freshly dropped image is not ideal from a theoretical standpoint as most of the time it’s unnecessary and it could impact TinyMCE performance, albeit by a tiny amount.  If you check the TinyMCE forums you will find another suggested method: <a href="http://www.TinyMCE.com/forum/viewtopic.php?id=5090" rel="nofollow ugc">Disable drag/drop facility</a> (last post by Arvind, 2012-07-09) which involves modifying tiny_mce.js to detect the DOMNodeInserted event then deleting the new image node.  While this seems sound, if you try to locate the ‘_addEvents function section’ mentioned you’ll find it’s not in tiny_mce.js version 3.5.8-wp. I also searched the TinyMCE documentation for a way to bind this event in a plugin, but no joy there either.</p>
<p>So if you’re a javascript genius feel free to make this plugin redundant with a DOM checking one.  Until that time arrives I hope people find this useful.</p>


TinyMCE remove-base-64-image

"TinyMCE remove-base-64-image" immediately removes images dropped into the TinyMCE editor with Firefox and alerts the user with the reason.

Image Blur vs TinyMCE remove-base-64-image