Add control over images with Markdown
### Description Final decision, we're going with the syntax laid out in https://github.com/jgm/commonmark-hs/blob/master/commonmark-extensions/test/attributes.md, which is written by the author of CommonMark. For example, ```markdown ![](image.jpg){width=75%} ``` creates the html ```html <img src="image.jpg" width="75%"> ``` Only `height` and `width` are supported - there is no support for classes or other other attributes. See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/104904+ for the implementation and https://gitlab.com/gitlab-org/gitlab/-/issues/28118+ for the tracking issue. --- _Original description_ Images in issues are essential to illustrate a point. However * an issue with a lot of images (in the comments too) becomes harder to read, * it requires a lot of scrolling, * retina images on images can become a nightmare, * you also are more prone to miss text between two images if they are really big. We currently have no way of controlling how these images are displayed. ### Proposed solution We could have a new option in an img markdown tag, indicating the size of the image: such as `![title|small](url.png)`. We would have 4 sizes that would limit the width of the image by forcing a `width:` in CSS on render. 1. `small`: 150px wide. 2. `medium`: 300px wide. 3. `big`: 700px wide. 4. no size option: the tag as it currently works, and still the default behaviour when drag and dropping an image. Specifications: * When clicking on a resized image, we would toggle between the natural image size and the resized one - so anyone can see the image in its natural size in ust one click. * The image could still be right-clicked to be opened in another tab, in order to see its natural size.
issue