Change generated HTML code from "Add Media" button
-
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!
-
What if I want to add attributes to the
<a>
tag?What attributes?
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.
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. OriginIt doesn’t contain the
<img>
tag, however I can change it in the originally said ‘get_image_tag’ filter and it works! Thank you 🙂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.
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.
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?
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.
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.
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.
That’s nice! What about the
<a>
tag? How can I change it? 🙂 Sorry.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 🙂
Alright 🙂 What I want is:
<a href="link" class="fancybox-img"><img src="link"></a>
Simple as that 😀
Just to be clear, the
href
attribute and thesrc
attribute should point to the same place? I’m assuming you need analt
attribute as well for validation purposes?
- The topic ‘Change generated HTML code from "Add Media" button’ is closed to new replies.