Wie kann ich eine WD Seite an eine iframe Seite anpassen?

nicoleholthoefer schrieb am 12.03.2016 um 16:18 Uhr

Hallo,

nutz den WD 11 und möchte gerne eine dynamische Galerie, die automatisch alle Bilder in einem Verzeichnis als Thumbnail anzeigt. Ich möchte aber keine Scrollbar innerhalb der WD Seite sondern dass die Seite sich automatisch an den Inhalt der Galerie anpasst.

Leider sind die Galerien im WD alle statisch. Ich habe mir also eine Galerie mit Pixlie und Lightbox gebaut. Die Galerie kann mit einer PHP Seite geladen werden. Das PHP script generiert dann automatisch eine Webseite mit allen Bildern, die sich in einem bestimmten Verzeichnis befinden. Das funktioniert hervorragend.

Ich habe mir einen Platzhalter auf meine Webseite gelegt und die PHP Seite als iframe geladen. Das iframe hat ja dann eine feste Größe und erzeugt einen Scrollbalken, um die gesamte eingebettete Seite anzeigen zu können.

Also habe ich meinem iframe den Namen und ID responsive-iframe gegeben. Hier der HTML Code vom Widget:

<div>

</div>

In der PHP Seite habe ich folgendes Script aufgenommen, um die Größe des iFrame anzupassen:

    function adjustIframe() {
      $(parent.document.getElementById("responsive-iframe")).css("height", $("html").css("height"));
    }

</script>

Wenn ich eine eigene test.html Seite baue, welche mein PHP mit dem gleichen HTML Code einbindet wie das Widget funktioniert alles wie gewünscht. Aber meine WD Seite bleibt leider starr, schneidet also das iframe wieder ab.

Gibt es irgendeinen Weg die WD Seite dazu zu bringen, den gesamten iframe anzuzeigen? Muss ich vieleicht ein Script hinzufügen, um das Hauptfenster anzupassen? Ich habe bereits für das Widget Seitenposition verdrängen eingestellt. Im Editor funktioniert das und beim Verschieben passt sich die Seite automatisch an. Scheint aber zur Laufzeit nicht relevant zu sein.

Hat jemand eine Idee?

Kommentare

marboe schrieb am 12.03.2016 um 21:42 Uhr

Hallo, löst sich dein Problem wenn du statt width="560" height="315" mit Prozent arbeitest? Also: width="100%" height="100%". Gruß Marboe

nicoleholthoefer schrieb am 13.03.2016 um 12:15 Uhr

Leider nein - macht keinen Unterschied.

Habe mal mit meiner test.html rumgespielt und es sieht so aus, als wenn die vom WD generierten umgebenden DIVs feste Längen vorgeben. Das verstehe ich aber eh nicht. Ich dachte WD unterstützt responsive design. Das funktioniert aber nicht mit festen Längenangaben ...

Habe dann mal das im WD enthaltene iframe Widget versucht - im Notfall lebt man ja dann auch mit Scrollbars. Um dann aber leider festzustellen, dass das Widget auf mobilen Devices nicht funktioniert. Da lässt sich dann gar nix mehr scrollen und wird trotzdem abgeschnitten.

So langsam gehen mir echt die Ideen aus ...

marboe schrieb am 13.03.2016 um 23:16 Uhr

Das PHP script generiert dann automatisch eine Webseite mit allen Bildern, die sich in einem bestimmten Verzeichnis befinden. Das funktioniert hervorragend.

Solange du die Breite des php nicht auf die Breiten der Varianten anpasst, wird das nichts werden, denke ich. Hast du insgesamt 3 Varianten erstellt zum Beispiel, bräuchtest du auch 3 generierte php Seiten. Gruß Marboe

nicoleholthoefer schrieb am 14.03.2016 um 08:35 Uhr

