Auf dieser Seite zeige ich Dir 2 Wege wie man 360 Grad Fotos auf Hompage einbinden kann.
Seit einiger Zeit gibt es viele 360° Kameras im Markt (z.B. Samsung Gear 360, LG 360 Cam, Ricoh Theta uvm.). Einige Modelle habe ich schon für einen zweistelligen Betrag im Aktionshaus entdeckt. Daher gehört seit Kurzem auch eine 360° Kamera zu meinem Equipment und ich bin schlicht begeistert von der Schnelligkeit 360° Fotos und Videos zu machen. Früher habe ich die 360° Panoramen selber aus einzelnen Bildern mit Hugin zusammen genäht. Das gab zwar eine gute Bildqualität, war aber erheblich zeitintensiver. Videoaufnahmen gingen mit der alten Methode natürlich gar nicht.
Daher war ich auf der Suche wie ich die Bilder dieser Kameras (eine *.jpg Datei mit dem gesamten Rundumblick) auf der Homepage einbinden kann. Meine Suche im Netz blieb einige Zeit lang erfolglos, aber am Ende bin ich dann doch auf 2 einfache Wege gestoßen.
Der einfachste Weg
den ich gefunden habe geht via WordPress Plug-In „WP-VR-view“ von Alexander Tumanov. Das Plug-In für WordPress ergänzt zwei Knopfe im Editor, lädt man die *jpg Datei wie gewohnt in WP in Medien hoch, lassen Sie sich danach einfach über den neuen Knopf in den Beitrag einfügen [bitte mit der Maus aufs Bild klicken und Maus schieben].
Die zweiten Lösung
nutzt den Service auf www.marzipano.net und dem plug-in Pano, und dreht sich von alleine …
Anleitungen
Lösung 1
Plug-in: WP-VR-view
- Foto machen
- Bild abspeichern
- In WordPress hochladen
- URL Adresse Kopieren
- Im Beitragseditor neue Knopf zum Einfügen wählen und URL einfügen
Lösung 2
Plug-in: PanoPress und Service auf
www.marzipano.net
- Foto machen
- Bild abspeichern
- gehe zu http://www.marzipano.net/tool/index.html#
- lade Bild hoch
- lade Zip Datei herunter
- entpacke Zip Datei lokal
- lade per FTP die entpackten Zip Dateien auf deine WordPress Seite hoch
- binde die index.html Datei mit folgenden Syntax ein
- ersetze in dem Link DEiNESEITE und DEINVERZEICHNIS durch die für Dich gültigen Links
Aufgrund einiger Nachfragen habe ich die Prozedur mal gefilmt und bei Youtube hochgeladen, hier der Link: https://youtu.be/H0gosZsKY9g .
Ergänzung: einen 360° Grundgang machen
Marzipano ermöglicht es Dir übrigens auch eine 360° Tour zu erstellen. Dazu musst Du einfach mehrere Bilder hochladen und in den Bildern „link hotspot“ drucken. Dann erscheint ein Symbol im Bild das sich verschieben lässt und mit dem man ein weiteres 360° verlinken kann. Ich habe das in meinem Artikel Lost Place gemacht. Klick dich rein!
Hey, Ich habe eine insta nano 360 Grad Kamera – hast du eine Lösung wie ich die Bilder in eine Joomla Webseite einbinden kann?
Lg Manuel
Hi Manuel,
ich bin damals extra auf WordPress umgestiegen um den großen Funktionsumfang der WordPress Community nutzen zu können. Daher war ich auch überrascht, dass es so wenig Plug-Ins für die 360° Fotos gab. Für andere Systeme habe ich leider nichts gefunden. Suche mal bei Dir in den Plug-Ins nach „360“ oder auch „3D“ und prüfe jedes Suchergebnis einzeln. Wenn Du nicht fündig wirst, suche in einigen Monaten noch mal, ich vermute dass bald alle nachziehen und entsprechende Plug-Ins haben werden.
Beste Grüße aus Bremen
Hallo,
ich kann mit der Anleitung leider keine 360°-Panoramen einbinden. Ich möchte gerne PanoPress mit Marzipano benutzen. Ich weiß an Hand der Beschreibung jedoch nicht, ob ich die Zip-Datei als solches hochladen muss oder nur die darin befindlichen Dateien. Außerdem ist mir nicht klar, welche Datei der verschiedenen enthaltenen Dateien ich mit PanoPress öffnen soll. Leider wird auch nach vielen Versuchen nie das Panorama geladen.
Vielleicht kannst Du die Beschreibung etwas konkretisieren und vielleicht mit einem Beispiel versehen.
Beste Grüße
Steffen
Hi Steffen,
ich habe das ganze mal per Video festgehalten und auf youtube hochgeladen. Im Video https://youtu.be/H0gosZsKY9g zeige ich wie ich die Seite einbinde. Viel Spaß und viel Erfolg
jens
Hi Jens,
ich nutze weder WordPress noch ein anderes CMS. Ich mache alle Websites in html5 mit CSS. Hast Du eine Idee, wie ich da die 360 Grad Fotos von der Samsung Gear 360 in einem Fenster (iFrame) einbinden kann, so dass die volle Navigation wie bei Marzipano.net gegeben ist???
Hi Joachim,
ich bin kein Spezialist in hmtl & Co. Aber soweit ich das erkennen kann, könnte und müsste der beschriebene mit Marzipano.net eigentlich überall funktionieren. Du lädst ja schließlich von Marzipano das Zip-File mit den ganzen Daten runter und auf Deine Homepage hoch. Dann setzt Du nur den Link zum Verzeichnis! Nach dem Runterladen der Daten von Marzipano kannst Du aber schon das bewegte 3D Bild lokal mit dem Browser öffnen – ganz ohne WordPress!
Hast Du Dir hierzu mal mein Youtube Video angeguckt (https://youtu.be/H0gosZsKY9g)?
Meld Dich wenn’s funktioniert hat oder Du noch Verständnisprobleme hast!
Beste Grüße
jens
Hallo Jens,
vielen Dank für dein Leitfaden.
Jetzt liegt es bei mir nur noch beim Aufruf.
Du schreibst: „binde die Datei ein mit PanoPress ein mit folgenden Syntax“
Was heißt das genau: ist panopress noch ein zusätzliches Tool, oder reiht „nur“ die Syntax auf meiner Webseite einzubinden.
Ich versuche das ganze in Joomla einzubinden. Ich gehe davon aus, dass das da auch gehen müsste.
Danke und Gruß
Hi
Der Fehlerteufel hatte sich in der Beschreibung eingeschlichen. Ich haben Schritt 7 und 8 gerade geupdated und hoffe Sie sind nun klarer. Es gibt in der entpackten ZIP Datei auch noch eine README Datei die ein wenig weitere Erklärung bereit hält.
Klappt es Bei Dir mir der neuen Beschreibung, oder hast Du weitere Fragen?
Beste Grüße
jr
Hallo, wollte die von marzipano downgeloadete index.html erst lokal testen. Mit Chrome kein Bildinhalt und mit IExplorer erst nach Zulassen geblockter Inhalte Bild sichtbar. Daher die Frage müssen hier erst Sicherheitseinstellungen im Browser vorgenommen werden um den Inhalt zu sehen?
Hi Günther,
ich habe bei mir aktuell die 3 Browser Opera, Firefox und IExplorer installiert. Ich meine keiner hatte mich extra nach einer Zulassung geblockter Inhalte gefragt, aber evtl. erinnere ich mich hier auch nicht richtig. Fakt ist, dass Opera das Panorama auch bei mir nicht lokal anzeigt. Daher vermute ich, dass Du die Inhalte einmal frei geben musst.
Wäre super wenn Du hier noch eine Antwort hinterlässt, ob das freigeben letztendlich zum Erfolg geführt hat.
Beste Grüße aus Bremen
jens
Ahoi,
Frage zur Variante 1. Was meinst Du mit „Im Beitragseditor neue Knopf zum Einfügen wählen und URL einfügen“. Wo finde ich den neuen Button zum Einfügen im Beitragseditor?
Hi Stephan,
den Beitrag habe ich geschrieben, bevor WordPress den neuen Editor eingefügt hat. Aktuell nutze ich WordPress 5.x und habe den Knopf auch nicht mehr. Wenn Du das Plug-in „WP-VR-view – Photo Sphere and 360 video“ installiert hast, gehe in WordPress auf die Seite Plug-ins, wähle bei diesem Plug-In „Details ansehen“. Im sich dann öffnenden Fenster wähle „Screenshots“ dann ist es das 4te Bild. Aber im Plug-In steht auch, dass es nur bis WordPress 4.6.14 kompatibel ist. Daher vermute ich, dass Du es heute mit einer WordPressversion 5 nicht mehr nutzen kannst.
Beste Grüße aus Bremen
jens
Ja, es scheint nicht mehr weiterentwickelt zu werden. Ich habe Alex angeschrieben, da die Ansicht im Mobilgerät nicht mehr toll ist unter iOS 12.4. Das Einbinden von Bildern für Desktop habe ich inzwischen gefunden und per Shortcode gelöst.
Hallo Jens,
danke für die Anleitung, ich werde es gleich mal probieren.
Noch eine ganz andere Frage, mit welchem Tool/Programm hast du das Video erstellt? Ich finde es ganz wichtig das man Bildteile unlesbar machen kann, wie z.B. deine FTP Verbindung.
Gruß
Jörgen
Hi Jörgen,
vielen Dank für Dein Feedback! Ich nutze MAGIX video deluxe premium. Das gibt’s in verschiedenen Versionen. Besonders vorteilhaft, ist dass Du jede Menge deutschsprachige youtube videos mit Anleitungen (z.B. verpixeln eines bewegten Objektes) findest. Besonder gut finde ich die Funktion des Automatischen Videoschnitts. Nach einem Urlaub schmeißt Du einfach alle Bilder und Videos rein, suchst Dir eine Länge (30, 60, 90, 120sek) und eine Musik aus, 2 Minuten später hast Du ein fertig geschnittenes Video. Viele meine Youtube Videos (die mit Musik im Hintergrund) sind zu 80% damit gemacht.
Beste Grüße aus Bremen
Jens
Hi Jens,
sorry ich habe wohl nicht richtig gefragt. Ich meine das Tutorial (den Mitschnitt vom Bildschirm https://youtu.be/H0gosZsKY9g). Magix Video Deluxe ist ja nur eine Schnittprogramm, oder?
Gruß
Jörgen
Hi Jörgen,
Du meinst bei 2:17 den verpixelten Bereich, oder? Ja das kann man auch mit Magix machen. Das ist ein Video-Schnittprogramm und es kann auch Videos verändern. Es lassen sich Titel einblenden, Farben anpassen aber auch Dinge verpixeln. Wenn Du Videos nutzt, brauchst Du ein Werkzeug wie Magix um zu professionellen Ergebnisse zu bekommen, es lohnt sich einmal die Zeit zur Einarbeitung zu investieren (und geht mit Hilfe von Youtube auch recht schnell).
Ich hoffe, das beantwortet Deine Frage!
Beste Grüße
jens
Ok, ich versuche es noch mal. 😉
Mit welchem Programm hast du diese Video Anleitung erstellt?
„Aufgrund einiger Nachfragen habe ich die Prozedur mal gefilmt und bei Youtube hochgeladen, hier der Link: https://youtu.be/H0gosZsKY9g“
Womit wird der Bildschirm abgefilmt?
Danke
Hallo,
ich versuche grad vergebens mit Marzipano eine 360 Grad Galerie zu erstellen. Auf der Marzipano Seite kann ich Problemlos mehrere Panoramen von meiner Ricoh Theta einfügen, Info Hotspots und Link Hotspots positionieren und Bilder benennen. Klicke ich auf „Export“ wird auch eine ZIP Datei runtergeladen, was allerdings – beachtet man die Größe der Datei – zu schnell für meine Internetleitung geschieht (80MB unter 1s). Die ZIP Datei wird allerdings mit der korrekten Größe angezeigt.
Nun das Problem: Ich kann die Panoramabilder nicht in sehen! Die Spots sind vorhanden und wandern auch gemäß der Bewegung des Panoramas, doch ist das Bild schwarz, als ob kein Bild vorhanden wäre….
Funktioniert Marzipano nicht mehr?
Danke schon einmal für deine Hilfe
Gruß
Marc
Hi Marc,
Ich habe das in den letzten Wochen nicht probiert, aber bei mir hat bisher das immer funktioniert und die Seite sieht aus wie immer. Ich würde an folgenden 2 Stellen die Fehlersuche beginnen:
1. probiere mal einen anderen Browser aus (evtl. blockiert Deiner irgendwelche Funktionaliäten der Homepage)
2. Überprüfe, ob die Theta die Anforderungen des Uploads erfüllt
-Sphere
-Equirectangular aspect ration 2:1
-cube filenames suffixex _b, _d, _f, _r, _t, _u
-JPEG or TIFF
-Maximum sphere size 23000x11500px
-Maximum cube size 16000x16000px
Beste Grüße
jens
Wenn man auf Pano und Google verzichten möchte gibts auch das Tool 360-To-HTML mit dem man ein HTML und JavaScript Template mit eingebettetem Bild erhält. Die Steuerung kann man frei konfigurieren. Leider nicht kostenlos, aber auch nicht teuer. Scheint ein einzelner Entwickler zu sein. https://www.marcogriep.de/360-to-html
Hi Eric,
das kannte ich nocht nicht. Auch eine interessante Variante, Danke für den Hinweis.
mfg
j
Hi,
zur Info, Ricoh Theta Pano´s lassen sich ohne Probleme mit dem Marzipano Tool verarbeiten.
Gruß
Jörgen