Support » Plugins » Hacks » Change generated HTML code from "Add Media" button

  • Resolved coldpumpkin

    (@coldpumpkin)


    Hello there.

    When we’re inserting an image to a post, by clicking the “Add Media” button, WordPress generates a certain code, being:

    <a href="image_url"><img src="image_url" alt="image_name" width="image_width" height="image_height" class="image_class" /></a>

    Question here is – how to change the way the code is generated? What if I want to add attributes to the <a> tag? And what if I don’t want some of those attributes of the <img> tag?

    Thanks in advance for your answers!

Viewing 15 replies - 1 through 15 (of 19 total)
  • What if I want to add attributes to the <a> tag?

    What attributes?

    Moderator bcworkz

    (@bcworkz)

    Use the ‘get_image_tag’ filter. Your callback is passed a bunch of data that might be useful. See the source code from where the filter originates for a better idea of the possibilities.

    Thread Starter coldpumpkin

    (@coldpumpkin)

    @esmi – Imagine I need to add an id= attribute to every picture uploaded.

    @bcworkz – That’s nice. However I see the <a> is missing from the code. Why is that? All I can manipulate is the <img> tag.

    Moderator bcworkz

    (@bcworkz)

    Oh, sorry about that. I focused on the <img> tag for some reason. You want the ‘image_send_to_editor’ filter, which also includes the <img> tag. Origin

    Thread Starter coldpumpkin

    (@coldpumpkin)

    It doesn’t contain the <img> tag, however I can change it in the originally said ‘get_image_tag’ filter and it works! Thank you 🙂

    Thread Starter coldpumpkin

    (@coldpumpkin)

    I’d like to bump in this thread because I wonder if there’s another solution that doesn’t include hacking the original WordPress files. Can it be done through the theme’s functions.php?

    Thanks.

    nickohrn

    (@nickohrn)

    You absolutely should not change WordPress core files as you’ll lose your changes on upgrade. When bcworkz was referencing filters, he meant you should write something your functions.php like the following:

    function filter_image_send_to_editor($content) {
      $content .= '<p>Unicorns are awesome.</p>';
    
      return $content;
    }
    add_filter('image_send_to_editor', 'filter_image_send_to_editor');

    Inside that filter call you just need to do whatever transformation you want.

    Thread Starter coldpumpkin

    (@coldpumpkin)

    Hello there nickohm.

    That’s good to hear and that’s exactly the problem – whenever WordPress updates, it resets to default.

    I tried inserting that code in the functions file and it indeed adds the <p>Unicorns are awesome</p> to the end of the tags. However, it adds to the end, instead of replacing everything.

    Is there a way to rewrite/replace the text coming out?

    nickohrn

    (@nickohrn)

    Do you know PHP at all? That callback function is accepting a string (the default output that you want to modify) and returning a string (the content that will actually be inserted). All you have to do is return the correct string – whatever that is.

    Thread Starter coldpumpkin

    (@coldpumpkin)

    I don’t really know much of PHP, I just work along with what I have.

    I’m sure that what you said makes sense, however I have no clue how to make it work.

    Let’s say the current tag being sent to the editor is <a href="link"><img src="link"></a> and I want to change it to <p>miaumiau you can't insert images</p>

    How exactly would the function be? Like I said, from your code I understood I could change the $content however I wanted, but that just adds content to the end. How can I change the whole?

    Basically from the core files we have this:

    107	function get_image_send_to_editor($id, $caption, $title, $align, $url='', $rel = false, $size='medium', $alt = '') {
    108
    109	        $html = get_image_tag($id, $alt, '', $align, $size);
    110
    111	        $rel = $rel ? ' rel="attachment wp-att-' . esc_attr($id).'"' : '';
    112
    113	        if ( $url )
    114	                $html = '<a href="' . esc_attr($url) . "\"$rel>$html</a>";
    115
    116	        $html = apply_filters( 'image_send_to_editor', $html, $id, $caption, $title, $align, $url, $size, $alt );
    117
    118	        return $html;
    228	function get_image_tag($id, $alt, $title, $align, $size='medium') {
    229
    230	        list( $img_src, $width, $height ) = image_downsize($id, $size);
    231	        $hwstring = image_hwstring($width, $height);
    232
    233	        $title = $title ? 'title="' . esc_attr( $title ) . '" ' : '';
    234
    235	        $class = 'align' . esc_attr($align) .' size-' . esc_attr($size) . ' wp-image-' . $id;
    236	        $class = apply_filters('get_image_tag_class', $class, $id, $align, $size);
    237
    238	        $html = '<img src="' . esc_attr($img_src) . '" alt="' . esc_attr($alt) . '" ' . $title . $hwstring . 'class="' . $class . '" />';
    239
    240	        $html = apply_filters( 'get_image_tag', $html, $id, $alt, $title, $align, $size );
    241
    242	        return $html;
    243	}

    And I know how to change it accordingly to how I want, because the content is there.

    nickohrn

    (@nickohrn)

    In my example I appended the paragraph to the content sent into the function. However, you could just as easily do something like the following:

    function filter_image_send_to_editor($html, $id, $caption, $title, $align, $url, $size, $alt) {
      $html = str_replace('<img ', '<img id="my-super-special-id" ', $html);
    
      return $html;
    }
    add_filter('image_send_to_editor', 'filter_image_send_to_editor', 10, 8);

    What that does is manipulate the image tag and add an id attribute. You can manipulate the content however you want given the arguments that are passed.

    Thread Starter coldpumpkin

    (@coldpumpkin)

    That’s nice! What about the <a> tag? How can I change it? 🙂 Sorry.

    nickohrn

    (@nickohrn)

    Perhaps the easiest way is to tell me what the output is and what you want the output to be and I can just write the code to make that happen for you. I’m afraid you won’t learn as much, but you’ll get a solution much quicker 🙂

    Thread Starter coldpumpkin

    (@coldpumpkin)

    Alright 🙂 What I want is:

    <a href="link" class="fancybox-img"><img src="link"></a>

    Simple as that 😀

    nickohrn

    (@nickohrn)

    Just to be clear, the href attribute and the src attribute should point to the same place? I’m assuming you need an alt attribute as well for validation purposes?

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Change generated HTML code from "Add Media" button’ is closed to new replies.