How-to: 360 Grad Fotos auf Hompage einbinden

JensAllgemein, Computer, DIY, Wissen

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

  1. Foto machen
  2. Bild abspeichern
  3. In WordPress hochladen
  4. URL Adresse Kopieren
  5. 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

  1. Foto machen
  2. Bild abspeichern
  3. gehe zu http://www.marzipano.net/tool/index.html#
  4. lade Bild hoch
  5. lade Zip Datei herunter
  6. entpacke Zip Datei lokal
  7. lade per FTP die entpackten Zip Dateien auf deine WordPress Seite hoch
  8. 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!

23 Gedanken zu „How-to: 360 Grad Fotos auf Hompage einbinden“

    1. 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

      Antworten

  2. 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

    Antworten

  3. 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???

    Antworten

    1. 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

      Antworten

  4. 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ß

    Antworten

    1. 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

      Antworten

  5. 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?

    Antworten

    1. 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

      Antworten

  6. 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?

    Antworten

    1. 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

      Antworten

      1. 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.

        Antworten

  7. 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

    Antworten

    1. 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

      Antworten

    1. 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

      Antworten

  10. 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

    Antworten

    1. 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

      Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.