Ergebnis 1 bis 15 von 15

Thema: Icon für Bildposition bei "Bild einfügen" im Inhaltselement Text funktioniert falsch

  1. #1
    Contao-Fan Avatar von grashalm
    Registriert seit
    17.06.2010.
    Ort
    Mainz
    Beiträge
    293
    Contao-Projekt unterstützen

    Support Contao

    Standard Icon für Bildposition bei "Bild einfügen" im Inhaltselement Text funktioniert falsch

    Ist dieser Bug schon bekannt?

    Wenn ich in 5.3.0 ein Inhaltselement vom Typ "Text" anlege und dann unter dem Text auf "Bild einfügen" gehe, platziert mir das vierte und letzte Icon das besagte Bild über dem Text und nicht darunter, wie es eigentlich der Fall sein sollte. Ist das wirklich ein Bug, oder habe ich etwas übersehen?
    Falls das ein Bug ist: Wo genau melde ich den?

    Grüße, grashalm
    wie gut, dass es contao gibt! wie gut, dass es spooky und euch alle gibt!

  2. #2
    Contao-Urgestein Avatar von cliffparnitzky
    Registriert seit
    08.10.2010.
    Ort
    Lüneburg
    Beiträge
    2.459
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Es wird die CSS Classe "media--below" gesetzt ... ggf. muss das angepasst werden?

  3. #3
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    844

    Standard

    Ich meine das wäre in Slack auch schon mal angesprochen worden und ist wohl kein Bug.
    Du musst dir dafür ein CSS schreiben, mit order z.B. bzw. für rechts und links die floatings anlegen sofern gewünscht.
    Vielleicht wäre es sinnvoll wenn das in der Contao Demo exemplarisch eingerichtet würde

    Oder in der Doku ein Hinweis dazu
    https://docs.contao.org/manual/de/ar...deinstellungen
    Geändert von Bennie (29.02.2024 um 08:23 Uhr)

  4. #4
    Contao-Fan Avatar von grashalm
    Registriert seit
    17.06.2010.
    Ort
    Mainz
    Beiträge
    293
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Danke für Eure Antworten.
    Ja, dass media--below gesetzt wird, habe ich gesehen, aber welche Attribute und Werte muss ich dieser Klasse zuweisen, damit das Img-Element unter den Text geschoben wird?
    Mit "order"lege ich ja nur die Reihenfolge in Flex-Boxen fest, und die wird ja hier nicht gesetzt...
    wie gut, dass es contao gibt! wie gut, dass es spooky und euch alle gibt!

  5. #5
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Das musst du alles selbst in deinem CSS setzen. Alternativ kannst du auch das Template entsprechend anpassen.
    » sponsor me via GitHub or PayPal or Revolut

  6. #6
    Contao-Fan Avatar von grashalm
    Registriert seit
    17.06.2010.
    Ort
    Mainz
    Beiträge
    293
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ich bevorzuge die Anpassung über CSS. Muss /sollte ich hiewr also tatsächlich eine Flexbox setzen oder wie löse ich das anders? Bin leider kein CSS-Profi...
    wie gut, dass es contao gibt! wie gut, dass es spooky und euch alle gibt!

  7. #7
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ja Flexbox ist die eine Variante. CSS-Grid kann man dafür auch nutzen.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  8. #8
    Contao-Fan Avatar von mdoll
    Registriert seit
    25.06.2009.
    Ort
    Wietze
    Beiträge
    351

    Standard

    Moin,

    wahrscheinlich ist die einfachste Lösung mit CSS-Grid:

    Code:
    .media--below {
        display: grid;
        justify-items: center; /* zentriert das Bild, ggf. kann die Anweisung auch weggelassen werden  */
     }
    
    /* Bild unter den Text */
    .media--below > figure {
        order: 5;
    }
    Gruß
    Mathias
    The idea is to die young as late as possible!

  9. #9
    Contao-Fan Avatar von grashalm
    Registriert seit
    17.06.2010.
    Ort
    Mainz
    Beiträge
    293
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Habe es jetzt mit Grid probiert und ziemlich lange rumgedoktort.

    Aber bevor ich jedesmal, wenn ich in einem Artikel ein Bild unter dem Text platzieren will, folgenden Code eingeben muss,

    Code:
    #article-887 .media.media--below.content-text {
    	display: grid;
    }
    
    #article-887 h1 {
    	grid-row: 1/2;
    }
    
    #article-887 .rte {
    	grid-row: 2/3;
    }
    
    #article-887 img {
    	grid-row: 3/4;
    }

    dann setze ich doch lieber ein Bild als eigenes Inhaltselement unter den Text.

    Früher war das so schön einfach. Diese Verkomplizierung kann ich nicht nachvollziehen.
    Kann mir jemand erklären, warum das geändert wurde? media--above funktioniert doch auch noch normal...
    wie gut, dass es contao gibt! wie gut, dass es spooky und euch alle gibt!

  10. #10
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    844

    Standard

    Es ist doch einfach - siehe den Post vor deinem
    Was du jetzt gemacht hast ist natürlich extrem umständlich.

    Ich sag ja das muss wohl in die Doku oder Demo

  11. #11
    Contao-Fan Avatar von grashalm
    Registriert seit
    17.06.2010.
    Ort
    Mainz
    Beiträge
    293
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo mdoll,

    vielen Dank für Dein Code-Beispiel. Dein CSS ist natürlich wesentlich kürzer und eleganter!
    Damit lässt sich noch recht bequem arbeiten, zumal man dieses CSS nicht für jeden Artikel neu schreiben muss.
    Vielen Dank!
    wie gut, dass es contao gibt! wie gut, dass es spooky und euch alle gibt!

  12. #12
    Contao-Fan Avatar von mdoll
    Registriert seit
    25.06.2009.
    Ort
    Wietze
    Beiträge
    351

    Standard

    Man müsste sich mal Gedanken machen, wie man das in der Doku erklärt, oder ob das tatsächlich ein Issue bei Github wert ist.

    Es war ja in Contao 4 so, dass bei "Bildausrichtung unterhalb" die Reihenfolge im Quelltext im Template geändert wurde. Linksbündig und rechtsbündig haben nur funktioniert, wenn man im Seitenlayout unter CSS-Framework den Layout-Builder aktiviert hat oder seine eigenen CSS-Anweisungen geschrieben hat.

    In der CSS-Datei vom Layout-Builder steht mittlerweile folgendes:

    Code:
    .float_left,
    .media--left>figure {
      float:left
    }
    .float_right,
    .media--right>figure {
      float:right
    }
    Eine Anweisung für .media--below fehlt.

    D.h., Bild einfügen oberhalb/linksbündig/rechtsbündig geht mit dem Layout-Builder in Contao 5, unterhalb nicht, da die geänderte Elementreihenfolge im Template nicht mehr greift.

    Gruß
    Mathias
    Geändert von mdoll (29.02.2024 um 11:23 Uhr)
    The idea is to die young as late as possible!

  13. #13
    Contao-Fan Avatar von herr rilke
    Registriert seit
    29.01.2011.
    Ort
    Münster
    Beiträge
    407

    Standard

    Zitat Zitat von mdoll Beitrag anzeigen
    Moin,

    wahrscheinlich ist die einfachste Lösung mit CSS-Grid:

    Code:
    .media--below {
        display: grid;
        justify-items: center; /* zentriert das Bild, ggf. kann die Anweisung auch weggelassen werden  */
     }
    
    /* Bild unter den Text */
    .media--below > figure {
        order: 5;
    }
    Gruß
    Mathias
    hallo mathias,

    danke für den anstoß!

    mein beitrag wäre, die zentrierung in der ersten klasse zu entfernen, weil dann bspw. auch andere element (überschriften usw) zentriert dargestellt werden.
    stattdessen zentrierung nur auf das figure element anwenden:

    HTML-Code:
    .media--below {
        display: grid;
        /* justify-items: center; zentriert das Bild, ggf. kann die Anweisung auch weggelassen werden  */
     }
    
    /* Bild unter den Text */
    .media--below > figure {
      justify-self: center;
        order: 15;
    }

    just in case ... es läse noch mal jemand nach


    viele grüße

    karsten

  14. #14
    Contao-Fan Avatar von grashalm
    Registriert seit
    17.06.2010.
    Ort
    Mainz
    Beiträge
    293
    Contao-Projekt unterstützen

    Support Contao

    Standard

    hallo karsten,

    vielen lieben dank für deine ergänzung! mir ist die automatische mit-zentrierung zum beispiel der überschriften auch schon unangenehm aufgefallen. deswegen hätte ich hier in kürze noch mal nachgefragt.
    aber jetzt bist du mir zuvorgekommen und hast den code noch mal optimiert, vielen dank!
    eine frage habe ich aber trotzdem noch: was bewirkt "order"? und wo ist der unterschied zwischen dessen werten von 5 und 15?
    wie gut, dass es contao gibt! wie gut, dass es spooky und euch alle gibt!

  15. #15
    Contao-Fan Avatar von mdoll
    Registriert seit
    25.06.2009.
    Ort
    Wietze
    Beiträge
    351

    Standard

    Moin,

    mit order bestimmst Du die visuelle Reihenfolge von Elementen innerhalb eines flex oder grid containers. Niedrige Werte werden zuerst dargestellt, höhere danach. Bei gleichem Wert entscheidet die Reihenfolge im Quelltext.

    Der Standardwert für order ist 0.

    Der Unterschied zwischen 5 und 15 ist erstmal keiner, und man könnte auch 1 nehmen. Wenn aber weitere Elemente dazu kommen sollten, dann ist es ganz angenehm, wenn man das nicht in Einerschritten angelegt hat, weil man einfach Elemente dazwischen packen kann, ohne allen Elementen einen neuen order Wert zu geben.

    Siehe auch: https://developer.mozilla.org/en-US/...tiredLocale=de

    Gruß
    Mathias
    The idea is to die young as late as possible!

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •