Beiträge von Sempervivum

Ist das wirklich nötig? Sowohl für einen Bildpfad als auch für einen Link kannst Du doch eine relative URL verwenden. Das hat ohnehin Vorteile, weil Du dann problemlos lokal testen und problemlos auf eine andere Domain umziehen kannst.

Zitat

Gibt es zum Beispiel die Möglichkeit, dass der anstatt nur ein File zu durchsuchen, alle FIles eines Ordners zu durchsuchen, und für jedes File ein Array zu erstellen?

Ja, die gibt es: Du kannst dir die Dateien in einem Ordner mit der Funktion glob ermitteln:

$files = glob("verzeichnis/*.php");
$h1img = [];
foreach ($files as $currentfile) {
    $doc = new DOMDocument();
    $doc->loadHTMLFile($currentfile);
    $h1 = $doc->getElementsByTagName('h1')->item(0);
    $headline = $h1->nodeValue;
    $img = $doc->getElementsByTagName('img')->item(0);
    $imgsrc = $img->getAttribute("src");
    $h1img[] = ["h1" => $headline, "img" => $imgsrc];
}
var_dump($h1img);

Du hast dann nur das Problem, dass es weitere Dateien in dem Ordner geben könnte, die nicht zu durchsuchen sind. Dann brauchtest Du ein zusätzliches Kriterium, um die richtigen herauszufiltern, z. B. durch ein Prefix:

$files = glob("verzeichnis/article-*.php");

Ja, so hast Du das Problem, dass die Überschrift drüber liegt. Der Grund dafür, dass meine Version funktioniert, ist das Event-Bubbling:

Überschrift und Bild sind Kindelemente vom header. Hovert man diese, so steigt das Event wie eine Blase in der Hierachie auf und erreicht den header, wo es abgefangen wird.

Betr. Hover: Meinst Du es so?

https://jsfiddle.net/Sempervivum/9b83hsLq/6/

Ich habe mal ausgearbeitet, wie man Überschrift und Titelbild aus dem HTML in einer PHP-Datei auslesen kann:

    $doc = new DOMDocument();
    $doc->loadHTMLFile("testdomtestpage.php");
    $h1 = $doc->getElementsByTagName('h1')->item(0);
    $headline = $h1->nodeValue;
    echo $headline;
    $img = $doc->getElementsByTagName('img')->item(0);
    $imgsrc = $img->getAttribute("src");
    echo $imgsrc;
    $h1img = ["h1" => $headline, "img" => $imgsrc];
    var_dump($h1img);

Voraussetzung: Überschrift und Titelbild müssen jeweils das erste Tag dieser Art im Dokument sein. Mit diesem Code kannst Du leicht das Array mit diesen Infos aktualisieren.

Zitat

Allerdings kenne ich nur die Möglichkeit auf ein BIld zu schreiben - wie es in dem Zufallsgitter nötig ist - wenn das Bild ein background-img ist und kein normal eingefügtes Bild.

Nein, beides ist möglich. Hier:

Mysteriöser Spalt unter IMG in DIV-Box + text vertikal zentrieren

habe ich in Posting #11 und #12 beide Varianten mit ihren Vor- und Nachteilen kurz beschrieben.

Verstehe, also nur eine Variante. Dann versuche mal, deine Seite mit dem PHP aufzubauen.

Zur automatischen Generierung: In welcher Form liegen die Artikel denn vor? Jeder Artikel eine HTML-Seite? Oder auch durch PHP geniert.

1.

Zitat

Wenn ich das allerdings richtig verstehe, dann müsste ich in diesem Fall auch nach jedem geschriebenen Artikel.

Die Überschrift und das Titelbild aus dem Artikel in die PHP Datei manuell einfügen. (Dafür quasi ein Array erstellen)

Wie ich in Post #4 schon schrieb, ist es aller Voraussicht nach möglich, die Überschrift automatisch aus dem Artikel zu lesen und in das Array zu schreiben.

2.

Zitat

ob es möglich ist das man sagt erstelle für jeden geschriebenen Artikel, automatisch ein Array mit den darin enthaltenen Überschriften sowie Titelbildern.

