image_send_to_editor() filter WordPress
- SOLVED
When a user sends a hyperlinked, captioned image to the content editor the resulting editor output is something like:
[caption id="attachment_101" align="alignright" width="150"]<a href="http://localhost/wp-content/uploads/2012/11/aoraki.jpg"><img src="http://localhost/wp-content/uploads/2012/11/aoraki-150x150.jpg" alt="Aoraki Mount Cook" width="150" height="150" class="size-thumbnail wp-image-101" /></a>Aoraki Mount Cook[/caption]
And the resulting HTML output is something like:
<div id="attachment_101" class="wp-caption alignright" style="width: 160px">
<a href="http://localhost/wp-content/uploads/2012/11/aoraki.jpg">
<img src="http://localhost/wp-content/uploads/2012/11/aoraki-150x150.jpg" alt="Aoraki Mount Cook" width="150" height="150" class="size-thumbnail wp-image-101" />
</a>
<p class="wp-caption-text">Aoraki Mount Cook</p>
</div>
Please can someone help me create filters for image_send_to_editor() and/or(?) image_add_caption_shortcode() that create HTML output for a captioned image similar to the below format:
<div id="attachment_101" class="wp-caption size-thumbnail alignright">
<a href="http://localhost/wp-content/uploads/2012/11/aoraki.jpg">
<img src="http://localhost/wp-content/uploads/2012/11/aoraki-150x150.jpg" alt="Aoraki Mount Cook" />
</a>
<p class="wp-caption-text">Aoraki Mount Cook</p>
</div>
Basically, for a captioned image I am trying to add a "size" class name to the containing DIV and remove the inline width declaration. Width and Height attributes also need to be removed from the IMG tag.
For a non-captioned image, Width and Height attributes need to be removed.
Non-hyperlinked images, whether captioned or not, should render without the anchor tag.
In the editor, I'm guessing the output should look something like:
[caption id="attachment_101" class="wp-caption size-thumbnail alignright"]<a href="http://localhost/wp-content/uploads/2012/11/aoraki.jpg"><img src="http://localhost/wp-content/uploads/2012/11/aoraki-150x150.jpg" alt="Aoraki Mount Cook" /></a> Aoraki Mount Cook[/caption]
And, finally, is it possible to have the default "Link to" value under 'Attachment Display Settings' in the Media Uploader always set to "None"? (or is this a cookie-ed value that simply remembers that users last choice?)
Many thanks
Answers (1)
Kailey Lampert answers:
I've got the code for the 1st part with captioned images. Let me see if I can't wrangle up the other pieces.
Kailey Lampert comments:
I think I've got it all, I'm just not sure about "Non-hyperlinked images, whether captioned or not, should render without the anchor tag." Are you saying that if you select None for Link To, your images are still wrapped in an <a> tag?
(I'm about to be offline for a half-hour. But I'll check in as soon as I have internet again)
designbuildtest comments:
Cheers - many thanks Kailey.
designbuildtest comments:
Hi Kailey, to clarify, if "None" for "Link to" is selected, no anchor tag should render (image should not be wrapped in an <a> tag - like how the standard WP function works). Thanks.
Kailey Lampert comments:
Okay. http://cl.ly/code/1T1w0F0w2W2W
It first removes the core [caption] shortcode, then replaces it with a nearly identical version, with just your markup changes.
Then there's a filter to strip out the height/width attributes on the inserted images, captioned or not.
And finally another filter to force the None option to be selected default. (Which will cause the image to not be wrapped, standard core functionality)
designbuildtest comments:
Great, thanks Kailey.
Couple of things ... when the captioned image is sent to the editor everything looks good, but when I hit "Update", the caption is lost - not quite sure why the caption isn't sticking? Also, the containing DIV needs to show a dynamic size (i.e. not always hardcoded as 'size-thumbnail' ... if it's a full image for instance, apply class = 'size-full' to the containing DIV.
Cheers
Kailey Lampert comments:
Not sure why the caption wouldn't be sticking, but I'll take a look - I'm pretty sure I didn't have the problem in my test. Correcting the image size should be easy too (and obvious...). Unfortunately I have to head out right now and will be gone for a few hours. If no one's picked up where I left off, I'll finish up when I return.
designbuildtest comments:
Great - thanks. No mad rush - these things always take a bit of tweaking I'm guessing. Much appreciated.
designbuildtest comments:
Hi Kailey, I've been testing some more this afternoon and the code snippet below seems to break the caption shortcode. When this code is removed, the caption DIV remains in place (as expected) when you update your post. I haven't been able to work out how to add the image class size (size-full, size-thumbnail etc) to the containing DIV unfortunately. Cheers.
add_filter( 'image_send_to_editor', 'new_image_send_to_editor', 21, 8 );
function new_image_send_to_editor( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
$html = preg_replace( '/ width="(\d*)" height="(\d*)"/', '', $html );
return $html;
}
Kailey Lampert comments:
Removing the width from the image seems to be the particular trigger that causes the [caption] to get stripped out. This appears to be a bug, but I'm still poking around to see if there's a fix/workaround.
In the meantime, this version [[LINK href="http://cl.ly/code/3b263b012a2t"]]http://cl.ly/code/3b263b012a2t[[/LINK]] only removes the height, and adds the actual size name to the div class.
Perhaps there's a CSS solution to address why you want to remove the width/height attributes?
designbuildtest comments:
Excellent - thanks Kailey.
I'm stripping the width and height to build a responsive theme. Yip, I can manipulate via CSS, but would just be a bit cleaner I suppose if <strong>$html = preg_replace( '/ width="(\d*)" height="(\d*)"/', '', $html );</strong> played nicely with the caption shortcode. If you do come across a workaround, that would be grand.
Much appreciated and thanks again.
Kailey Lampert comments:
After some sleep, this seems like a good solution. [[LINK href="http://cl.ly/code/2e0w1Y1I1V0t"]]http://cl.ly/code/2e0w1Y1I1V0t[[/LINK]]
Remove the height/width when the shortcode is rendered instead of when the code is added to the editor.
Kailey Lampert comments:
Slight update to account for non-captioned images. [[LINK href="http://cl.ly/code/1P0p0l3t220O"]]http://cl.ly/code/1P0p0l3t220O[[/LINK]]
designbuildtest comments:
Wonderful! Updated code works great :-)
Thank you for going the extra mile to think of a solution to overcome that width/caption bug ... makes the HTML just a little bit neater when the width attribute can be completely removed.
Many thanks Kailey