Gitlab trick: Automatically resize uploaded images

Some little tricks are simply too good not to share. Here is one of them.

Images attached to an issue in Gitlab are always displayed full-width, which makes especially screenshots and others assets very space consuming.

To improve this you can replace the image reference with html to specify the desired display of the image. Below is an example.

Automatic markup after upload:

![Filename](/uploads/7ed860277251c934b53c95c3242ff8ea/Filename.jpg)

Manually changed markup:

<img src="/uploads/7ed860277251c934b53c95c3242ff8ea/Filename.jpg" width=320 />

However, when you often upload images, this a repetitive task.

Luckily, my colleague Rouven Volk came up with a nice little JS.

With a very simple bookmark you can automatically resize the images.  Create the bookmark and insert the following snippet to the URL:

javascript: (function(e, w) {
    e.value = e.value.replace(/\!\[[^\]]+\]\(([^\)]+)\)/g, "<img src=\"$1\" width=" + w + " />");
})(document.querySelector('textarea.markdown-area'), 320)

This is what the bookmark looks like in Chrome browser:

Bookmark with JS in the URL.

When you edit an issue or comment in Gitlab and click the bookmark, the markup of uploaded images automatically get replaced.