images in Visual Editor WordPress
- REFUND REQUESTED
Hallo WP Experts,
This a two-part challenge:
1- (tricky?) achieve consistent behaviour of "images with captions" and "images without captions"
examples: a user (author/editor) adds an image to a Post via Visual Editor ...
if the image has *no* caption the following is entered into tinymce:
(in the Visual Editor of (say) Twenty-Eleven, add an image, then do a right-click and view the underlying code in developer view to see what I mean by 'entered into tinymce'.)
<p style="">
<img class="size-full wp-image-1951 alignright" width="400" height="241" data-mce-src="http://.../wp-content/uploads/2013/03/image.png" src="http://.../wp-content/uploads/2013/03/image.png" alt="image" _moz_resizing="true"></img>
</p>
i.e. class contains both alignment and size
(the size string is vitally important - thumb|medium|large|full ... the width and height are useful extras)
if the image *does* have a caption, this is added to tiny mce:
<div class="mceTemp">
<dl id="attachment_1952" class="wp-caption alignleft" style="width: 387px;">
<dt class="wp-caption-dt">
<img class="size-medium wp-image-1952 " width="377" height="300" data-mce-src="http://.../wp-content/uploads/2013/03/image.png" src="http://.../wp-content/uploads/2013/03/image.png" alt="image with caption" _moz_resizing="true"></img>
</dt>
<dd class="wp-caption-dd">
caption text appears here
</dd>
</dl>
</div>
i.e. in the central img definition, the alignment info has been removed ... and put into dl id = attachment - this is most frustrating; the outer div (mceTemp), and the dl, dt, dd all get stripped out when the code is sent to become a Post page on the web.
The first objective is to get both the size and the align appearing consistently within the class statement of the <img ... ></img> in both instances.
2 - having achieved that, it should be fairly straightforward to extract the class statement with the size and align characteristics and repeat them in the class statement of a new surrounding div - for example:
<div class ="newname align-(...) size-(...)">
<img ... standardised ... ><img>
</div>
parameters and limitations:
to be done via new instructions to paste in functions.php
even better:
can you make the caption text appear (duplicated is fine) within a span or div *inside* the outer, newname div?
I have been banging my head against a brick wall with this one, and if you can fix it, I'd be deeply, deeply grateful, not to mention impressed.
Answers (2)
Dbranes answers:
There is a useful filter called <strong>image_send_to_editor</strong>, that you might consider if you want to overwrite the html that is inserted into the visual editor:
add_filter('image_send_to_editor', 'custom_image_html', 10, 8);
function custom_image_html($html, $id, $caption, $title, $align, $url, $size, $alt) {
if($id>0){
// overwrite html demo:
// small demo how we can check for caption:
if(strlen($caption)>0){
$html="<div class='with-caption'>".$html."<div>";
}else{
$html="<div class='no-caption'>".$html."<div>";
}
}
return $html;
}
This could be the starting point.
andrewsan comments:
wow - fast! thanks dbranes
I'm useless on php so don't know where to go from this, so I'm looking for a complete code solution that I can plug-in, test, and verify as OK before awarding the gold stars ...
I'll give this a try and see what it does, then get back to you ...
many thanks,
andrewsan
Dbranes comments:
I can see @Daniel has taken this further ;-)
Daniel Yoen answers:
maybe like this (tested by me)
This is a flexible div layout, you can add or remove a div. :-)
//remove caption shortcode
add_filter( 'disable_captions', create_function('$a', 'return true;') );
add_filter('image_send_to_editor', 'node_insert_images', 10, 7);
function node_insert_images($html, $id, $alt, $title, $align, $url, $size)
{
$image = wp_get_attachment_image_src($id, $size);
$caption= get_post($id)->post_excerpt;
$alt = get_post_meta($id, '_wp_attachment_image_alt', true);
if($caption)
{
$html = '<div class="mceTemp">';
$html .= '<dl id="attachment_' . $id . '" class="wp-caption ' . $align . '" style="width: 387px;">';
$html .= '<dt class="wp-caption-dt">';
$html .= '<img class="size-medium wp-image-' . $id . '" width="' . $image[1] . '" height="' . $image[2] . '" data-mce-src="' . $image[0] . '" src="' . $image[0] . '" alt="image with caption" _moz_resizing="true">';
$html .= '</dt>';
$html .= '<dd class="wp-caption-dd">' . $caption . '</dd>';
$html .= '</dl>';
$html .= '</div>';
}
else
{
$html = '<p style=""><img class="size-full wp-image-' . $id .' align' . $align . '" width="' . $image[1] .'" height="' . $image[2] . '" data-mce-src="' . $image[0] . '" src="' . $image[0] . '" alt="image" _moz_resizing="true"></p>';
}
return $html;
}
hope this help :-)
Daniel Yoen comments:
#add size
//remove caption shortcode
add_filter( 'disable_captions', create_function('$a', 'return true;') );
add_filter('image_send_to_editor', 'node_insert_images', 10, 7);
function node_insert_images($html, $id, $alt, $title, $align, $url, $size)
{
$image = wp_get_attachment_image_src($id, $size);
$caption= get_post($id)->post_excerpt;
$alt = get_post_meta($id, '_wp_attachment_image_alt', true);
if($caption)
{
$html = '<div class="mceTemp">';
$html .= '<dl id="attachment_' . $id . '" class="wp-caption ' . $align . '" style="width: 387px;">';
$html .= '<dt class="wp-caption-dt">';
$html .= '<img class="size-' . $size . ' wp-image-' . $id . '" width="' . $image[1] . '" height="' . $image[2] . '" data-mce-src="' . $image[0] . '" src="' . $image[0] . '" alt="image with caption" _moz_resizing="true">';
$html .= '</dt>';
$html .= '<dd class="wp-caption-dd">' . $caption . '</dd>';
$html .= '</dl>';
$html .= '</div>';
}
else
{
$html = '<p style=""><img class="size-' . $size . ' wp-image-' . $id .' align' . $align . '" width="' . $image[1] .'" height="' . $image[2] . '" data-mce-src="' . $image[0] . '" src="' . $image[0] . '" alt="image" _moz_resizing="true">';
}
return $html;
}
andrewsan comments:
Hallo Daniel - that was fast - many thanks:
I'll plug it it and play with it and get back to you ...
best regards,
andrewsan
andrewsan comments:
Hallo Daniel,
many thanks for your code.
I spent nearly two days testing it exhaustively:
* images with/without captions
* entered via visual editor / via text editor
* various sizes
* all alignments
the final html results that go to the web page aren't consistent :
the final html output to the web page sometimes appears with the opening div that I need;
and sometimes it's just stripped to bare img statement.
I tried experiments with your if -else (which is an interesting idea) but no luck:
* tried repeating the if code for the else part with just the caption removed ( as code / as line / etc)
* tried variations on line coding (standard tinymce / inline / block)
in addition, tinymce does further stripping if an editor makes changes to a Post and re-saves (either visual or text editor) which is a realistic daily scenario
the solution needs to be totally robust for daily wear and tear by users
any other thoughts?
many thanks Daniel, but I'm opening this up to others again ...
? anyone ?
best regards,
andrewsan
Daniel Yoen comments:
Sorry, which part doesn't work ?
I mean, like "when add caption, code doesn't work".
because I use any scenario and all works fine :-)
Best,
Daniel
andrewsan comments:
Hallo Daniel,
... there are problems with images showing at all (nothing in Media Library or on the web pages), but ...
try www.andrewsan.com: there are two articles
* images with captions -
the html shows as a div
<div class="mceTemp"><dl id="attachment_534" class="wp-caption none" style="width: 387px;"><dt class="wp-caption-dt"><img class="size-medium wp-image-534" width="300" height="199" _moz_resizing="true" alt="image with caption" src="http://www.andrewsan.com/wp-content/uploads/2010/08/test-image-landscape-900-300x199.jpg" data-mce-src="http://www.andrewsan.com/wp-content/uploads/2010/08/test-image-landscape-900-300x199.jpg"></img></dt><dd class="wp-caption-dd">
test image with caption
</dd></dl></div>
* images without captions
the html shows as just <img ... <img>
<p style="text-align: center;"><img class=" wp-image-846 aligncenter" src="http://www.andrewsan.com/wp-content/uploads/2013/03/wright-1-198x300.jpg" alt="image"></img></p>
I also tried forcing the correct display by using this in functions.php:
//remove caption shortcode, by Daniel
add_filter( 'disable_captions', create_function('$a', 'return true;') );
add_filter('image_send_to_editor', 'node_insert_images', 10, 7);
function node_insert_images($html, $id, $alt, $title, $align, $url, $size)
{
$image = wp_get_attachment_image_src($id, $size);
$caption= get_post($id)->post_excerpt;
$alt = get_post_meta($id, '_wp_attachment_image_alt', true);
if($caption)
{
$html = '<div class="mceTemp">';
$html .= '<dl id="attachment_' . $id . '" class="wp-caption ' . $align . ' ' . $size . '" style="width: 387px;">';
$html .= '<dt class="wp-caption-dt">';
$html .= '<img class="size-medium wp-image-' . $id . '" width="' . $image[1] . '" height="' . $image[2] . '" data-mce-src="' . $image[0] . '" src="' . $image[0] . '" alt="image with caption" _moz_resizing="true">';
$html .= '</dt>';
$html .= '<dd class="wp-caption-dd">' . $caption . '</dd>';
$html .= '</dl>';
$html .= '</div>';
}
else
{
$html = '<div class="mceTemp">';
$html .= '<dl id="attachment_' . $id . '" class="wp-caption ' . $align . ' ' . $size . '" style="width: 387px;">';
$html .= '<dt class="wp-caption-dt">';
$html .= '<img class="size-medium wp-image-' . $id . '" width="' . $image[1] . '" height="' . $image[2] . '" data-mce-src="' . $image[0] . '" src="' . $image[0] . '" alt="image with caption" _moz_resizing="true">';
$html .= '</dt>';
$html .= '<dd class="wp-caption-dd"></dd>';
$html .= '</dl>';
$html .= '</div>';
}
return $html;
}
but it didn't give me the results I want
any other ideas?