GitLab Tipp: Bildergröße automatisch reduzieren

Manche Tricks sind einfach zu gut und müssen geteilt werden. Hier ist einer von ihnen:

Bilder, die an ein Issue in Gitlab angehängt werden, erscheinen immer in voller Breite. Das ist gerade für Screenshots und andere Assets sehr platzraubend. Mit einem sehr einfachen Bookmark kann die Größe der Bilder automatisch reduziert werden.

Abhilfe schafft eine einfache HTML Anweisung. Der Bildverweis wird durch einen HTML Code ersetzt, um die gewünschte Anzeige des Bildes anzugeben. Unten ein Beispiel.

Automatisches Markup nach dem Hochladen:

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

Manuell geändertes Markup:

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

Wenn Bilder häufig verwendet werden, wiederholt sich dieser Vorgang ständig. 

Zum Glück hat sich mein Kollege Rouven Volk ein nettes kleines JS ausgedacht.

Mit einem sehr einfachen Bookmark kann die Größe der Bilder automatisch reduziert werden. Einfach folgendes Bookmark erstellen und in den folgenden Ausschnitt in die URL eingeben:

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

So sieht das Bookmark im Chrome-Browser aus:

Bookmark mit JS in der URL.

Wenn eine Issue oder ein Kommentar in Gitlab bearbeitet und auf das Bookmark geklickt wird, wird das Markup der hochgeladenen Bilder automatisch ersetzt.