WYSIWYG image insertion error

Silverstripe Version: 4.3

Hello,
I am having an issue when inserting an image from within the WYSIWYG editor.
If I select ‘Insert from File’ and just place the image, everything works fine. However, if I change the width to 100% and publish the page, the live view has an error.

What seems to be happening is when I put in 100% for the width the height is no longer relevant so the value is removed, which is fine. If you then view the code from the WYSIWYG editor, height has a value of height=“NaN”. If the height attribute is removed, the page loads as intended.

This appears to be a bug, what is the best way to submit a bug report?

In the meantime, is there a way to alter the output of the code so I can temporarily remove the height attribute if it is empty?

Thank you.

You can submit bugs for the admin module here: Issues · silverstripe/silverstripe-admin · GitHub

You should be able to edit the image code using the HTML editor in TinyMCE.

Screenshot%20from%202019-02-15%2008-51-14

Thanks for your response,
I probably didn’t explain myself well enough :slight_smile:.

I was aware you could use the Source code editor, I was hoping for a way to remove the height before it went into the editor but only if it was empty. When I hand this over to the content editors I would like to avoid them using the source editor if possible.

Hi @FrankenBunt, per <img>: The Image Embed element - HTML: HyperText Markup Language | MDN the width attribute represents the intrinsic width of the image in pixels.

So as far as I know ‘100%’ is not a valid value. NaN for height is probably the result of a script trying to automatically update the height proportionally from the width, but it’s expecting an integer. (The CMS should really do some sanitation here and only accept numeric values so this doesn’t happen.)

You can use all kinds of units for specifying the width and height of an image using a style property e.g. style="width: 100%" but that’s not equivalent to setting the width attribute.

You might want to use a CSS class to set an image width to 100% and height to auto, and let users apply this class to images in the CMS as a workaround.

Sorry for the late reply. Thanks for your response @JonoM, I have implemented the styles in the style sheet as per your suggestion. It is now working as I had hoped.