Customize WordPress Insert/Edit Image

When I set up my first blog it was as a keyword rich (so I thought) directory titled tucson-real-estate-blog. Catchy and every word in the URL with my custom permalink setup.

The other thing I’ve done is add a directory in that one called “images” where I store all the images for the blog.

What I didn’t realize was every time I wanted to add an image I would be typing

http://www.barbaralasky.com/tucson-real-estate-blog/images/”filename.jpg”

That is a lot of typing and opportunities abound for typos in that stream.

I wanted the Insert/Edit Image to fill that in for me automatically and let me just copy and past the image file name after it. Today I finally took the time to figure out where the change had to be made. The fun part: It is stored in different places depending on what version of WordPress you are using.

How to customize your Insert Edit Image Window

I use notepad and FTP the file back to its location once alerted.
Once I have a copy on my local computer I rename the file on server as imagehold.htm or js This makes it easy to set it back if you make a mistake. I never recommend overwriting existing files.

Starting with the latest version of of WordPress 2.5.1

The file is image.htm it is located:

wordpress\wp-includes\js\tinymce\themes\advanced\image.htm

Find this: class=”mceFocus” value=”"
Change it by adding your image path inside the value=”"
ex. class=”mceFocus” value=”http://www.realestategbloglab.com/images/”

Upload the file and it will place that in the image URL box for you.

Earlier versions of wordpress

You will have to alter a different file; the image.js file this time around. It is located one more directory deep.

wordpress\wp-includes\js\tinymce\themes\advanced\js\image.js

Find this:

tinyMCE.getWindowArg(‘src’) ;

Change it by adding:

tinyMCE.getWindowArg(‘src’) || ‘Your Image directory path here’ ;

Ex:tinyMCE.getWindowArg(‘src’) || ‘http://www.realestatebloglab.com/images/’ ;

Save it and FTP back to your server.

It is that simple and you will no longer have to type in those long image urls when adding images to your blog posts.

If you have found this post helpful then leave a . . . “Wait, I’m not on amazon” sorry.