360 Grad Bilder veröffentlichen mit 360-To-HTML

360 Grad Bilder veröffentlichen mit 360-To-HTML
Bildrechte: Foto von The Lazy Artist Gallery von Pexels

Das Fotografieren von 360 Grad Bilder war lange Spezialisten mit sehr teurem Fotoequipment vorbehalten. So mussten früher oft mehrere Kameras mit Weitwinkelobjektiven auf einem speziellen Stativ montiert werden und hinterher die Bilder zusammengefügt werden. Dies nennt man Stichting und wird auch heute zum Großteil noch praktiziert. Zum Glück gibt es mittlerweile aber auch 360° Kameras wie die Ricoh Thetha SC auf die viele Hobby-Fotografen, Outdoor-Enthusiasten und ganz besonders Architekten zurückgreifen. 360 Grad Bilder haben ein Problem: Sie müssen in einem Player angezeigt werden, weil man sie nicht flach betrachten kann. Sie benötigen also ein Tool, um Ihr Bild hochzuladen, es anzusehen und auf Ihrer Website zu platzieren. 360 Grad Bilder können dann mit JavaScript oder Flash Plugins auf Webseiten veröffentlicht werden. Wer dies nicht selbst Programmieren möchte oder Plugins mit Adobe Flash oder Silverlight verwenden möchte, kann sich einen Hosting Anbieter für seine Bilder suchen. Der bekannteste Anbieter ist wohl 360player.io, jedoch gibt es auch günstigere alternativen welche das gleiche können. In diesem Artikel möchte ich Ihnen die 360° Panorama Software 360-To-HTML vorstellen, mit der Sie 360 Grad Bilder einfach hochladen und teilen können. 360-To-HTML funktioniert unabhängig von Ihrer eingesetzten Web-Technologie und kann auch mit WordPress, Drupal oder statischen HTML Seiten verwendet werden. Sie müssen lediglich das IFrame einbinden welches Ihnen 360-To-HTML erzeugt. Wir nutzen in diesem Beispiel das Content-Management-System Joomla und WordPress. Ebenso zeigen wir wie Ihr mit dem Static-Page-Generator Hugo euer 360 Grad Bild veröffentlichen könnt.

Tipp: Erfahren Sie in diesem Blogbeitrag was gegen ein CMS und für einen Static-Page-Generator spricht

Warum 360-To-HTML verwenden um 360 Grad Bilder zu veröffentlichen

Die 360° Panorama Software hat meiner Meinung nach das beste Preis-Leistungsverhältnis. So können Sie ganz einfach mit einer kostenlosen Mitgliedschaft beginnen und sich mit dem 360 Grad Bild veröffentlichen vertraut machen und bei Bedarf auf eine kostenpflichtige Mitgliedschaft wechseln. Diese ist sogar wesentlich günstiger als bei der Konkurrenz. 360-To-HTML bietet auch einige Besonderheiten welche andere Anbieter nicht bieten. So können Sie selbst bestimmen für welches Anzeigegerät Sie das 360°-Foto optimieren möchten. Genannt wird dies “Rendering”. Sie können also ein Rendering erstellen das nur auf Mobil-Geräte angezeigt wird. Ein Rendering das auf Vollbild verwendet wird und ein Rendering für das Anzeigen direkt auf der Website. So wird je nach Anzeige-Gerät die empfohlene Komprimierung verwendet sodass Eure Page Speed nicht zu sehr beeinträchtigt wird.

Leider gibt es zum Zeitpunkt wo ich diesen Artikel schreibe noch nicht die Mobile App für Android oder iOS. Hier muss noch nachgebessert werden. Jedoch ist die Webseite für Mobilgeräte optimiert und funktioniert auch so einwandfrei. Eine Windows Desktop Anwendung ist vorhanden und bietet zusätzlich zu allen Funktionen der Webseite auch einen “Vorschau Modus” damit Sie noch vor den hochladen sehen können, wie Ihr 360 Grad Bild aussehen wird.

Preise und Mitgliedschaften