Die Breite ist nicht mein Problem. Da man Widgets eh nich teilen kann sonder kopieren muss haben meine Varianten immer eine passend Breite. Auch hier nervt mich, dass WD immer mit fixen breiten arbeitet und nicht automatisch an die Fensterbreite skaliert. Wenn man aber feste Längen nutzt geht das ja auch nicht, weil Zeilenumbrüche die Länge ändern würden. Für mich hat das leider nix mit responsive mehr zu tun. :-(

Während auf dem PC das iFrame nun einen Scrollbalken zeigt wird der auf dem Tablet aber nicht gezeigt. Ich kann auch nicht wie sonst am Tablet die Seite innerhalb des iFrame mit dem Finger schieben. Also scheint das vorgefertigte Widget wohl mobile Geräte nicht zu unterstützen.

Werde das Widget daher wieder runter schmeißen und muss es wohl doch wieder selber programmieren. Das ärgert mich. Und um erst gar nicht diese Probleme zu haben wäre es schön, wenn das mit der automatischen Längenanpassung funktionieren würde...

friedrich-h39 schrieb am 29.03.2016 um 13:57 Uhr

Hallo Nicole,

Du hast ein PHP-Dokument und willst den Code in eine WD-Seite einfügen. Zuerst musst Du an den HTML-Code des PHP-Dokuments herankommen. Bei mir habe ich Skript-Editor.app (Apple Tool), ADOBE Dreamweaver oder Adobe ExtendedScript Toolkit (evtl. als Trialversion erhältlich oder als Ein-Monats-Subscription oder ein Bekannter hilft). Dort kann der Code direkt herauskopiert oder in ein Textdokument konvertiert werden.

Versuche es mal so, wie ich es mit einem PHP-Formular gemacht habe:

Auf Deiner WD-Seite zieh ein Rechteck von beliebiger Größe an beliebiger Stelle auf, Farbe ist egal, auf die gewünschte Ebene. Mit Rechtsklick auf das Rechteck gehe im Popupmenü auf Webeigenschaften, dort auf Platzhalter und markiere das Optionsfeld: mit HTML-Code ersetzen. Kopiere aus dem Textdokument den Code zwischen den <head> </head> Tags und füge ihn im WD-Platzhalterfeld "HTML-Code (head)" ein (OK), kopiere aus dem Textdokument den Code zwischen den <body> </body) Tags und füge ihn im WD-Platzhalterfeld "HTML-Code (body) ein (OK). Du hast damit ein Widget erzeugt.

Das Ergebnis lässt sich jetzt noch nicht in der Vorschau betrachten. Die Seite muss aus WD als Webseite exportiert und im Windows Explorer von .htm zu .php werden, dann die Seite auf den Webserver hochladen (FTP-Programm FileZilla oder ähnliches). Nun die Seite im Webbrowser aufrufen und schauen, ob alles zu sehen ist. (Wenn nichts zu sehen ist, liegt ein Fehler beim Kopieren vor.)

