Bilder 🖼 verlinken in HTML oder Markdown (2)

Wie kann man auf Steemit oder Busy.org die Bilder verlinken, damit die Leser mit einem Klick zu der größeren Ausgabe des Bildes oder zu einer anderen Quelle gelangen können?

---

Der Editor auf Steemit unterstützt zwei Modi. Zum einen kann man auf den Editors mit den Buttons zurückgreifen, dann ist man im HTML-Modus und kann auf einige HTML-Tags zurückgreifen oder man kann alternativ im Markdown-Modus Inhalte einpflegen, was aber nicht sonderlich komfortabel ist, da die Editor-Buttons fehlen. Das ist auch einer der Gründe warum viele Nutzer die Inhalte via Busy.org einfügen.

Bilder via HTML einfügen

Nach folgendem Muster bzw. "Formel" werden die Bilder in HTML verlinkt:

<a href="[Adresse des Verweises]"><img src="[Adresse des Bildes]" width="xyz" height="xyz" alt="alt-Text"></a>

Das a-Element ist zuständig für die Verlinkung und dort kommt die Adresse (url) der Quelle au die verwiesen werden soll. Innerhalb von img wird die Adresse des Bildes, der Inhalt des alt-Attributs und duch die Maße des Bildes ausgegeben.

Das alt-Attribut

Der Inhalt des alt-Attributs also der Alternativ-Text ist aus zwei Gründen wichtig. Er wird dann ausgegeben, wenn aus welchen Gründen auch immer das Bild nicht geladen wird und es ist relevant für Suchmaschinen und die Vorlese-Software. Daher empfiehlt es sich, dass der alt-Text ein kurze Beschreibung des Bildes beinhaltet. Dienst das Bild lediglich dem Design, dann bleibt der Inhalt des alt-Attributs leer: alt=""

Die Maße bei den Bildern sind nicht zwingend notwendig, so dass man es auch in etwas kürzerer Form eingeben kann:

<a href="[Adresse des Verweises]"><img src="[Adresse des Bildes]" alt="alt-Text"></a>

Und so schaut es im Beispiel des oberen Platzhalterbildes im Quelltext aus:

<a href="https://steemitimages.com/0x0/[...].png"><img src="https://steemitimages.com/0x0/[...].png" alt="Platzhalter-Bild"></a>
[Quelltext-Beispiel auf das notwendige gekürzt [...]]

Bilder via Markdown einfügen

Nun kommen wir zu Markdown, welches vor allem für Anfänger doch etwas einfacher sein sollte, was auch eine der Absichten dahinter ist. Markodown ist wie HTML eine Auszeichnungssprache. Hierbei werden allerdings im Hintergrund deine Markdown-Eingaben in HTML "übersetzt".

Die Bilder in Markdown, werden nach dem folgenden Muster eingegeben:

[![alt-Text](Adresse des Bildes)](Adresse des Ziels)

Und so schaut es im Beispiel des oberen Platzhalterbildes im Editor aus:

[![Platzhalter-Bild](https://res.cloudinary.com/[...].png)](https://steemitimages.com/0x0/[...].png)
[Beispiel auf das notwendige gekürzt [...]]

Alles klar? Wenn nicht, einfach einen Kommentar abgeben.

Einige Kommentare gab es bereits im ursprünglichen Artikel.