Abstand zwischen Bild und Text in einem Blog Artikel

  • Joomla Version
    5.1.2
    PHP Version
    PHP 8.3.x
    Hoster
    selbst
    Link (URL) zur Seite mit dem Problem
    https://makerspacebonn.de/index.php?view=article&id=337:workshops-zur-demystifizierung-it&catid=10

    Hallo zusammen,


    ich habe in einem Blogbeitrag ein Bild eingefügt und möchte dort einen Abstand zwischen Bild und Text haben. Diesen Abstand habe ich beim EInfügen des Bildes über den Editor auch eingestellt und dieser wird im Source-Code auch übernommen:

    Code
    <p><strong>Zum Workshop Programmierung in C</strong></p>
    <p><img src="images/c_programming.png" alt="c programming" width="250" height="138" class="float-md-start" style="margin: 10px; float: left;" />Am 27.07.2024 um 14-17 Uhr c.t. findet im Makerspace der Workshop zur Einführung in die C Programmierung statt. Die Programmiersprache C findet man in allen Bereichen der Computertechnik und hat sich zu einer der mächtigsten Programmiersprachen unserer Zeit entwickelt. Sie wird meistens dort verwendet,

    Jedoch wird dies nicht umgesetzt
    Schaue ich mir die Seite über Firefox mit F12 an so sieht man, dass der style ignoriert wird

    Code
    <img src="/images/c_programming.png" alt="c programming" width="250" height="138" class="float-md-start" style="">

    Bin da ziemlich ratlos. Ist das ein Cassiopeia/Bootstrap Thema (Ich verwende als Template cassiopeia)

  • Vielleicht hilft dir dieser Artikel: https://magazine.joomla.org/all-issues/mar…to-style-images
    Du hast schon eine Bootstrap Klasse eingefügt: "float-md-start", das macht schon das floating des Bildes, du brauchst nicht nochmal float:left definieren. Für den Abstand kannst du auch eine Bootstrap Klasse verwenden, z.B. m-2 (https://getbootstrap.com/docs/5.3/utili…gin-and-padding)

  • Wenn Du die Bildeigenschaften im Mediamanager des JCE setzt, erzeugst Du Inline-Styles. Alternativ -und viel besser- kannst Du natürlich auch Bootstrap- oder Template-Klassen verwenden.

    Wenn Du an den Inline-Styles etwas verändern willst, musst Du jedes einzelne Bild anfassen. Die Klassen kannst Du mit eigenem CSS überschreiben und änderst damit alle Vorkommen.

    Ein Problem beim JCE, das ich sehe, ist folgendes: Die Inline-Styles werden auf der ersten Seite des JCE Media Managers prominent angeboten. Dadurch neigt der Benutzer dazu, „einfach“ diese Formatierungsmöglichkeit zu nutzen; auch ich habe lange nicht darüber nachgedacht und dadurch Inline Styles benutzt.
    Willst Du dagegen Klassen benutzen, musst Du auf den zweiten Tab wechseln.
    Besser wäre es aus meiner Sicht, die Auswahl der Klassen auf den ersten Tab zu nehmen und die Inline-Styles auf dem zweiten Tab zu „verstecken“. Sollte man vielleicht mal bei Ryan Demmer, dem Entwickler von JCE, anregen.

  • Danke für den Hinweis. Dazu kommt offensichtlich, wie in meinem Beispiel, dass die Inline-Styles offensichtlich wohl von den allgemeinen Templete Vorgaben überschrieben werden. Wenn wir schon mal beim wünsch-dir-was sind: Schön wäre wenn JCE auch alle BS 5 Klassen kennen würde z.b float-md… ,damit das bei der aeingabe als mögliche Klasse ausgewählt werden könnte.