Front-end Editor: Version 1.5

Straight from the lab, we bring you the latest and greatest in front-end editing:

Swap theme images

Currently, there is no easy way to change an image from your theme. You have to either override the image file through FTP or locate the code in your theme and modify it.

Wouldn’t it be nice if you could just double-click on the image you want to change and then just do it, without leaving the page you’re on?

Good news: now you can, with a little bit of tweaking. To make an image editable, you have to make a one-time edit to your theme.

I chose the Cutline theme as an example:

In header.php, I replaced this:

<img src="<?php bloginfo('template_url'); ?>/images/header_1.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 1" title="<?php bloginfo('name'); ?> header image 1" />

with this:

<?php editable_image('header-1', 
	get_bloginfo('template_url') . '/images/header_1.jpg', 
	array('width' => 970, 'height' => 140, 'alt' => get_bloginfo('name'))); 
?>

The first argument is the image name
The second argument is the default URL
The third argument is optional and it’s used for adding extra attributes to the element.

Now, when I double-click on the header image, the Media Library box pops up. From there, I can choose any image I want to put instead of the current one:

image swapping

NicEdit is in, jWYSIWYG is out

NicEdit is a more mature visual editor than jWYSIWYG, but still lightweight.

visual editing

Two important benefits:

Other improvements

If you’re having trouble with the new version or have a feature request, hit the support forums.

comments powered by Disqus