Ja, auch das sollte möglich sein.

Wenn ich das richtig verstehe, sind das aber zwei verschiedene Dinge:

1.: Ein Array mit Überschrift und Titel für jeden Artikel.

2. Für jeden Artikel ein Array mit allen darin enthaltenen Überschriften und Titelbildern.

??

Zitat

Warum ist das denn so?

Dieses CSS bezieht sich auf body und dessen Höhe ist nicht gleich der Fensterhöhe, sondern richtet sich nach dem Inhalt, in diesem Fall der Höhe deines Formulars. Damit body das Fenster ausfüllt, muss man die Höhe auf 100vh setzen (abzüglich padding in diesem Fall).

Zitat

Und das Problem mit dem Padding besteht ebenso noch. Sollte man wenn die %-Angaben nicht greifen px-Angaben nehmen ?

Meinst Du damit, dass Du das Formular weiter nach unten verschieben möchtest? Dann funktioniert dieses in der Demo von MrMurphy einwandfrei:

.formular {
    margin-top: 30%;
}

Edit: Ich sehe, dass ich es falsch verstanden habe. Du möchtest dem Submit-Button ein padding geben. Auch das funktioniert bei mir einwandfrei:

.formular button {
    align-self: center;
    padding: 5%;
}

Der Button hat jedoch standardmäßig schon ein seitliches Padding, jedenfalls bei mir in Opera:

input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    padding: 1px 6px;
}

Dadurch hat man den Eindruck, dass das seitliche Padding nicht wirkt, weil es sich nur wenig ändert.

Das PHP-Array müsste dann wahrscheinlich etwa so aussehen:

$h1img = [
    ["h1" => "Dies ist die erste Überschrift", "img" => "erstesbild.jpg"],
    ["h1" => "Dies ist die zweite Überschrift", "img" => "zweitesbild.jpg"],
    ["h1" => "Dies ist die dritte Überschrift", "img" => "drittesbild.jpg"]
];
// entspr. ergaenzen

shuffle($h1img);

Durch das shuffle bekommen die Elemente im Array eine zufällige Reihenfolge.

Dann kannst Du die Elemente aus dem Array in deinem HTML einfügen:

<p><?php echo $h1img[0]["h1"]; ?></p>

Ungetestet,

Also doch Arrays im Sinne von PHP.

Zitat

in die einzelnen Divs, des GIttersystems möchte ich zufällige arrays includieren.

Verstehe ich das jetzt richtig, Du möchtest in den Divs des Gitters verschiedene Inhalte (Titelbild und Überschrift) anzeigen, die Du aus diesem PHP-Array entnehmen willst?

Zitat

Gibt es hier eine Möglichkeit dass sich die Arrays das Titelbild und die Überschrift, automatisch aus einem Blogartikel holen

Auch das sollte mit PHP möglich sein, vorausgesetzt, dass sich diese Elemente eindeutig identifizieren lassen, entweder durch eine Aussage wie "es handelt sich um die erste Überschrift / das erste Bild" oder indem Du ihnen beim Verfassen des Blogs eine ID gibst.

Lösung zu dem zweiten Problem findest Du hier:

https://stackoverflow.com/questions/1762…-parent-element

Es handelt sich um eines der Mysterien von CSS, die ich noch nicht verstanden habe.

Bei der ersten Frage verstehe ich nicht was Du mit arrays meinst? Wahrscheinlich keine arrays im Sinne einer Programmiersprache wie Javascript?

