Images with Captions

[WPRanger]

WordPress 3.7

New captioned image inserted into the Visual Editor produces a huge data-mce-style width (10000px+) moving the inserted image out of the editor viewable area.

[LucP]

Just tested and yeah; it's quite an ugly one... I think i've found the problem in wp-includes/js/tinymce/plugins/wpeditimage/editor_plugin_src.js I'll create a patch...

[LucP]

The error is caused by the minification of the editor_plugin_src.js file:

This code (which returns a perfectly normal caption-box:

<dl id="'+id+'" class="wp-caption '+cls+'" style="width: '+( 10 + parseInt(w) )+'px">

gets turned into this when it's minified:

<dl id="'+d+'" class="wp-caption '+e+'" style="width: 10'+parseInt(f)+'px">

I'd love to create a patch for this, but I have no idea where the minification of this file is taking place?

[LucP]

proposed fix

[LucP]

This patch should fix the problem. Every variable in that html-string gets generated before it gets mixed with the html, I think it's a lot cleaner to do it like this.

	w = parseInt( w ) + 10;

	return '<div class="'+div_cls+'"><dl id="'+id+'" class="wp-caption '+cls+'" style="width: '+w+
	'px"><dt class="wp-caption-dt">'+img+'</dt><dd class="wp-caption-dd">'+cap+'</dd></dl></div>';

[La Geek]

@patch test: Does not work

Unfortunately this patch does not work for me (I emptied cache). In google+ has been mentioned that Tiny MCE Advanced has no problems with captions (with recent Tiny MCE Advanced Update) and 3.7.

Perhaps this helps.

[LucP]

Replying to La Geek:

@patch test: Does not work

Unfortunately this patch does not work for me (I emptied cache).

Did you run the patch 'as-is', because the original minified javascript that caused the error will probably still be included; Like I mentioned... I have no idea what to use to minify this file and i don't think we should patch minified core files...

[La Geek]

I applied the patch to editor_plugin_src.js and I removed the original editor_plugin.js (for test) Then I copied the patched editor_plugin_src.js and renamed this file to editor_plugin.js.

So both files were patched. Does it work for you with this patch?

[SergeyBiryukov]

Related: #25708

[azaozz]

The patch is good. The problem is that latest UglifyJS failed when minifying the original file.

[nacin]

#25708 was marked as a duplicate.

[La Geek]

The patch is good. The problem is that latest UglifyJS failed when minifying the original file.

How it can be then, when I used the patched file twice, once as editor_plugin_src.js and then as editor_plugin.js, that it does not work? I used in both case a non minified version. So UglifyJS did not minify anything.

I applied the patch to a 3.7 version (not github version).

[nacin]

Upstream: ​​https://github.com/mishoo/UglifyJS2/pull/330

[nacin]

In 25921:

3.7 regression: Fix the width of captioned images inserted into the visual editor.

Pulls some arithmetic outside of some string concatenation to avoid a nasty uglify.js regression: ​https://github.com/mishoo/UglifyJS2/pull/330.

props LucP.
fixes #25700 for trunk.

[nacin]

In 25922:

3.7 regression: Fix the width of captioned images inserted into the visual editor.

Pulls some arithmetic outside of some string concatenation to avoid a nasty uglify.js regression: ​https://github.com/mishoo/UglifyJS2/pull/330.

Merges [25921] to the 3.7 branch.

props LucP.
fixes #25700.

[johnbillion]

#25713 was marked as a duplicate.

[joneiseman]

I tried making this code change to wp-includes/js/tinymce/plugins/wpeditimage/editor_plugin_src.js but it didn't fix the problem for me.

[azaozz]

...it didn't fix the problem for me.

The error in only in the minified editor_plugin.js file which is inside wp-tinymce.js.gz. To test this you can download wp-tinymce.js.gz from ​http://core.svn.wordpress.org/branches/3.7/wp-includes/js/tinymce/ and replace it in your install (don't forget to refresh the browser cache).

[azaozz]

In 25943:

Bump the (cache-busting) TinyMCE version for 3.7, see #25700.

[azaozz]

In 25944:

Bump the TinyMCE version for 3.8, see #25700.