Foto- & Panorama-Slider auf Steemit

Heute zeigen wir euch eine Möglichkeit, wie ihr mehrere Fotos in einem „Slider“ darstellen oder auch Panoramabilder etwas größer in eure Steemit Beiträge einbauen könnt.

Ihr müsst nur einen paar einfache HTML Befehle kennen (oder aus diesem Beitrag kopieren) und gegebenenfalls das Panoramabild vorbereiten.

Der Foto-Slider

Für den Foto-Slider müsst ihr nur den HTML Befehl <pre> (für vorformatierte Inhalte) im Artikel-Editor an die Stelle setzen, an der ihr den Slider haben wollt. Fügt darunter eine Leerzeile ein und schließt den Befehl in einer neuen Zeile mit </pre> wieder. Kopiert jetzt eure Bild-Links zwischen die zwei „pre“-Befehle oder ladet eure Bilder direkt in den Artikel hoch.

Am einfachsten ist es, wenn ihr den HTML Befehl <img src=“Dein-Link-zum-Bild-dot-com“> (kurz "Img-Tag") für das Einbinden der Bilder verwendet. Wichtig ist hierbei, dass zwischen den Img-Tags keine Leerzeile ist, sondern nur Leerzeichen und ihr die Img-Tags nicht mit </img> schließt.

So sieht der fertige Foto-Slider aus:

Die Darstellung der Scroolbar, kann man leider nicht beeinflussen und ist vom jeweiligen System abhängig, auf dem der Beitrag angezeigt wird. Auf einem Windows-Desktop Rechner ist der Scrollbalken beispielsweise eckig, grau und unter den Bildern zu finden, auf Android Smartphones ist er im Chrome Browser wiederum abgerundet, transparent und im unterern Rand der Fotos versteckt.

Sollte der Scrollbalken in eurem Artikel auf einzelnen Geräten nicht angezeigt werden, schreibt uns bitte ein Kommentar auf welchem Gerät, Browser & System die Darstellung Probleme macht.

Hier findet ihr den Code:

<pre>
<img src="Dein-Link-zum-Bild-dot-com"> <img src="Dein-Link-zum-Bild-dot-com"> <img src="Dein-Link-zum-Bild-dot-com">
</pre>

Wenn ihr etwas mehr Abstand zwischen den Bildern haben wollt, müsst ihr nur weitere Leerzeichen zwischen die Img-Tags einfügen (Bsp: „> <“).

Die Bild-Links, die ihr beim Upload eurer Bilder auf Steemit erhaltet, könnt ihr zudem auch so verändern, dass ihr ganz leicht die Größe der Bilder anpassen könnt. Dazu müsst ihr nur https://steemitimages.com/0x0/ am Anfang des Links einfügt. Die erste „0“ vor dem „x“ definiert die Breite und die „0“ hinter dem „x“ die Höhe des anzuzeigenden Bildes. Mit dieser Einstellung könnt ihr definieren wie groß eure Bilder in euren Beiträgen angezeigt werden.

---

Der Panorama-Slider

Wenn ihr ein Panoramabild in euren Artikel einfügen möchtet, sieht das oft nicht so spektakulär aus, da das Bild auf eine Breite von „nur“ 640 Pixel verringert wird. Um das etwas eleganter zu lösen, könnt ihr das Bild mit sich selbst verlinken, und es, wenn man darauf klickt, in voller Größe anzeigen lassen (Wie beim Panorama oben), oder ihr bastelt euch einen Panorama-Slider, mit dem ihr das Panorama schwenkbar und unserer Meinung nach etwas eindrucksvoller einbinden könnt. Speichert dazu eurer Panorama in mehrere zusammenhängende Teile ab und fügt sie wie im oben beschriebenen Foto-Slider ohne Abstand zwischen den Img-Tags zusammen. Schon habt ihr einen Panorama-Slider, mit dem ihr eure Panoramafotos schöner in eure Artikel einbinden könnt.

So sieht der fertige Panorama-Slider aus:

In diesem Beispiel besteht das Panorama aus fünf einzelnen Bildern. Sind die Bild-Teile sauber aufgeteilt worden, sollte man keine Schnitte erkennen und die einzelnen Bilder verschmelzen wieder nahtlos zu einem langen Panorama.

Die ideale Größe der einzelnen Foto-Teile des Panoramas hängt natürlich davon ab, wie groß ihr es in euren Beitrag einbauen wollt. Die größte Darstellung, bei unserem Bildschirm und Einstellungen ist 640x850px für ein Foto-Teil.

[Edit] Achtet bitte auch darauf, dass alle Bild-Teile dieselbe Höhe und Breite haben, da der Slider sonst fehlerhaft dargestellt werden könnte.

Eine Live Demo mit einem echten Parnoramafoto findet ihr in diesem Beitrag.

Solltest du dich nicht mit Bildbearbeitungsprogrammen auskennen, ist das kein Problem. Du kannst das Panorama auch mit sehr vielen Smartphone- oder Tablet-Apps in mehrere Teile aufteilen und so dein Panoramabild für den Panorama-Slider auf Steemit vorbereiten.

---

[Edit]: @magicquokka hat uns darauf hingewiesen, dass das letzte Bild des Panorama-Sliders trotz über die URL definierter Höhe, viel größer dargestellt wurde, als die anderen Bilder. Das Problem konnten wir lösen, indem wir das letzte Bild auf die gleiche Breite geändert haben, wie die anderen Teile.

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

Wir freuen uns über dein Feedback!