Einleitungsbild (zu einem Beitrag) vor den (Beitrags-) Titel stellen

    Frage: Gibt es eine Möglichkeit (z.B. durch overrides) das Einleitungsbild zu einem Beitrag vor den Beitragstitel zustellen?


    Zusammenhang: In einem Kategorieblog werden die Beiträge jeweils nur mit Einleitungstext dargestellt. Das Einleitungsbild befindet sich auf der Höhe des Einleitungstextes - Die Darstellung soll durch die oben angefragte Lösung kompakter und klarer werden.


    Standarddarstellung von Joomla:


    Die angestrebte Darstellung soll so o.ä. aussehen:


    (Bisher gelöst als Beitrag mit Bildern, Links auf die Beiträge und extra formulierten Anmerkungen - im Tabellenformat. - Eine im Vergleich zur Blogdarstellung recht mühsame Angelegenheit.)

    Einmal editiert, zuletzt von zero24 () aus folgendem Grund: Formulierungsänderung auf Wunsch des TE

    Hallo Christine,


    vielen Dank für den schnellen Tipp. - Ich werde es mal probieren.


    Die genannten Sprachoverrides, die BLOG.PHP und die BLOG-ITEM.PHP habe ich eingerichtet.


    Ich weiß allerdings nicht, wohin mit der MODERNES-BLOGLAYOUT.CSS. - Vielleicht kannst du ja helfen.


    Gruß, Helmut

    Um deine gewünschte Darstellung zu erreichen muss die die Reihenfolge der Elemente im Bloglayout ändern, in blog_item.php (Override in deinem Template, natürlich) brauchst du so was ähnliches (sehr gekürzte Version des Codes):


    PHP
    <div class="mygrid">
    <div class="myimage">
        <?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
    </div>
    <div class="mycontent">
        <?php echo JLayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?>
        <?php echo $this->item->introtext; ?>
    </div>
</div>


    Dann kannst du "mygrid" mit CSS anpassen, z.B. display: grid; grid-template-columns: 1fr 2fr;.... Oder mit Bootstrap Klassen, je nach dem was du in deinem Template hast.

    Hallo Viviana!

    Zunächst einmal vielen Dank für den sehr hilfreichen Tipp.


    Vom Ansatz her klappt es. Nach dem ersetzendem Eintrag deines Vorschlags sieht der Beitragsblog nun (mit echten Titeln) so aus:



    Ich habe sehr viel mit den Klassen mygrid, myimage und mycontent in der user.css herumexperimentiert. Zusätzlich habe ich dort versucht, h2 und page-header zu überschreiben. Mit dem page-header ist es mir nur gelungen, die störende Linie mit border: none zu beseitigen. (Nebenbei: Warum Angaben zu h1, h2 usw. mehrfach im template.css auftauchen, verstehe ich nicht.)


    Es gelingt mir nicht, den Beitragstitel zu formatieren: gleiche Höhe mit dem Bild, weniger Abstand zum Einleitungstext, kleinere Schrift und ggfs. weniger Abstand zum Bild. (Das Ganze also etwas schlanker.)


    Es wäre schön, wenn du dazu noch einen Tipp hättest.

    Ich verwende - seit Jahren - das template: protostar.

    Problem gelöst:


    Beitragsbild und Beitragstitel werden auf folgende Weise in eine Zeile im Programmcode gebracht:


    1) Es wird ein override erstellt: Create overrides | com_content / category

    2) Editiert wird dann die Dateit: Editor | html / com_content / category / blog_item.php


    Der Code in blog_item.php

    <?php echo JLayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?>


    wird ergänzt durch den weiter unten stehenden Code zum Beitragsbild

    <?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>


    aber ohne <?php ... ?>

    echo JLayoutHelper::render('joomla.content.intro_image', $this->item);


    Ergebnis:

    <?php JLayoutHelper::render('joomla.content.intro_image', $this->item); echo JLayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?>


    Der weiter unten stehende Code zum Betragsbild muss gelöscht werden, sonst erscheint das Bild doppelt.


    Nachtrag:

    Nicht ganz zufrieden mit der Darstellung habe ich alles über ein verschachteltes div gelöst:

    override in: /html/com_content/category/blog-item.php

    Dieser Code ersetzt und steht an der Stelle von:

    <?php echo JLayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?>


    Zusätzlich gelöscht werden:

    <?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>

    <?php echo $this->item->introtext; ?>


    user.css:


    .bild-titel-blog{

    display: flex;

    }


    .bild-titel-blog-bild{

    min-width: 36px;

    }


    /* -- Überschreibt Standardvorgabe durch pull-left.item-image -- */

    /* -- Verhindert deren Einfluss auf den Abstand des Einleitungstext -- */

    /* -- Verhindert ungleichmäßige Verkleinerung des Bildes bei unterschiedlich (sehr) langen Titeln -- */

    .pull-left.item-image{

    margin: 0px 0px 0px 0px ;

    }