Wenn alles zu sehen ist, kann mit der Platzierung in WD weitergemacht werden. Bezugspunkt der Position des PHP-Teils ist das Rechteck an der Ecke oben links. Eventuell ist im HTML-Code des PHP-Teils ein Randbereich angegeben, die zu der Eckposition addiert (style="margin-left: 30px - z.B.) oder auf 0 geändert werden muss. Die Breite müsste sich ebenfalls aus dem HTML-Code ergeben. Oder einen Screenshot der Browseranzeige herstellen und im Bildbearbeitungsprogramm ablesen. Dann das Rechteck auf der WD-Seite auf diese Breite dimensionieren (Länge bei Bedarf ebenso). Damit kann das Rechteck nun genau platziert und ausgerichtet werden (mittig, rechts, linksbündig mit anderen Elementen etc.).

Gleiche Prozedur wie vorher (Webseite exportieren, Datei umbenennen zu .php, Seite zum Webserver hochladen, Ergebnis im Webbrowser anschauen.) Viel Glück!

Grüße von Friedrich

marboe schrieb am 29.03.2016 um 14:19 Uhr

Hallo Friedrich-h39.

ob das dem Threadersteller weiter hilft, weiß ich nicht sicher .

Aber einen Schritt kannst du definitiv bei so einem Vorgehen einsparen:

Das Ergebnis lässt sich jetzt noch nicht in der Vorschau betrachten. Die Seite muss aus WD als Webseite exportiert und im Windows Explorer von .htm zu .php werden, dann die Seite auf den Webserver hochladen

Das geht ganz einfach im WD selbst, indem du in der Ebenengalerie den Seitennamen um ein
.php
ergänzt. Das dies nicht (!) auf der index-Startseite gemacht werden darf, ist klar. Auf allen weiteren Seiten funktioniert das prima. Du kannst also deine Kontaktseite benennen mit: "kontakt.php" und sie wird genauso als solche exportiert. Alle weiteren Seiten erhalten wie gewohnt ihre Endung ".htm".
Gruß Marboe

friedrich-h39 schrieb am 29.03.2016 um 20:14 Uhr

Hallo Friedrich-h39.

ob das dem Threadersteller weiter hilft, weiß ich nicht sicher .

Aber einen Schritt kannst du definitiv bei so einem Vorgehen einsparen:

Das Ergebnis lässt sich jetzt noch nicht in der Vorschau betrachten. Die Seite muss aus WD als Webseite exportiert und im Windows Explorer von .htm zu .php werden, dann die Seite auf den Webserver hochladen

Das geht ganz einfach im WD selbst, indem du in der Ebenengalerie den Seitennamen um ein
.php
ergänzt. Das dies nicht (!) auf der index-Startseite gemacht werden darf, ist klar. Auf allen weiteren Seiten funktioniert das prima. Du kannst also deine Kontaktseite benennen mit: "kontakt.php" und sie wird genauso als solche exportiert. Alle weiteren Seiten erhalten wie gewohnt ihre Endung ".htm".
Gruß Marboe

Hallo Marboe, danke für den Tip. Zu meinem anderen Text muss ich korrigieren: Ich habe den HTML-Text aus dem Original-PHP-Dokument nicht wie geschrieben in jeweils die HTML-Code (head) und (body) Bereiche der Webeigenschaften getrennt kopiert, sondern den gesamten Text mit dem ersten "<?php...." kopiert und in den HTML-Code (body) Bereich kopiert.

Grüße von Friedrich

nicoleholthoefer schrieb am 31.03.2016 um 17:33 Uhr

Hallo Friedrich-h39 und Marboe,

zunächst einmal Danke für die Hilfe. Leider ist es immer noch nicht so, wie es sein sollte. Ich habe den iframe inzwischen ans laufen bekommen - aber nur mit scrollbar im iframe. Anstatt also das vorgefertigte Widget zu nehmen habe ich mein eigenes iframe widget gebaut. Da funktioniert das Scrollen jetzt auch auf mobilen Endgeräten. Dafür habe ich einen Platzhalter in der Größe des gewünschten iframe auf meine Seite positioniert und folgenden HTML Code für den Body eingetragen:

</div>

Das funktioniert schonmal. Natürlich muss man xyz.php mit der URL auf die eigentlich zu ladende Seite ersetzen

Eigentich wollte ich aber gar keine scrollbar in der Seite. Ich wollte eine responsive Seite, die je nach Menge der Bilder in der Galerie alle Bilder anzeigt - also den Scrollbalken vom Browser benutzen. Deswegen habe ich den Tip von friedrich-h39 genutzt und statt des iframe direkt den PHP Code in die Seite aufgenommen. Dann habe ich die Seite noch wie von Marboe beschrieben auf die Endung .php umbenannt. Jetzt passiert aber etwas ganz komisches:

Die Galerie wird vollständig geladen und auf der Seite angezeigt. Ich habe also wie gewünscht nur den Scrollbar Balken vom Browser. Aber mein Footer ist nicht mit ans Seitenende gewandert. Der ist exakt statisch da, wo er im Editor auch liegt.

Habt Ihr noch eine Idee, wie ich jetzt den Footer dazu bringe automatisch zur Laufzeit am Ende der Seite zu erscheinen?

Danke,

Nicole