Einbettung in die eigene Homepage

Für die öffentliche Sichtbarkeit kann der Wanderplan in bestehende Homepage des Vereins eingebettet werden. Dies geschieht über einen so genannten iframe. Im folgenden Beispiel wird der Wanderplan in eine WordPress Seite eingebettet.

Dabei handelt es sich um den gleichen Wanderplan wie im VereinsManager, nur das jegliche Navigation ausgeklammert ist. Dazu wird im Block-Editor ein neuer HTML-Block mit dem folgenden Inhalt angelegt:

<iframe  id="vereinsmanager" src="https://wanderhausen.vereinsmanager.org/tr_list_ext/" style="height:500px; width:100%; border:none;"></iframe>
<script type="module">
  import { initialize } from "https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@latest/dist/index.js";
  initialize({}, "#vereinsmanager");
</script>

Im Code-Editor von WordPress sieht der Block dann so aus:

<!-- wp:html -->
<iframe  id="vereinsmanager" src="https://wanderhausen.vereinsmanager.org/tr_list_ext/" style="height:500px; width:100%; border:none;"></iframe>
<script type="module">
  import { initialize } from "https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@latest/dist/index.js";
  initialize({}, "#vereinsmanager");
</script>
<!-- /wp:html -->

• Wichtig ist, dass die richtige Domäne (Beispiel: https://wanderhausen.vereinsmanager.org) eingetragen ist und dass der Pfad /tr_list_ext definiert ist
• Der Wanderplan sollte möglichst auf einer eigenen Seite platziert werden, in die der iFrame eingebunden wird.
• Das aufgerufene Script open-iframe-resizer ermöglicht es, die jeweilige Länge des Wanderplans zu ermitteln und die Größe des iFrames dynamisch anzupassen.
• Das Template der Webseite sollte außerdem die volle Seitenbreite ausnutzen. Beispiel: Full-Width - Contained Content