When an image is inserted into a HtmlArea the image gets inline styling as follows:
<img style="width: 100%;" src="../../../../../rest/content/image/e592cabc-6a77-43db-a7bf-279a175276c7?size=640&scaleWidth=true" alt="foo.png" data-src="image://e592cabc-6a77-43db-a7bf-279a175276c7" />
Why is this styling added ? How can we prevent it ?
This was our first go at images in the new editor - we want to simplify handling of images for the editor so images look nice regardsless of where they are placed - but I guess this solution is waaay to crude - we should probably add some classes instead.
Any special requirements you would like to see solved?
There should be options for whether we want to scale the image or not (?size=640&scaleWidth=true), and also the possibility to define different scaling widths/heights (ie. small, medium, large). Right now we can’t find a way to insert the original image in scale 1:1.
As for presentation, I think classes is the way to go.
To be more precise, it is the arguments to @src that is the main problem: ?size=640&scaleWidth=true
Hmm… First of all you should not worry about the src field when using the editor, but rather focus on what is actually stored. You will see we are not preserving any 640 stuff when saving - this is just inner magic to optimize admin UI.
I guess we might be missing some relevant documentation on how this is actually handled - and some more features like you request would naturally be useful.
Hi!
Just so we don’t misunderstand each other.
<div data-th-utext="${portal.processHtml({'_value=' + article.data.body})}">. Actual HTML being inserted is this <img style="width: 100%;" src="/admin/portal/preview/draft/unox/privat/smreolje/_/image/633a743a-9c5a-4ec7-8844-27208118a34a/width-768/sykkelglede_2000x1333.jpg.jpeg" alt="sykkelglede_2000x1333.jpg" /> even though the image is way smaller than this. If the user wants to insert an icon that is 20 x 30px, the image is being scaled to 768. Inline style width: 100% is also being inserted, so we have to use an !important rule in our CSS to make sure that the image never scales more than 100% of its width.Are we doing something wrong?
No, you are not doing it wrong, the processHtml function is simply hardcoded this way right now. We’ll make this more flexible in upcoming releases…
When can we expect these features to be released ?
We’ll discuss it - coming back with more info here…
Ok - we’re looking into designing this for upcoming sprints, will get back with details here.
Hi!
We’re creating inline styles for the editor in our next release (6.3), it will make inline image handling super-simple, including effects, use of original or optimized images etc…