Export of images inside editor (TinyMCE) blocks looses important class data

In CMS you could insert images inside the HTML editor and set different classes for the image to get different formats out on the website. Formats like "thumbnail", or the "custom" size slider where the users sets a specific width.

This data is added to each image as a class, class data like ".thumbnail" and ".no-scale-up" and such are then used in the site CSS to style these images depending on how the editor wanted it.

This setting/data needs to be migrated. Even if XP doesn't support custom image sizes yet, the classes for the img-tag in html needs to be migrated over so that not all images looks huge in XP (size the CSS no longer can find the classes to style for).

This is requested by Höegh Autoliners migration, made by Item Consulting. They have 100s of images spread across 60+ articles using different classes/formats. Mostly "thumbnail", but also a lot of "custom" ones.

From CMS - Looks good in CMS thanks to CSS

From CMS - Classes are added that makes the CSS work

In XP the classes are gone, all images gets spread up to 100% width, impossible to scale down all to a set size since all are inserted with different settings. Just saying .editor img { width: 200px; } will fix 20% of the images but make the other 80% look ugly.

The different formats for images in CMS:

From CMS - How using custom size works, also important data not migrated today:

How source looks in CMS after inserting a thumbnail:

<p>xxx.</p>
<p class="editor-p-block"><img title="etag" src="image://86906?_size=thumbnail" alt="etag" /></p>
<p>xxx</p>

This is the result in CMS source for inserting a custom size image:

<img alt="twitter" src="image://85058?_size=custom&amp;_filter=scalewidth(365)" title="twitter" />

So I assume STK being a big part of transforming this into classes and such. But almost no client is not using the STK.

enonic / cms2xp

Export of images inside editor (TinyMCE) blocks looses important class data #13