Da sträuben sich mir die Nackenhaare so etwas durch Verdoppeln der Funktionen zu machen, aber weil Du schreibst, dass die Schleifen später kommen, habe ich es mal so gemacht.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Datei-Upload</title>
</head>
<body>
    <script type="text/javascript">
        function fileChangeA() {
            var fileList = document.getElementById("fileA").files;
            var file = fileList[0];
            if (!file)
                return;
            document.getElementById("fileNameA").innerHTML = 'Dateiname: ' + file.name;
            document.getElementById("fileSizeA").innerHTML = 'Dateigr&ouml;&szlig;e: ' + file.size + ' B';
            document.getElementById("fileTypeA").innerHTML = 'Dateityp: ' + file.type;
            document.getElementById("progressA").value = 0;
            document.getElementById("prozentA").innerHTML = "0%";
        }
        function fileChangeB() {
            var fileList = document.getElementById("fileB").files;
            var file = fileList[0];
            if (!file)
                return;
            document.getElementById("fileNameB").innerHTML = 'Dateiname: ' + file.name;
            document.getElementById("fileSizeB").innerHTML = 'Dateigr&ouml;&szlig;e: ' + file.size + ' B';
            document.getElementById("fileTypeB").innerHTML = 'Dateityp: ' + file.type;
            document.getElementById("progressB").value = 0;
            document.getElementById("prozentB").innerHTML = "0%";
        }
        var clientA = null, clientB = null;
        function uploadFiles() {
            var fileA = document.getElementById("fileA").files[0];
            var fileB = document.getElementById("fileB").files[0];
            var formData = new FormData();
            var progA = document.getElementById("progressA");
            var progB = document.getElementById("progressB");
            function onerror(e) {
                alert("errror!");
            }
            function onloadA(e) {
                document.getElementById("prozentA").innerHTML = "100%";
                progA.value = progA.max;
            }
            function onloadB(e) {
                document.getElementById("prozentB").innerHTML = "100%";
                progB.value = progB.max;
            }
            function onprogressA(e) {
                var p = Math.round(100 / e.total * e.loaded);
                document.getElementById("progressA").value = p;
                document.getElementById("prozentA").innerHTML = p + "%";
            };
            function onprogressB(e) {
                var p = Math.round(100 / e.total * e.loaded);
                document.getElementById("progressB").value = p;
                document.getElementById("prozentB").innerHTML = p + "%";
            };
            if (fileA) {
                progA.value = 0;
                progA.max = 100;
                formData.append("dateiA", fileA);
                clientA = new XMLHttpRequest();
                clientA.onerror = onerror;
                clientA.onload = onloadA;
                clientA.upload.onprogress = onprogressA;
                clientA.onabort = function (e) { alert("Upload abgebrochen"); };
                clientA.open("POST", "upload2.php");
                clientA.send(formData);
            }
            if (fileB) {
                progB.value = 0;
                progB.max = 100;
                formData.append("dateiB", fileB);
                clientB = new XMLHttpRequest();
                clientB.onerror = onerror;
                clientB.onload = onloadB;
                clientB.upload.onprogress = onprogressB;
                clientB.onabort = function (e) { alert("Upload abgebrochen"); };
                clientB.open("POST", "upload2.php");
                clientB.send(formData);
            }
        }
        //function uploadAbort() {
        //    if (client instanceof XMLHttpRequest)
        //        client.abort();
        //}
    </script>
    <form action="" method="post" enctype="multipart/form-data">
        <input name="fileA" type="file" id="fileA" onchange="fileChangeA();" />
        <div>
            <div id="fileNameA"></div>
            <div id="fileSizeA"></div>
            <div id="fileTypeA"></div>
            <progress id="progressA" style="margin-top:10px"></progress> <span id="prozentA"></span>
        </div>
        <input name="fileB" type="file" id="fileB" onchange="fileChangeB();" />
        <div>
            <div id="fileNameB"></div>
            <div id="fileSizeB"></div>
            <div id="fileTypeB"></div>
            <progress id="progressB" style="margin-top:10px"></progress> <span id="prozentB"></span>
        </div>
        <input name="upload" value="Upload" type="button" onclick="uploadFiles();" />
        <input name="abort" value="Abbrechen" type="button" onclick="uploadAbort();" />
    </form>
</body>
</html>

upload2.php:

<?php
if (isset($_FILES['dateiA'])) {
    move_uploaded_file($_FILES['dateiA']['tmp_name'], 'uploads/'.basename($_FILES['dateiA']['name']));
}
if (isset($_FILES['dateiB'])) {
    move_uploaded_file($_FILES['dateiB']['tmp_name'], 'uploads/'.basename($_FILES['dateiB']['name']));
}
?>

Zitat

Zitat: Nachteil: Container passt sich nicht an Bild an

Das habe ich noch nirgends gelesen.

