TinyMCE Image Opacity Control

TinyMCE Image Opacity ControlWhile building the “Services” page of our new website, I created 4 icons to visually indicate the four primary services offered by Eyedeal Graphics. I created the icons in Adobe Illustrator, exported them as PNG files and uploaded them to the WordPress media library. Once I placed all four icons into the page content in the WordPress visual editor, it occurred to me that my dark’ish grey color choice for the icons might be a little too dark and I would need to edit the icon artwork to make it a lighter grey color.

So the obvious solution was to edit the original Illustrator files to make them a lighter grey color and export new PNG files, but first, that would have been far too easy and second, I have been wanting an excuse to play around with extending the TinyMCE editor. TinyMCE is the WYSIWYG (What You See Is What You Get) editor that is bundled with WordPress and used as its visual editor. In truth, I wanted to see if I could add a control to the editor interface that would allow the user to change the opacity, of a selected image, in increments of 10 from 90% opaque to 10% opaque right within the visual editing experience.

 

Step 1

The first step in this three part process id adding the “Styles” drop down control to the visual editor tool bar. Including this interface control is a matter of updating the “functions.php” file to include the following code:

// Add style selector drop down 
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

function my_mce_buttons_2( $buttons ) {
	array_unshift( $buttons, 'styleselect' );
	return $buttons;
}

 

Step 2

The second step in this update is to add the options that will appear in this new custom control. After the section of code that you just added, simply paste the following:

// Add custom editor styles
	add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );

	function my_mce_before_init( $settings ) {

    	$style_formats = array(
    		array(
			'title' => 'Image Opacity',
			'items' => array(
		    	array(
		    		'title' => 'Image Opacity 90%',
		    		'selector' => 'img',
		    		'classes' => 'opacity-90'
		    	),
		    	array(
		    		'title' => 'Image Opacity 80%',
		    		'selector' => 'img',
		    		'classes' => 'opacity-80'
		    	),
		    	array(
		    		'title' => 'Image Opacity 70%',
		    		'selector' => 'img',
		    		'classes' => 'opacity-70'
		    	),
		    	array(
		    		'title' => 'Image Opacity 60%',
		    		'selector' => 'img',
		    		'classes' => 'opacity-60'
		    	),
		    	array(
		    		'title' => 'Image Opacity 50%',
		    		'selector' => 'img',
		    		'classes' => 'opacity-50'
		    	),
		    	array(
		    		'title' => 'Image Opacity 40%',
		    		'selector' => 'img',
		    		'classes' => 'opacity-40'
		    	),
		    	array(
		    		'title' => 'Image Opacity 30%',
		    		'selector' => 'img',
		    		'classes' => 'opacity-30'
		    	),
		    	array(
		    		'title' => 'Image Opacity 20%',
		    		'selector' => 'img',
		    		'classes' => 'opacity-20'
		    	),
		    	array(
		    		'title' => 'Image Opacity 10%',
		    		'selector' => 'img',
		    		'classes' => 'opacity-10'
		    	)
		)
	)
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;

}

 

Step 3

The third step in adding the new opacity functionality is updating the “styles.css” file of your website to support the “opacity” styles that were created in the code that you added in step 2. Simply paste the following into your “styles.css” file:

img.opacity-90 {
	opacity: 0.9;
	filter: alpha(opacity=90);
}

img.opacity-80 {
	opacity: 0.8;
	filter: alpha(opacity=80);
}

img.opacity-70 {
	opacity: 0.7;
	filter: alpha(opacity=70);
}

img.opacity-60 {
	opacity: 0.6;
	filter: alpha(opacity=60);
}

img.opacity-50 {
	opacity: 0.5;
	filter: alpha(opacity=50);
}

img.opacity-40 {
	opacity: 0.4;
	filter: alpha(opacity=40);
}

img.opacity-30 {
	opacity: 0.3;
	filter: alpha(opacity=30);
}

img.opacity-20 {
	opacity: 0.2;
	filter: alpha(opacity=20);
}

img.opacity-10 {
	opacity: 0.1;
	filter: alpha(opacity=10);
}

And that’s it! Proper completion of this process will result in a new “Formats” drop down menu appearing in the second row of your WordPress visual editor.