IPanorama ist ein Plugin, mit welchem Du 360 Grad Fotos und auch Rundgänge auf Deiner Webseite umsetzen kannst. Es gibt eine kostenfreie Version und eine Pro Version. Ich habe die Pro Version im Einsatz. Die Unterschiede sind mir nicht bekannt, werden aber bei passender Gelegenheit nachgetragen.

Beispiel einer 360 Grad Aufnahme:

Übersicht von iPanorama

Grundsätzlich schlüsselt sich iPanorama in 4 Bereiche auf:

1.) All items
2.) Add new
3.) Settings
4.) Documentation

Legst Du ein neues 360 Grad Foto an, gliedert sich dies wieder in 3 Bereiche auf:

1.) General
2.) Scenes
3.) Hotspots

Um ein 360 Grad Foto anlegen zu können, ist der Reiter Hotspots für uns erst einmal uninteressant, da dies für Rundgänge interessant ist. Rundgänge / Hotspots werde ich einem späteren Artikel seperat behandeln.

Grundsätzlich gibt es 3 Arten um Ein 360 Grad Panorama einzubinden:

  1. Sphere
  2. Cylinder
  3. Cube

Wir konzentrieren uns auf Schere und Cube.

Fangen wir mit Sphere an:

Das 360 Grad Bild per Sphere einzubinden ist die schnellste Variante und auch die einfachste. Die Sphere Variante ist gut, wenn es wirklich schnell gehen soll.

Wenn Du Dich allerdings für eine saubere und unverzerrte Variante entscheidest, dann ist die Cube Variante die ideale Lösung für Dich. Hier mal ein Unterschied zwischen Sphere und Cube:

Vorher Nachher
Schauen wir uns das Dashboard von iPanorama mal genauer an:
Register Karten:

  • (1) General (allgemeine Einstellungen)
  • (2) Scenes (hier werden die einzelnen 360 Grad Ansichten konfiguriert)
  • (3) Hotspots (wichtig für Rundgänge)

 

Scene Settings:

  • (4) Titel Deiner 360 Grad Ansicht
  • (5 + 6) Auswahl, mit welcher Art Du Dein 360 Bild in iPanorama einbinden möchtest:
    • Sphere
    • Cylinder
    • Cube
  • (7) Wieviele Texturen Du in Deiner 360 Grad Ansicht einfügen möchtest
  • (8) Einstellung, wie Dein 360 Grad Bild nach dem Laden starten soll einschließlich Zoom Faktor

Das wären die Einstellungen (also die Cube Variante), die für uns wichtig wären, die ich bevorzuge um sauber zu arbeiten.

Möchtest Du es “quick and dirty” umsetzen, dann wäre die Sphere Variante Deine Lösung.

Wie teile ich nun ein 360 Grad Bild in einzelne Kacheln auf, so dass ich dies hier wie im Screenshot oben der “Scene Settings” abbilden kann?

Grundsätzlich sieht ein 360 Grad Foto so aus, wenn man es in keinem 360 Viewer lädt:

Es gibt eine Seite, mit dem Du diese Cubemaps herstellen kannst:

https://jaxry.github.io/panorama-to-cubemap/

Ich nutze es in folgender Konfiguration:

  • Cubic (sharper details)
  • JPEG

Nachdem Du Deine Einstellungen gesetzt hast und Dein 360 Grad Bild hochgeladen hast, wird das Bild aufgeteilt in 6 Teile. Jedes Einzelne lässt sich runter laden. Ich rate dazu, jede Kachel in einem neuen Tab zu öffnen und dann manuell zu auf Deine Festplatte zu laden. Denn dann kannst Du diese in diesem Schema speichern und später richtig zuordnen:

Ab hier sollte es einfach für Dich sein, Dein 360 Grad Foto in iPanorama zu veröffentlichen:

  • Add new
  • Titel für Deine 360 Grad Ansicht vergeben
  • Scenen Titel vergeben
  • Art Deiner Datei von Sphere auf Cube ändern
  • Anzahl der Texturen von 1 Texture auf “6 Textures” ändern.
  • https://jaxry.github.io/panorama-to-cubemap/ besuchen
  • Settings auf Cubic (sharper details) und JPEG stellen
  • 360 Grad Bild hochladen
  • DIe Kacheln in einem neuen Tab öffnen und gemäß folgendem Schema speichern:
    • 1. Kachel in der Mitte: 360-left.jpg
    • 2. Kachel in der Mitte: 360-front.jpg
    • 3. Kachel in der Mitte 360-right.jpg
    • 4. Kachel in der Mitte 360-back.jpg
    • 5. Kachel oben: 360-top.jpg
    • 6. Kachel unten: 360-bottom.jpg
  • Die Bilder in den einzelnen Feldern auf Scene Settings des Plugins iPanorama hochladen und richtig zuordnen.
  • Bild in der Vorschau so ausrichten, wie es am Ende erscheinen soll, wenn das Bild geladen wird.
  • Unter “Yaw” in den Scene Settings die Positionen und dem Zoomfaktor übernehmen:
  • Speichern / veröffentlichen.