Bin mir sehr sicher, dass das so ist: Der Container passt sich nicht an die Größe des Hintergrundbildes an. Versuch macht kluch:

https://jsfiddle.net/m786nkxj/

Wenn ich das richtig sehe, brauchst Du nur die Variable client ebenfalls spezifisch für jeden Upload anzulegen, dann sollte es funktionieren.

In einem weiteren Schritt könntest Du dann die Daten in einem Array ablegen und die ganzen Vorgänge in einer Schleife bearbeiten, dann musst Du Variablen und Funktionen nicht vervielfachen. Besonders eine Erweiterung auf mehr Uploads wäre dann einfacher.

Zitat

Ich könnte Abfragen wie breit der Bildschirm ist

Ich bezweifle, dass diese Information in PHP direkt verfügbar ist. Hier wird empfohlen, diese Infos mit Javascript zu ermitteln und an den Server zu schicken:

https://stackoverflow.com/questions/1810…p-on-first-load

Dann könnte man es auch gleich mit Javascript berechnen.

Aber wahrscheinlich nicht nötig, denn mein letztes Fiddle müsste eigentlich liefern, was Du brauchst.

PS: OMG, ich muss mich korrigieren: Automatische Zentrierung ist sehr wohl möglich, man kann auch die Größe eines absolut positionierten Elementes mit %-Angaben definieren:

https://jsfiddle.net/9b83hsLq/5/

Jetzt brauchst Du nur noch den Text einschl. margin/padding dynamisch zu machen.

Zitat

macht es dann nicht wieder mehr sinn einfach ein IMG in die Box zu setzen? .. dann bräuchte ich dem nur ein Width: 100% geben & die höhe errechnet sich automatisch.

Wenn ich dich richtig verstehe, willst du, dass der Text nicht neben/unter/über dem Bild sein soll, sondern darüber.

Und dafür gibt es nur diese Wege:

• Bild als Hintergrundbild, Text als Inhalt. Vorteil: Text kann sauber zentriert werden. Nachteil: Container passt sich nicht an Bild an
• Bild als img-Tag und als Inhalt, Text absolut positioniert. Vorteil: Bildgröße passt sich automatisch an. Nachteil: Text kann nicht automatisch zentriert werden, da er aus dem Textfluss heraus fällt. Zentrierung muss über top und left austariert werden und das ist mit CSS kaum dynamisch zu machen, wenn das Bild dynamisch ist. Das Problem, das Du ursprünglich hattest:

Zitat

Zudem lässt sich der Text in der Box nicht vertikal zentrieren

Zitat

Oder kann ich das nicht evtl eben mit PHP umsetzen?

Nein, PHP bietet keine Lösung, weil Du damit auch nur HTML und CSS anlegen kannst.

Zitat

Aber der eigentliche Sinn, warum ich das Bild nicht als Hintergrund festgelegt hab war, dass das Bild so in der Höhe nicht richtig zu sehen ist.

Verstehe ich dich richtig: Du störst dich daran, dass das Bild nicht in voller Höhe zu sehen ist? Das ist leider ein Negativum bei Hintergrundbildern, dass sich der Container, in dem sie drin sind, nicht in der Größe an das Bild anpasst, sondern man muss die Größe explizit setzen, so wie ich es hier getan habe:

https://jsfiddle.net/9b83hsLq/3/

Umgekehrt funktioniert es jedoch: Man kann das Hintergrundbild dazu bringen, sich an den umgebenden Container anzupassen:

https://wiki.selfhtml.org/wiki/CSS/Eigen…background-size

Die Ursache für den Spalt und wie man ihn weg bekommt, wird hier beschrieben:

https://stackoverflow.com/questions/3144…445364#31445364

Vertikale Zentrierung war früher ein gewisses Problem aber durch Flexlayout ist es jetzt ganz einfach:

https://jsfiddle.net/9b83hsLq/2/

Dabei verschwindet offenbar auch der Spalt ohne weitere Maßnahmen.

Gut zur Info über Flexlayout:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Edit: Ahh, Stef war schneller!

Edit2: U. U. müsste man das Bild noch responsiv machen.