Text über einem Bild

  • Hallo Zusammen,


    ich habe ähnliche Themen gefunden, aber leider nicht das passende, deshalb meine folgende Frage:


    Ich möchte eine Art Blog starten, auf der Startseite des Blogs, sollen zufällige Artikel angezeigt werden in folgendem Gitternetz:




    in die einzelnen Divs, des GIttersystems möchte ich zufällige arrays includieren. Hierzu würde ich eine Array Datei erstellen, in die ich einzelne Arrays mit dem Titelbild und der Überschrift meiner Artikel einfüge. Erste Frage: Gibt es hier eine Möglichkeit dass sich die Arrays das Titelbild und die Überschrift, automatisch aus einem Blogartikel holen, oder ist es die beste Lösung immer wenn ich einen Artikel verfasst habe, anschließend in meine Array Datei zu gehen, und dort den das Titelbild und die Überschrift mit Link einzufügen?

    Das nächste Problem ist, dass ich die Überschriften meiner Artikel in dem Zufallsgitter, auf die Bilder drauf setzten möchte. Das bedeutet ich möchte quasi auf das Bild drauf schreiben. Das habe ich wie folgt gemacht:



    Soweit, so gut. Das Hintergrundbild (Titelbild) ist nun genau so groß wie das über geordnete Div und der Text steht auf dem Bild. Aber mein nächstes Problem ist, ich möchte den Text relativ weit unten auf dem bild/ in dem div stehen haben. Doch wenn ich nun die Class .ueberschrift mit marign-top: 50px; verschieben möchte, verschiebt sich das Hintergrund bild mit.

    Was mache ich Falsch?

    Und ja: Ich bin blutiger Anfänger :(

    Beste Grüße

    Reschke

  • 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.

  • Ja genau. Ich würde jetzt eine PHP Datei nur für diese Arrays machen. Und diese dann immer um ein Array erweitern, sobald ich einen neuen Artikel geschrieben habe. Also das titelbild so wie die Überschrift in ein Array kopieren.


    Besser wäre natürlich wenn ich mir die immer erforderliche aktalsierung ersparen könnte, indem die Array automatisch erstellt werden. Das heißt aus jedem meiner Artikel ( die natürlich jeweils eine PHP Datei darstellen) ein Array mit dem eindeutig identifizierbaren Werten aus h1 und id titelbild.


    Danke für deine Hilfe !

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

    Code
    $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:

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

    Ungetestet,

  • Vielen Dank dafür, werde ich mich heute Abend wenn ich zeit habe nochmal genauer mit auseinander setzen.
    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)

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

    Gruß Reschke

  • 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.

    ??

  • VIelen Dank für deine Geduld mit mir :D

    Also jeder meiner Artikel soll ein Titelbild bekommen, sowie eine h1 Überschrift.
    In dem Zufalls-News-Gitter soll nur das Titelbild als Hintergrund dargestellt werden und darüber bzw. da drauf die Überschrift dargestellt werden.
    Es gibt aber immer nur 1 Titelbild und eine Überschrift pro Artikel.

    Also wenn ich Dich nun richtig verstanden habe ist Variante 1 die korrekte.

  • 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.

  • Ja, jede Seite eine HTML seite, bzw. da PHP includiert ist, sind es ja .php seiten.



    In etwa so aufgebaut:


    Also alles ziemlich Simpel.

    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. Das sollte die Sache noch verkomplizieren, oder?

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

    Code
        $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.

  • Vielen Dank für den Tipp mit dem IMG! Ich habe jetzt diesen Code https://jsfiddle.net/9b83hsLq/5/ an mein Design angepasst.
    Allerdings dadurch mal wieder ein neues Problem, dass sich nach vielem hin und her wohl aufgrund der absoluten Positionierung nicht lösen lässt.

    Und zwar wollte ich das IMG noch mittels transform: scale(1.05) beim hovern vergrößern. Das hovern scheint aber durch die absolute Positionierung der Schrift nicht ordentlich zu funktionieren :(

    Davon werde ich mich wohl erstmal verabschieden. Jetzt versuche ich erstmal mit deinem neuen Code zurecht zu kommen!


    VIELEN VIELEN DANK DAFÜR!

  • JA! Schon wieder was dazu gelernt, ich danke Dir!

    habe das bisher so gelernt:


    Code
    header img:hover {transform:scale(1.1);
    }


    Das bedeutet also man kann mit hovern eines Bereichs nahezu alle Child Elemente verändern, ich hab bisher immer nur die dinge gehovert die sich dann auch verändern sollten.

  • 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.

  • Deinen PHP Code zum auslesen der Daten habe ich verstanden, ist ja eigentlich auch recht Simpel.

    Allerdings weiß ich noch nicht wie ich das genau einsetzten kann. 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?


    Sodass ich mir anschließend mit


    Code
    echo $h1img[0]["h1"] und echo $h1img[0]["img"] 


    die jeweiligen Werte ausgeben lassen kann?

  • 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:

    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:

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

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!