360-To-HTML kann im Community Hosting kostenlos verwendet werden. In der kostenlosen Mitgliedschaft kann man bis zu drei 360-Grad Bilder hochladen und unbegrenzt teilen oder verlinken. Wer mehr Bilder benötigt, kann für 69,99 Euro im Jahr (also ca. 5,80 € im Monat) bis zu 50 Bilder hochladen. Das ist gerade mal die Hälfte im Vergleich zu 360player wo das günstigste Monatsabo 12,99 Euro kostet. Wem 50 Bilder nicht ausreichen, kann sich eine eigene Instanz von 360-To-HTML bereitstellen lassen. An diesem Punkt wird es bei 360-to-HTML besonders interessant, Ihr bezahlt nämlich nicht mehr länger eine Mitgliedschaft oder ein festgelegtes Kontingent sondern ein Cloud Hosting inkl. Datensicherung, Serveradministration und Monitoring von Ressourcen. Ihr könnt Euch unbegrenzt Ressourcen dazu buchen und die Server bei Bedarf hochskalieren lassen. Die Server werden bei Hetzner im Deutschen Rechenzentrum betrieben damit auch dem Datenschutz genüge getan wird.

360°-Foto veröffentlichen

Sofern noch nicht geschehen, registrieren Sie sich auf 360-To-HTML. Sie müssen nach der Registrierung noch Ihre E-Mail Adresse bestätigen und können sich dann direkt anmelden. Das hochladen Ihrer Bilder ist denkbar einfach, direkt nach dem Login sehen Sie auf der rechten Seite direkt den Upload Dialog. Tragen Sie einfach den Namen Ihres Bildes und optional eine Beschreibung ein. Danach wählen Sie das gewünschte 360 Grad Bild und klicken auf Upload. Alternativ können Sie die Desktop Anwendung nutzen um Ihre Bilder hochzuladen. Der Vorgang ist dabei identisch.

Wichtig! Die Software übernimmt das Konvertieren und Anzeigen Ihrer Bilder - Nicht das Stiching. Falls Ihr 360 Grad Bild aus mehreren Dateien bestehen sollte, müssen Sie diese zuerst zusammenfügen.

Nach dem hochladen sehen Sie in der Regel einen Schriftzug: “Rendering ausstehend”. Diesen Schriftzug sehen Sie immer, sofern ausstehende Rendering-Jobs für dieses Bild existieren. Beim Hochladen Ihres Bildes wird direkt das “Web-Rendering” für Webseiten mit angelegt. Das Web-Rendering ist in der Regel das, was Sie wollen wenn Sie Ihr Bild auf einer Webseite anzeigen möchten. Klicken Sie auf Bild editieren um den Namen, die Beschreibung oder die Renderings anzupassen bzw. neue Renderings anzulegen. Jedes Rendering erhält dann einen eigenen Teilen Code. Auf Ihrem Dashboard (Meine Bilder) wird immer nur das erste Rendering verlinkt.

Aktualisieren Sie die Seite einfach nach 1-2 Minuten und das Rendering sollte abgeschlossen sein. Sie sehen dann bereits eine Vorschau von Ihrem 360-Grad Bild. Klicken Sie auf das Bild, öffnet sich die Vollbild Anzeige. Bitte beachten Sie das die Vollbildanzeige von Ihrer Rendering komprimiert ist und in geringerer Qualität als das Bild das Sie hochgeladen haben. Wenn Sie keine Komprimierung möchten, wählen Sie bei Rendering als Zielplattform “Keine Komprimierung” aus. Ihr Bild bleibt dann in Originalgröße, das einbetten Ihres Bildes in Originalgröße wird sich aber sehr negativ auf Ihrer Website Geschwindigkeit auswirken.

Sobald das Rendering abgeschlossen ist, können Sie Ihr Bild direkt über Social Media Teilen oder auf den Button “IFrame Code” klicken. Sie erhalten dann einen HTML-Schnipsel zum einbinden auf Ihrer Website.

Der Code sieht ungefähr so aus:

