Image placement should replicate actual position in TinyMCE

[robbieaverill]

@clarkepaul commented on Tue Jun 19 2018

For CWP themes the CMS doesn't detect the position of image alignment, so there is a disconnect between the preview and whats displayed in TinyMCE.

Image provided during CMS training.

[robbieaverill]

Initially raised as a CWP bug, I've replicated this on the CMS demo site (running 4.1.0).

Notes:

• Images that have a "center" alignment chosen when inserting them from files are correctly centered on the frontend
• Images that are center aligned via WYSIWYG button for test are not center aligned correctly in the frontend
• WYSIWYG center aligns images by applying margin-left/margin-right: auto style definitions to them which get lost when saving the page

[lukereative]

@robbieaverill I can't seem to replicate this on a fresh 4.1.0 install with cwp-starter + watea. My images get the center class applied appropriately and the result is displayed correctly. Somewhat related to this was silverstripe/silverstripe-asset-admin#801 which now correctly shows what alignment an image has when editing image properties via TinyMCE, but this doesn't seem to be what the issue is here.

[lukereative]

@robbieaverill is there any clarification you can give on this?

[robbieaverill]

@lukereative insert an image, click on it, click "Center" in the WYSIWYG alignment options - see it's not honoured.

I think you're right in that silverstripe/silverstripe-asset-admin#801 has resolved the bug when aligning via the dropdown in the image details modal - that looks like it's working now.

I'm testing this on demo.silverstripe.org FYI

[lukereative]

@robbieaverill Oh I get you now, I didn't realise those buttons controlled image position. I thought they were for text only – it seems a bit broken that they insert inline styles separate to using the alignment classes that the file dialogue uses. I guess changing these buttons to instead use those 'right', 'left', 'centre' classes is the correct fix.

[robbieaverill]

Fixed in silverstripe/silverstripe-framework#8351