Hugo Shortcode

Der Panorise Shortcode für Hugo bindet 360° Bilder und veröffentlichte virtuelle Rundgänge in eine Hugo Website ein. Bilder können über die Bild-ID aus Panorise geladen werden. Rundgänge werden über ihren Public Key eingebettet und benötigen keinen API Token im erzeugten HTML.

1. Shortcode-Datei anlegen

Lege in deinem Hugo Projekt die Datei layouts/shortcodes/panorise.html an.

Der Dateiname bestimmt den Namen des Shortcodes. Da die Datei panorise.html heißt, verwendest du den Shortcode später mit panorise.

2. Quellcode einfügen

Kopiere die aktuelle Shortcode-Datei aus dem Repository unter cms-plugins/hugo/panorise.html in dein Hugo Projekt.

3. Hugo Config anpassen

Hinterlege die Panorise-Server-URL und optional das API-Token in deiner Hugo-Konfiguration.

Beispiel für config.toml:

[params.panorise]
  serverUrl = "https://app.panorise.de"
  apiToken = "..."

Den API Token brauchst du nur, wenn du Bilder per Bild-ID einbettest. Eine Anleitung dazu findest du unter API Token erstellen. Die serverUrl kann in der Regel auf https://app.panorise.de bleiben.

4. 360° Bild verwenden

Füge den Shortcode in eine Hugo Inhaltsdatei ein:

{{< panorise id="123" desc="Showroom" width="100%" height="400" >}}

Ersetze 123 durch die Bild-ID aus Panorise.

Alternativ kann weiterhin eine direkte Panorama-URL verwendet werden:

{{< panorise url="https://app.panorise.de/..." desc="Showroom" width="100%" height="400" >}}

5. Rundgang verwenden

Veröffentlichte Rundgänge bindest du mit type="tour" und dem Public Key ein:

{{< panorise type="tour" publicKey="PUBLIC_KEY" desc="Virtueller Rundgang" width="100%" height="500" >}}

Ersetze PUBLIC_KEY durch den Public Key des veröffentlichten Rundgangs. Private Rundgänge werden von Panorise nicht öffentlich ausgeliefert und können deshalb nicht eingebettet werden.

Alternativ kannst du eine direkte Rundgang-URL verwenden:

{{< panorise type="tour" url="https://app.panorise.de/tour/PUBLIC_KEY" desc="Virtueller Rundgang" width="100%" height="500" >}}

6. Parameter

  • type: Optional. Standard ist image; für Rundgänge tour verwenden.
  • id: Die Bild-ID aus Panorise, nur für 360° Bilder.
  • publicKey: Der Public Key eines veröffentlichten Rundgangs.
  • url: Direkte Panorama- oder Rundgang-URL.
  • desc: Optionale Beschreibung unterhalb des iframes.
  • width: Die Breite des iframes, Standardwert ist 100%.
  • height: Die Höhe des iframes, Standardwert ist 400 für Bilder und 500 für Rundgänge.

7. Wichtige Hinweise

Der API Token wird nur beim Hugo Build verwendet. Er wird nicht in das erzeugte HTML geschrieben, solange du ihn in der Hugo Konfiguration hinterlegst und nicht direkt im Content verwendest.

Da Hugo eine statische Website erzeugt, werden Änderungen an Panorise Bildern und Rundgängen erst nach einem erneuten Hugo Build auf deiner Website sichtbar.