WYSIWYG and Inplace-Editor remove width and height from image css-style specifications

Help / Discuss
1

You can write using the source editor something like

[[image:test.png||style="width:100%;height:auto"]]
[[image:test.png||style="width:10cm"]]

which is working and creates printable html code containing images with specified dimensions.

But if you later use the WYSIWYG or inline-editor the height and width terms are removed automatically.
Terms like “border:6pt solid gray;border-radius:5pt” survive WYSIWYG editing.

Is there any chance to specify image dimensions not in pixel units and use WYSIWYG editing?

I know: the html img attributes “width/height” use pixels, but “width/height” within style specification may use different units.

Thanks

Norbert

2

(Some reflections later …)

There are tricky workarounds - surviving wysiwyg editing (examples):

inline:

This picture (% style="display:inline-block; width:3cm" %)[[image:picture.jpg||style="border:3pt solid red"]](%%) shows the effect.

not inline:

(% style="width:5cm" %)
[[image:picture.png||style="border:3pt solid red"]]

Note:

  • CSS-Units like “cm” allow to specify the real image size of the printed or PDF-exported document.

  • There are CSS-units (em,ex,ch) which correspond to current font size.
    This allows special character like icons within text.

3

Hi NorSch,

I have similar issue, but in my case editor removing:
style="float:right"
All of my pictures moved from right to left after clicking “Edit”.

At source side it looks like that:

[[image:xwiki:Documents\.Test01.WebHome@My logo.png||width="356" height="101" style="float:right"]]
After:
[[image:xwiki:Documents\.Test01.WebHome@My logo.png||data-xwiki-image-style-alignment="end" height="101" width="356"]]

Anyone have some idea why it behave in this way?