Der Artikelbild "Hack"

Wenn man auf Steemit die ersten Beiträge verfasst, sucht man vergebens den Upload-Button für das Artikelbild. Den gibt es aber leider nicht. Hier wird einfach das erste Bild des Artikels als Vorschaubild herangezogen.

Mit einem kleinen Hack Trick kann man das Artikelbild selbst bestimmen

Will man das Artikelbild selbst definieren, muss man es nicht zwingend als erstes sichtbares Bild in einen Beitrag einbauen. Verschachtelt man nämlich ein Bild am Anfang eines Beitrags in genügend viele Divs <div class="pull-left">, kann man es so "tief" verschachteln, bis es im Beitrag nicht mehr angezeigt wird. Dies gilt zumindest für Steemit (Desktop/Mobil - Android) und die eSteem App (Android). Auf iOS Geräten, wird das Bild im mobilen Browser teilweise noch angezeigt, hier kann man sich aber mit einem weiteren kleinen Trick helfen. Im Quelltext eures Artikels ist der HTML-Code natürlich weiterhin enthalten, das verlinkte Bild wird aber aktuell nicht wirklich "sichtbar" angezeigt.

Auf diese Weise kann man jedes beliebige Bild als Artikelbild definieren, auch wenn es nicht als erstes "sichtbares" Bild im Beitrag vorkommt. Hat man das Artikelbild in fünf oder mehr Divs verschachtelt und sozusagen "versteckt", braucht man auch kein weiteres "sichtbares" Bild mehr im Beitrag einzubauen. Dies gilt zumindest für die Desktop Version von Steemit, sowie der Mobilen Ansicht auf Android und der eSteem App auf Android. Der kleine Schönheitsfehler im mobilen iOS Browser lässt sich aber mit dem zusätzlichen Befehl, um Bilder direkt über die Bild-URL zu verkleinern https://steemitimages.com/1x0/... auch leicht beheben.

Dieser Artikel dient gleich als Beispiel und hat ein Artikelbild, aber im Beitrag selbst ist kein Bild zu sehen.

Hier seht ihr die 5 Divs inklusive dem Befehl, das Bild nur als einzelnen Pixel darzustellen

Ihr könnt euch gerne den Code kopieren, zu Beginn eures Beitrags einbauen und müsst nur die URL für euer Bild anpassen. Zusätzlich haben wir noch eine Trennlinie <hr/> nach diesem Code eingebaut, um weitere Darstellungsfehler zu vermeiden.

<div class="pull-left">
<div class="pull-left">
<div class="pull-left">
<div class="pull-left">
<div class="pull-left">
<img src="https://steemitimages.com/1x0/https://steemitimages.com/DQmUyU1Yy1iudnNwELAuUbj5HnLUCwPNVKfuF1G1nz7aDEB/QuickTipps-Artikelbild-Hack.jpg"></img>
</div>
</div>
</div>
</div>
</div>
<hr/>

Fazit:

Dieser Trick ist sehr einfach und kann sehr hilfreich sein, wenn man das Artikelbild selbst definieren will oder man nicht das erste Bild des Beitrags als Artikelbild einsetzen möchte. Bei der Desktop sowie Mobilen Ansicht (Android) von Steemit und der eSteem App (Android), funktioniert der Trick auch ohne das Bild auf einen Pixel zu verkleinern. Für die problemlose Darstellung auf iOS Geräten, solltet ihr das Bild aber auf einen Pixel verkleinern. Dieser eine Pixel ist aber mit freiem Auge auf den mobilen iOS Geräten kaum zu sehen und fällt daher nicht wirklich auf.

Sollte Steemit Änderungen an der Darstellung von Beiträgen vornehmen, könnte es sein, dass das "versteckte" Bild zum Vorschein kommt. Bei der aktuellen Darstellung konnten wir jedenfalls keinen wesentlichen Nachteil feststellen, das Artikelbild nicht mit diesem Trick selbst zu definieren. Wir haben aber auch nicht alle Möglichkeiten, Anzeigegeräte und diversen Frontends durch getestet, sondern nur die oben genannten.

Solltest du eine fehlerhafte Darstellung bei diesem Trick entdecken, schreib es uns einfach in den Kommentaren. Wir können leider selbst nicht jedes Endgerät, Betriebssystem oder Browser testen.

Wenn du Fragen oder sonstige Anregungen zu diesem Beitrag hast, schreib uns bitte auch einfach ein Kommentar.

Wir freuen uns über jedes Feedback!