Foto- & Panorama-Slider auf Steemit

in #deutsch6 years ago (edited)

QuickTipp-Foto-Slider.jpg

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!

Sort:  

Super interessanter Tipp!

Funktionier leider nicht mit dem Safari-Browser unter Mac OSX 10.13.4, aber Chrome und Firefox gehen.

Bleibt nur das Problem, dass der Scrollbalken unter Mac OSX erst angezeigt wird, wenn man zu scrollen beginnt. Daher müsste man definitiv noch einen Hinweis dazuschreiben, dass man scrollen kann, um die gesamte Gallerie bzw. das Panorama zu sehen.

Danke für deine Fehlermeldung!
Wir hatten leider keinen Mac zum testen. Werden aber mal im Büro fragen, ob uns ein Kollege kurz testen lässt :)

Android zeigt den Scrollbalken beim ersten Slider mit den drei Bildern auch erst an, wenn man das Bild verschiebt. Beim Slider mit dem Code (darunter) wird der Balken sofort angezeigt. Ein Hinweis im Text, dass man das Bild oder die Gallerie verschieben kann, sollte hier auf jeden Fall helfen. Wenn ich heute noch dazu komme, versuche ich einen prominenteren Hinweis einzubauen.

Wir haben gerade etwas experimentiert und sind mit den Lösungen noch nicht ganz zufrieden.

  1. Versuch: Eine Grafik mit einem Pfeil mittels "pull-left" auf eine Seite des Sliders setzen (Funktioniert am Desktop, zerschießt aber das Layout in der mobilen Ansicht).

  2. Versuch: Eine Tabelle in dessen erste Spalte der Slider und zweite Spalte ein Pfeil ist (Funktioniert eigentlich gut).

Da aber der Pfeil schon als "Button" in unseren Köpfen verankert ist, wird er bestimmt auch geklickt werden und dann passiert leider nichts. Daher würde wir weiter einen Hinweis im Text unter dem Slider empfehlen, um die Leser darauf hinzuweisen.

Auf jeden Fall schonmal vielen Dank für euren Einsatz. Leider Sind die Möglichkeiten auf Steemit ja ziemlich beschränkt, aber ein Hinweis im Text sollte für‘s erste ausreichen. Für mich ist das größere Problem, dass die Mac/Safari User (zu denen ich zähle) außen vor bleiben. Trotzdem gut zu wissen, dass das im Prinzip geht ;-)

Wie immer klasse Tipp!
Vielen Dank!

Dankeschön :)

WOW! Sehr cool! Danke, das muss ich bald ausprobieren!

Wir sind schon gespannt was du da schönes damit zaubern wirst :)

Das werde ich bei meinem nächsten Fotopost umsetzen. Danke für den Tipp, wieder etwa dazu gelernt.

Gerne doch :)
Kannst uns dann gern den Link zu deinem Beitrag schicken.

Klasse Tipp, danke! Der letzte Panorama-Teil ist zu groß ;)

Bitte :)
Was meinst du genau mit dem Panorama-Teil?

Beim Panorama Slider der Bild-Part ganz rechts ist größer als die anderen ;)

Konnten das Problem lösen und haben die Infos im Beitrag eingebaut.
Danke für deine Hilfe :)

Nichts zu danken! :D

Ah...am Smartphone ist es zu groß. Danke für den Hinweis!

Oh, hm... hätt ich's vorher mal am PC probiert^^

Servus,

du hast von mir ein Upvote erhalten! Ich bin ein Curation-Bot und meine Mission ist, hochwertigen Content unter #steemit-austria zu fördern. Hier kannst du mehr über mich und meine Funktionsweise erfahren. Wie du an meinen Curation-Rewards mitverdienen kannst, wird dort ebenfalls beschrieben.

Übrigens: Wenn du den Tag #steemit-austria verwendest, finde ich deine Posts noch leichter!

Auf dem dem Steemit-Austria Discord-Server kannst du nette Leute kennen lernen und deine Beiträge promoten.

Zum aktuellen Tagesreport

Super Tipp. 😄
Das teste ich auch mal. Danke schön

Freut uns, dass dir der Tipp gefällt :)

sorry doppelpost

funktioniert unter ubuntu 17 weder mit firefox noch mit brave oder chromium .. chrom wollte ich nicht mehr testen :)

Congratulations @quicktipps! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of upvotes

Click on any badge to view your own Board of Honor on SteemitBoard.

To support your work, I also upvoted your post!
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

Upvote this notification to help all Steemit users. Learn why here!

Coin Marketplace

STEEM 0.36
TRX 0.12
JST 0.039
BTC 70112.96
ETH 3549.99
USDT 1.00
SBD 4.71