<iframe src="https://api.360-to-html.com/public/1/136/share/179/index.html" width="100%" height="100%"> </iframe> <a href="https://api.360-to-html.com/public/1/136/share/179/index.html" target="_blank">360° Bild anzeigen</a>

Wenn ich diesen Code in der Website einbinde, sieht dies wie folgt aus: 360° Bild anzeigen

360 Grad Bild veröffentlichen mit HTML / Bootstrap

Der einfacheit fangen wir mit dem einbinden eines 360°-Fotos auf einer statischen HTML Seite an. Sofern Sie keinerlei Kenntnisse in HTML haben, fahren Sie einfach mit dem nächsten Kapitel fort. Zum nachvollziehen wie 360-To-HTML funktioniert ist es jedoch sinnvoll das Beispiel anhand einer HTML Seite zuerst anzusehen. Damit Ihr das Beispiel einfach nachmachen könnt, habe ich Euch auf meinem GitHub eine Beispiel-Website vorbereitet. Ihr könnt Euch diese Seite einfach “Forken” oder als Zip-Datei herunterladen.

360 Grad Bild veröffentlichen mit Joomla

Bei Joomla kann es etwas umständlich sein sein 360-Grad Bild zu veröffentlichen da es unterschiedliche Arten von Beiträgen gibt. Zum einen gibt es Webseiten die SP Page Builder von Joomsharper verwenden, dann gibts Joomla installionen welche die K4 verwenden um Beiträge zu veröffentlichen und natürlich die Standard Joomla Beiträge welche das System mitbringt.

Am leichtesten ist es wenn Sie als Texteditor den CodeMirror auswählen. Der Standard Editor (TinyMCE) erlaubt nämlich nicht den Einsatz von iFrames. Dies kann man zwar umkonfigurieren, hat bei mir jedoch immer zu Problemen geführt. Erstellen Sie unter Erweiterungen ein neues HTML-Modul. Kopieren Sie dort den iFrame Code aus der 360-To-HTML Webapp rein und klicken Sie auf speichern. Sie können nun das Modul entweder einer Modul-Position zuweisen oder Sie verlinken das Modul in einem Ihrer Beiträge. Passen Sie im HTML Code eventuell die Höhe an. Ich selbst verwende sehr gern 400px als Höhe und 100% als Breite. Mit K4 und SP Page Builder können Sie dann auch auf dieses Modul verweisen und es an einer beliebigen Stellen anzeigen lassen. Mit dem SP Page Builder geht dies sogar noch leichter, indem Sie einfach als Control “Custom HTML” auswählen und den Code direkt reinkopieren. SP Page Builder wird Ihnen den Einsatz von iFrames nicht unterbinden.

360 Grad Bild veröffentlichen mit Hugo

Mit Hugo können Sie am einfachsten ein 360°-Foto veröffentlichen, indem Sie in Ihrem Theme Verzeichnis unter Layouts->Partials eine neue HTML Datei generieren. In diese Datei kopieren Sie nun den iFrame Code von 360-To-HTML rein. In diesem Beispiel nennen wir die Partial Datei “meinbild.html”. Nun können Sie von allen HTML Seiten aus dieses Partial einbinden.

{{ partial "meinbild" }}

An der jeweiligen Stelle wird nun das 360-Grad Bild angezeigt. Falls Sie Ihre 360° Bilder auch in Markdown verwenden möchten, legen Sie einen Shortcode mit dem Name “Partial” an. Gehen Sie dazu in den Ordner “Layouts->Shortcodes” und legen dort eine neue Datei “partial.html” an. Verwenden Sie folgenden Inhalt:

{{ partial (.Get 0) }}

Nun können Sie in Markdown folgenden Tag verwenden um an der gewünschten Stelle das 360 Bild anzuzeigen:

< partial "meinbild" >

Wenn Sie Hilfe beim Einbinden Ihrer 360-Grad Bilder benötigen, schreiben Sie mir gerne doch eine E-Mail an mail@marcogriep.de oder besuchen Sie meine Website. Ich biete auch diverse Webdesign Dienstleistungen an.