Replacing align=”left” by class=”alignleft”

  • Hello all,

    I was experiencing no margin with the photos on the wordpress blogs I deal with and I saw in the theme I use (default) it exists a class alignleft (and also alignright and centered) that put margins for the photos of this class.

    I decided so to adapt the selection of the alignment in the writing to write class=”alignleft” instead of align=”left” and same for right and centered (centered instead of absmiddle). So I add a if in function insertImage of wp-includes/js/tinymce/themes/advanced/jscripts

    If it was one of the above terms it should put align=”; and class=’termabove’;
    I also modified InsertImage(manyarguments) of wp-includes/js/tinymce/tiny_mce.js by adding class in the argument and modifying the function doing like the other arguments.

    Unfortunetely it didn’t work. Beside even if I force align to alignleft in wp-includes/js/tinymce/themes/advanced/image.htm or wp-includes/js/tinymce/themes/advanced/jscripts it still display align=”left” in the source of the webpage.

    Where am I wrong ? Could you give me just a tip ?

    Thanks.

    RoboTux

Viewing 4 replies - 1 through 4 (of 4 total)

  • Would a button just for that help ?
    https://redalt.com/wiki/ButtonSnap

    Thread Starter robotux

    (@robotux)

    In fact I would prefer just an explaination on how does selection of the alignment works. I probably missed a stage. Either there is a stage I missed and when the picture is attributed by align=”left” or it is a problem of persistence (either a modification in the code isn’t repercuted immediately by refreshing the page).

    For exemple I don’t know where an empty attribute is flushed (because we don’t see valign=” but nothing because the attribute is empty). I don’t need another button, wordpress defaults buttons are already enough ?? My purpose is to change the action of the “align left” selection in the option menu of a picture to write class=”alignleft” in the code instead of align=”left” which doesn’t make any margin between the text and the picture.

    Thanks for your indications. When I’ll find out the solution I’ll oeuf course post that here ??

    Robotux:

    I found your solution (the fact that the problem exists is extremly stupid on the part of the tinyMCE developers).

    In tiny_mce.js, go to line 2697 (this)

    tinyMCE.setAttrib(this.imgElement, 'align', align);

    and ADD after it

    tinyMCE.setAttrib(this.imgElement, 'class', align);

    AND, replace line 2652 (looks like this)

    html += ' height="' + height + '" align="' + align + '" title="' + title + '" onmouseover="' + onmouseover + '" onmouseout="' + onmouseout + '" />';

    with this

    html += ' height="' + height + '" align="' + align + '" class="' + align + '" title="' + title + '" onmouseover="' + onmouseover + '" onmouseout="' + onmouseout + '" />';

    Upload, do a force refresh on your post edit page, and new images you insert will have classes instead of align attributes. Create CSS entries for
    .entry IMG .left
    .entry IMG .right
    and so on, and you’re good to go.

    Upload, do a force refresh on your post edit page, and new images you insert will have classes instead of align attributes.

    I mispoke there. I meant to say “new images you insert will have classes as well as align attributes.”

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Replacing align=”left” by class=”alignleft”’ is closed to new replies.