I opened a bug ticket yesterday image changes made to the alignment through TinyMCE's 'Inert/edit image' aren't reflected in the published code, but was wondering whether anyone knows a workaround for the issue in the mean time.

Found a work around myself. The popup menu still doesn't work, but I've added the following css to themes\yourtheme\css\typography.css:

.typography .left {
	float: left;
	padding: 1em 1em 1em 0;
}

.typography .right {
	float: right;
	padding: 1em 0 1em 1em;
}

.typography .center {
	display : block;
	margin: 0 auto 0 auto;
	text-align: center;
}

.typography .leftAlone {
	float: left;
	margin-right: 100%;
}

.typography .rightAlone {
	float: right;
	margin-left: 100%;
}

And added them to the Styles menu of tinymce by adding the below to mycode\_config.php

HtmlEditorConfig::get('cms')->setOption('theme_advanced_styles', 'None=none;Image left=left;Image center=center;Image right=right;Image left alone=leftAlone;Image right alone=rightAlone');

Users can now simply select the alignment of the image in the styles menu. I added the none listing so they can disable a style if they accidentally add it to text rather than an image (as I could find no way to remove a style without going into HTML code).

I had to manually hard refresh (Shift + Refresh) the css file http://yoursite.com/themes/yourtheme/css/typography.css to get my browser (Firefox) to recognise that the css file had changed.

Thank you - it seems to solve our problem :-)

At /cms/_config.php, change the line, for tinymce settings, where it says:

'extended_valid_elements' => 'img[class|src|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|usemap]...

to:

'extended_valid_elements' => 'img[class|src|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|usemap|style]...

Adding the style attribute to img tags makes the "Insert / Edit Image" stuff to work again.

Regards,

Pigmeu

great post = > MarijnKampf

I will add:

HtmlEditorConfig::get('cms')->setOption('theme_advanced_styles', 'None=none;Image left=left;Image center=center;Image right=right;Image left alone=leftAlone;Image right alone=rightAlone');

to mycode\_config.php on all my sites from now on.

thanks,