Support » Plugins » Plugin: “Insert image” button in edit screen

  • This plugin adds an “Insert image” button in the edit screen which opens a simple image browser to select from all previously uploaded pictures and add the appropriate code to your post.
    By now, the image browser has only minimal functionality and just displays all images found in the upload directory but more features may be added if resonance is positive. Suggestions are welcome.
    You can download the plugin here.

Viewing 12 replies - 1 through 12 (of 12 total)
  • EXCELLENT plug, Zarn! I was praying something like this would come around soon. IT was becoming a pain in the ass to paste code or remember file names.
    Here are some suggestions for future versions:
    1. Put the “insert Image” or newly created button somewhere in the vicinity of the other buttons in the post-entry page. I almost thought I had somehow screwed up in following your single direction. I didn’t look ALL the way into the corner…
    2. Once a new screen opens up, put a link to go back to writing the post because right now it only allows you to close the window after you insert the image.
    3.Possibly opening up a new smaller window would be a viable option? OR, if you’r really good, possibly making the entire image-browser.php run @ the bottom of the post screen, under the “Custom Fields” section. The use of small thumbnails for all images and scroller would work excellently & easy access to all the images. This would be great for authors (like myself) who aren’t pros to use a simple, yet extremely effective method to post pics!
    anyway, thank you for your work!

    @1: The placement is due to some limitations of the plugin API. If you really want it otherwhere, you’ll have to add a link manually to e.g. wp-admin/edit-form-advanced.php
    @3: I don’t know why, but normally it should open a smaller popup window. Maybe the little javascript does not work correctly on every browser but I will look at it tomorrow.

    Thank you for the plugin. I waited for a hack or plugin, that would implement this functionality. Good work!
    If there will be a new version I would suggest to modify the image browser. Loading and searching can be very slow when you have stored a large amount of images. Maybe smaller preview images or a filelist combined with a preview area can be a solution.

    Thanks for the plugin. I’m trying to get it working, but when I click the link in the post screen, I get a blank window for /wp-admin/image-browser.php. There’s no error, and the page has a title, but there is nothing on the screen.
    If I view the source, I see this, which looks correct:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <title>WordPress &rsaquo; Radical Congruency &rsaquo; Select Image</title>
    <link rel="stylesheet" href="wp-admin.css" type="text/css" />
    <link rel="shortcut icon" href="../wp-images/wp-favicon.png" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    // a nifty little script from Alex King (
    function insertAtCursor(myField, myValue) {
    //IE support
    if (document.selection) {
    sel = document.selection.createRange();
    sel.text = myValue;
    //MOZILLA/NETSCAPE support
    else if (myField.selectionStart || myField.selectionStart == '0') {
    var startPos = myField.selectionStart;
    var endPos = myField.selectionEnd;
    myField.value = myField.value.substring(0, startPos)
    + myValue
    + myField.value.substring(endPos, myField.value.length);
    } else {
    myField.value += myValue;

    <style type="text/css">
    #iiwrapper { margin: 8px; padding: 0;}
    .image { background: #eeeeee; margin: 0 0 12px 0; padding: 4px; border: 1px solid #cccccc; }
    .image h1 { font-size: 1em; padding:0; margin: 0 0 8px 0; }
    .description { margin: 6px 0 0 0; }
    <div id="iiwrapper">
    </div><!-- iiwrapper -->

    I tried setting permissions to 755 and 777, but still nothing. Any ideas? Thanks!

    OK, duh, I hadn’t uploaded any images yet. I was expecting it to browse my computer for images, but I see now that it browses the wp-content folder for what’s already been uploaded. My bad. This looks great, and it’s working.

    Actually, it works in Firefox, but not in IE. When I try to add the image to the post in IE, it just adds code to the “add it to the post” button but doesn’t do anything. It also doesn’t open a popup, so I have to do this manually, and when I close it, the post in the other window is unchanged (no code inserted). I’m using IE6. Is everyone else using Firefox, or did you get it to work with IE?
    Thanks – and this isn’t a gripe – just trying to share info to make it better. Thanks for sharing your plugin.

    You can now download Version 0.2 which fixes some javascript bugs with IE and I hope it works (it should, at least with IE 6).
    I’m pretty new to javascript — in fact, I never used it before — so the cross-browser part is mostly “try and error”.

    Excellent plug in Zarniwoop! Works perfect! Thanks

    Zarniwoop, thanks for the plugin, works like a charm…
    just a related question a bit OT, where can modify the img tag. I’d like to ad a class to the image and would like to have the output code of the upload (with your plugin or not) with the class tag.
    Could you give me a hint?
    Thanks a million!

    Look at the function ii_make_code_single_image(...) in image-browser.php, which produces the piece of code for the post.
    Just add another line with `$code .= ‘class=”whatever” ‘ after the 2nd line of the function (remember the whitespace!).

    `sweet- where to upload the images?

    ah got it- wp-content folder

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Plugin: “Insert image” button in edit screen’ is closed to new replies.