Einleitungsbild eines Beitrags im Kategorie-Blog direkt neben den Beitragstitel setzen (Cassiopeia)

    Frage: Wie kann man den Titel (und die Einleitung) direkt neben das Bild setzen?


    URL: https://casacaseli.de| Benutzername: beispiel | Passwort: beispiel1234


    Cassiopeia bietet bei der Darstellung des Kategorieblogs die Möglichkeit, das Einleitungsbild (des Beitrags) auf einer Ebene links neben den Beitragstitel zu setzten. Dieses geschieht, indem in "Menü: Eintrag bearbeiten" / Reiter [Blog-Layout] im Feld [CSS-Klasse Beitrag] "image-left" eingetragen wird.


    Zusätzlich kann das Einleitungsbild unter "Beiträge: Bearbeiten" / Reiter [Bilder und Links] -> Einleitungsbild im Feld [CSS-Klasse Bild] durch Angabe einer CSS-Klasse, welche in der user.css erstellt werden muss, weiter gestaltet werden. - Hier z.B. durch .Einleitungsbild {border: 1px solid green}.


    Trotz mehrerer Versuche - bis hin zur Übernahme von CSS-Klassen nach Inspektion des html-codes - habe ich keine Lösung gefunden, den Titel direkt neben das Bild zu setzten.

    Sollte es eine Lösung geben, wäre ich für einen Hinweis dankbar.

    Helmut

    Hallo Viviana,


    Helmut hat u.a.: image-left (inklusive dort die h2). Glaube aber, dass er die h1 meint.

    Deine Seiten sehe ich mir oft an :)


    Liebe Grüße
    Christine


    Edit: joomhh Oder meinst Du wegen dem großen Abstand?

    Code
    .image-left .blog-item .item-image, .image-right .blog-item .item-image {
  flex: 1 0 40%;
}

    Hallo Viviana,

    das "image-left" habe ich, wie oben beschrieben, m.E. an der richtigen Stelle ("Menü: Eintrag bearbeiten") verwendet. Ohne das stände das Bild über dem Titel.

    Helmut

    Hallo Christine,

    ja, es scheint um die flex-Einstellungen zu gehen. Jedenfalls, wenn man den html-Code manipuliert: z.B. einfach ausschaltet.


    Aber ich kann mit dem Wissen nichts auf der user.css-Ebene anfangen. Einfach die css-klassen dahin zu übernehmen und zu ändern, hat bei mir nicht geklappt.


    Ich gehe immer noch davon aus, dass mit der zum Einleitungsbild zu erstellenden css-klasse ("Beiträge: Bearbeiten" / Reiter [Bilder und Links] -> Einleitungsbild im Feld [CSS-Klasse Bild]) etwas erreicht werden müsste.


    Helmut

    2 Mal editiert, zuletzt von Indigo66 () aus folgendem Grund: Ein Beitrag von joomhh mit diesem Beitrag zusammengefügt.

    joomhh bitte beachten:

    Thema
    Wie poste, zitiere und editiere einen Beitrag im Forum richtig?
    Bitte nicht für jedes Zitat und jeden Satz oder Ergänzung einen neuen Post aufmachen. Man kann mehrere Zitate zwischenspeichern und in einem einzigen Post beantworten.
    Zudem gibt es ein 15 Minuten Zeitfenster in dem man seinen letzen Post nochmal editieren kann. Evtl um Korrekturen zu machen oder den Beitrag zu ergänzen.

    Eine gute Anleitung gibt es hier von Re:Later
    Anleitung
    Indigo66

    zu flex

    Wenn man flex in der user.css auf "none" stellt, rutschen die Titel nach links, aber das kann ja eigentlich nicht die Lösung sein.

    Code: user.css
    .image-left .blog-item .item-image, .image-right .blog-item .item-image {
flex: none;
}
    Zitat von joomhh

    ..., aber das kann ja eigentlich nicht die Lösung sein.

    Wieso kann das nicht die Lösung sein?


    Die flex-basis (die Bild figure) nimmt hier standardmäßig 40% Breite ein.
    Da dein Introtext nur aus 3 Wörtern besteht, breitet sich die Flex Basis jedoch weiter aus - ist ja genug Platz.

    Wenn du die Intros verlängerst, schaut es so aus:

    https://wolke.website-bereinig…dex.php/s/M7ZdYoyy2s9QLkf


    Die flex-basis kannst du z.B. - wie im Screenshot - auch auf 20% o.ä. verkleinern - wie es halt passt.


    Wenn die Bilder nur 40px breit sind und der Introtext so kurz ist, kommt es eben zu solchen Problemen, ohne CSS Korrektur - weil Cassiopeia das so nicht erwartet.


    Gruß

    Pascal

    Hallo Pascal,

    Zitat von kitepascal

    Wenn du die Intros verlängerst,

    Ja. Stimmt! - Aber es soll funktionieren, ohne dass man die Intros verlängert, und etwa wie folgt aussehen. Und bei einer Verkleinerung des Bildschirms (insbesondere Smartfon) sollen die Elemente weiterhin nebeneinander stehen.



    Ich hatte mir in Bezug auf das Einleitungsbild mehr von der Erneuerung in Cassiopeia versprochen.

    Es scheint so zu sein, dass nur eine entsprechende Anordnung von Einleitungsbild, Titel und Intro in einem overwrite: /html/com_content/category/blog-item.php und eine ordnende css-Klasse in der user.css zum gewünschten Ergebnis führt.

    Das gewünschte Ergebnis erreichst du per user.css - dein in #6 gepostetes CSS kann ein Teil davon sein.


    Für die Mobildarstellung benötigt es dann eben noch mehr CSS.

    Ein Template kann out-of-the-box nie allen Anforderungen gerecht werden - deshalb hat man ja die einfache Möglichkeit, beliebige Anpassungen über die user.css zu tätigen.

    Nur die Mobildarstellung (sobaldBild und Titel/Intro in eigene zahlen rutschen), kannst du mit einer media query ansprechen.


    Code
    @media (max-width: 991px) { 

.image-left .blog-item, .image-right .blog-item {
    flex-direction: row;
}

}


    Zusammen mit deiner obigen rule sollte dürfte es das auch schon gewesen sein.


    Gruß

    Pascal