Einbinden von Deinem 360 Grad Bild auf Deiner Webseite

Du findest unter “all items” nun 2 Shortcodes. Einmal mit einer eindeutigen ID und einmal mit dem einem Slug. Also der Bezeichnung, wie Du Dein 360 Grad Foto benannt hast. Du kopierst dies nun und fügst es an beliebiger Stelle Deiner Seite ein. Nachdem Du Deinen Beitrag / Seite veröffentlicht hast, sollte Dein 360 Grad Foto nun sichtbar sein. Allerdings in voller Breite, englischen Titeln und ohne Vorschaubild. Das ändern wir nun.

Weitere / Generelle Anpassungen in iPanorama

Wir gehen nun wieder in die Einstellungen Deines 360 Grad Fotos. Da klicken wir auf “General” und passen nun 3 wichtige Dinge an:

  1. Die Größe
  2. Das Theme
  3. Das Vorschaubild
  • Du änderst die Größe in eine Größe, die für Dich und Deine Webseitenbesucher am besten passen sollte. Ich habe mich in meinem Beispiel für 600px mal 400px entschieden.

Ändern der Sprache in iPanorma

Die Sprache der Themes wird über die CSS gesteuert. In meinem Fall habe ich mich “Modern” entschieden. Du gehst per FTP in Deinen Pluginverzeichnis. Öffne folgenden Pfad:

/wp-content/plugins/ipanorama/lib/

Dort findest Du nun 3 Themes:

  • ipanorama.theme.default.css
  • ipanorama.theme.modern.css
  • ipanorama.theme.dark.css

Da ich mich für “Modern” entschieden habe, wähle ich nun per FTP die Datei ipanorama.theme.modern.css aus, öffne diese und suche folgenden CSS Code:

.ipnrm.ipnrm-theme-modern .ipnrm-btn-load:before {
content: “KLICK TO LOAD…”;
}

Hier tausche ich das KLICK TO LOAD… in einen Text meiner Wahl aus. In meinem Fall “Zum laden klicken”. Anschließend speichern und soweit Du es noch nicht auf Deinen Server geladen hast diese hochladen und mit der alten Datei überschreiben.

Ändern des Vorschaubildes in iPanorama

Wenn eine 360 Grad Aufnahme auf der Webseite geladen wurde, hängen da locker 8-9MB hinten dran. Je höher die Auflösung, desto mehr MB`s hängen dann hinten dran. Da es aus Performance Sicht keinen Sinn macht die 360 Grad Aufnahme mit dem laden der Seite zu starten empfiehlt es sich ein Vorschaubild zu hinterlegen. Dies lässt sich dann in den General Settings von iPanorama hinterlegen. Ich löse es für mich so, dass ich am Ende wenn alles fertig konfiguriert ist, ich die 360 Grad Aufnahme “starte” und dann von dieser Ansicht ein Screenshot erstelle. Diese lade ich dann als Preview Bild in den allgemeinen Einstellungen von iPanorama in der jeweiligen 360 Grad Ansicht hoch. Wenn Du alles gespeichert und veröffentlicht hast ist Dein Werk vollbracht. Ich wünsche Dir viel Spass mit Deinen 360 Grad Aufnahmen.

Responsive Darstellung Deines 360 Grad Bildes in iPanorama

Zu allererst legst Du eine Klasse für Dein 360 Grad Bild an. Hierzu erweitern wir den Shortcode, den wir auf der Seite für das 360 Grad Bild angelegt haben. In meinem Fall ist der Shortcode folgender:

Diesen erweitere ich nun um die class = “responsive-360”, was dann so aussieht:

 

Hast Du das, gehst Du in Scene Settings Deines 360 Grad Bildes und aktivierst “Custom CSS”:
… und fügst folgenden Code ein:
Hast Du das alles gemacht, sieht das ganze auf dem Desktop und auf mobilen Endgeräten folgendermaßen aus: