WordPress.org

Ready to get started?Download WordPress

Forums

Image class (6 posts)

  1. nims
    Member
    Posted 7 years ago #

    Hi, I think there shud be an option in admin to select a class to float the image right or left for the images in posts where we click Send to Editor button. Something like Class: o Float right
    o Float left
    o Custom class img_post ( this we can put in our css file )

  2. Lorelle
    Member
    Posted 7 years ago #

    Is there such a class in your WordPress Theme's stylesheet (styles.css)? Look there. If it isn't, then you will need to add it. See Wrapping Text Around Images and Using Images in the WordPress Codex, the online manual.

  3. nims
    Member
    Posted 7 years ago #

    Thanks for the links but what I wanted to convey was something different. I understand we can have different classes in style.css and call them in the img tags whereever required. But that has to be done manually, editing each img tag in the post after pressing "Send it to Editor" button and writing class="someclass" in them.

    I just wanted a simple addon so that this option can appear in the iframe where we select the thumbnail option etc. foe the image. So that when the button "send to editor" is pressed we have an img tag with class attribute already displayed. The options can be as described in my first message.

  4. nims
    Member
    Posted 7 years ago #

    Since I didnt get any response, I thought of playing around with some PHP code myself. ( I am using WP 2.1 )
    To some extent I managed to satisfy myself by making "Send to editor" button automatically add class="imgleft" to the img tag it inserts in the post.

    To do this, I opened the upload-js.php file ( its in wp-admin folder ) and inserted class='imgleft' ( note single quotes ) in the 3 <img tags just before they close i.e />
    Here is how they looked after modifications.
    h += "<img src='" + ( this.currentImage.thumb ? this.currentImage.thumb : this.currentImage.src ) + "' alt='" + this.currentImage.title + "' width='" + this.currentImage.width + "' height='" + this.currentImage.height + "' class='imgleft' />";

    h += "<img src='" + ( this.currentImage.thumb ? this.currentImage.thumb : this.currentImage.src ) + "' alt='" + this.currentImage.title + "' width='" + this.currentImage.width + "' height='" + this.currentImage.height + "' class='imgleft' />";

    h += "<img src='" + ( 'thumb' == display ? ( this.currentImage.thumbBase + this.currentImage.thumb ) : ( this.currentImage.srcBase + this.currentImage.src ) ) + "' alt='" + this.currentImage.title + "' class='imgleft' />";

    Now add class imgleft in the style.css file ( or whatever css file u r using )

    Upload it to the proper folders and thats it. Do make backup of these files before making any changes.

    Now when you insert an image by clicking "Send to Editor" button you will see class="imgleft" attribute already added.

    Now if someone can help me in adding an option (radio buttons ) to select the class I want to add in this tag

  5. chaz7979
    Member
    Posted 7 years ago #

    I agree that this option needs to be done. That being said, I can probably get about as far as you did with the code. I would hate to mess around with the framed send to editor stuff.

    I could probably go in and edit the functions that left and right align text but as soon I edit that to have it insert imgleft and imgright I will probably need that function to align text or something.

    Also...even if I did that, would it still string the code out when it is posted?

  6. Tri-Fusion
    Member
    Posted 7 years ago #

    Thanks nims

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags