“Wrap all img in DIV and add quicktag for it” plugin

  • brianlees

    (@brianlees)


    19 years ago

    OK, I’m looking for a plugin that will wrap all images in DIVs and add a quicktag for it on the write post page. Here’s the deal. I know I can add the code by hand into the post. However, I would like my wife to be able to, for example, align an image to the right in a post and wrap text around it. She is not a coder at all, but she is used to BBCode from all the messageboards she hangs out on.

    So, you can see that I why I would love to have a quick button or two that would do the trick. Anyone have any thoughts on this? Is there a plugin already or a planned modification of WordPress in the future that would do it?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Mark McKibben

    (@manzabar)

    19 years ago

    Or you could edit your quick tags file (wp-admin/quicktags.js) and change:
    function edInsertImage(myField) {
    var myValue = prompt('Enter the URL of the image', 'http://');
    if (myValue) {
    myValue = '<img src="'
    + myValue
    + '" alt="' + prompt('Enter a description of the image', '')
    + '" />';
    edInsertContent(myField, myValue);
    }
    }

    To something like this:
    function edInsertImage(myField) {
    var myValue = prompt('Enter the URL of the image', 'http://');
    if (myValue) {
    myValue = '<div><img src="'
    + myValue
    + '" alt="' + prompt('Enter a description of the image', '')
    + '" /></div>';
    edInsertContent(myField, myValue);
    }
    }

    Thread Starter brianlees

    (@brianlees)

    19 years ago

    Hmmm….Two things:

    1) that doesn’t allow me to specify the div. I suppose I could add two IMG quick tags for a left and a right float…so that might work.

    2) won’t this break when I upgrade WP to a newer version? The file will just be overwritten, right? Would a plugin be better? Is there a “user” quicktags file that does not get overwritten during updates?

    Thanks for the help, though. That seems like a really easy solve to the problem for the short term.

    Thread Starter brianlees

    (@brianlees)

    19 years ago

    Oh, could I add another value to it to specify left or write in the pop-ups that appear?

    lawtai

    (@lawtai)

    19 years ago

    For my site, similar to what manzabar suggested, except I have it laid out like the following:

    <code>function edInsertImage(myField) {
    var myValue = prompt('Enter the URL of the image', 'http://');
    if (myValue) {
    myValue = '<img src="'
    + myValue
    + '" alt="' + prompt('Enter a description of the image', '')
    + '" class="' + prompt('alignleft, alignright, centered', '')
    + '" />';
    edInsertContent(myField, myValue);
    }
    }

    This will add a 3rd pop-up in addition to the first 2 of the location/alt name. The third one asks for an input of alignleft, alighright, centered. Then in my css file, I have the following:

    img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

    img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }

    .alignright {
    float: right;
    }

    .alignleft {
    float: left
    }

    This allows me to select where I want my picture to be located.

    Yes you’d have to remember the changes when you upgrade to a new version, but I think it’s a pretty simple change. This doesn’t use divs, but instead uses a class within the image call.

    ghutchis

    (@ghutchis)

    19 years ago

    Brian,

    Since I know you’re interested in doing this for the WP-Gallery plugin… you can either edit the quicktag javascript in the WP-Gallery plugin to use this form. *Or* you can put it into a separate plugin (actually pretty easy — send me an e-mail if you need pointers) and you won’t have to worry when you upgrade WordPress or WP-Gallery.

    Thread Starter brianlees

    (@brianlees)

    19 years ago

    Hmm…OK, I have Asymptomatic’s Edit Button Template plugin. I am trying to add the code that lawtai suggested. I see I need to add it at the end in the edit_insert_button function. However, I’m not sure how to add it so I get the prompts for alignment. Sorry, I’m feeling pretty dumb at the moment.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘“Wrap all img in DIV and add quicktag for it” plugin’ is closed to new replies.