Resized media max width

Problem/Motivation

When a user resize a media, the actual size in pixel is added to the media element with inline styling. Without extra styling, this can cause 2 issues :

• If the media size is too wide, it can break out of its parent container and gives unfortunate result in the front-end.
• Since the media has a fixed size, it won't bien responsive and won't adapt itself smoothly if the viewport is resized.

Steps to reproduce

1. Add a media library image to a content area.
2. Set the size using the resize drag handles to a value larger than the viewport (example a media of 1400px of width on a viewport of only 1024px width).
3. Save the node.
4. Note that when viewing the node the resized media will have a fixed size of 1400px and break out of its container/the viewport of 1024px.
5. Note that when resizing the window/viewport, the media will keep its fixed size of 1400px.

Proposed resolution

A simple CSS line can fix this : "max-width: 100%;"
By applying this CSS rule to the media element, the media will never break out of its container. If the container is 1024px wide, the media element will not break out of that space even if the fixed size is larger. If the container/viewport changes size, the media will adapt itself to follow the width of its container.

We suggest to add a new boolean field "Set max width" to the filter's settings of the module. If enabled, an additional class would be added to the media element (.media-max-width) and the CSS rule would be applied thanks to an additional CSS file (instead of inline styling). This class can then easily be overridden at the theme level if needed.

Of course this change should be optional as it can affect the expected result in the front-end and might not suit everyone. But it could be useful to ensure a user such as a content editor doesn't break the layout of a site by adding medias that are too large or doesn't fix on all screens.

Remaining tasks

Create a patch to add the new feature.

User interface changes

A new boolean field "Set max width" will be added to the filter's settings.

API changes

Data model changes