Erste Site mit 5.1

[kubjo]

Hi Leute,
ich habe mich heute in das Abenteuer 5.1 gewagt, und das zusätzlich mit einem mir neuen Theme! Was soll schon schief gehen? ;-)

Jetzt stolpere ich schon über einen einfachen CE "Text mit Bild",´ hier: Link

Eigentlich soll das Bild in voller Spaltenbreite über dem Text stehen, aber das hinterlegte SCSS macht aus dem Ganzen ein komisches Layout. Wie kann ich dem CE Text die Zuordnung .media wegnehmen, ich glaube dass die für das komische Layout zuständig ist.

Dabei ist mir aufgefallen, dass die Konsole des FF die Datei "https://workshops.kubjo.net/assets/css/bootstrap.min.css,odd.scss-a0456c93.css" anscheinend nicht findet, es wird eine Warnung ausgegeben. Die Datei ist aber da, wo sie sein soll und wird im Inspektor auch angezeigt. Ich bin verwirrt. Ich glaube aber nicht, dass das irgendwie zusammen hängt.


Viele Grüße
Jochen

[kubjo]

Kann mir da wirklich niemand helfen?

[derRenner]

nimm die Klasse 'media' aus dem Contentelement Text raus » Experteneinstellungen

[kubjo]

Ja, leider steht das "media" nirgends drin! Habe eben nochmal gründlich gesucht. Habe auch geguckt, ob es ein anderes Template ist, aber es sieht so aus, als ob es das Standard Template für Text mit Bild ist: "content_element/text [ContaoCore]. Daher ist meine Weißheit jetzt am Ende.

Grüße
Jochen

[bizon]

Die Klassen "media media--above" werden von Contao gesetzt und hießen bis contao-4.13 noch "image_container float_above".

[kubjo]

Hallo bizon,
vielen Dank für die Info, leider weiß ich nicht so richtig, was ich damit machen soll. Der Inspektor zeigt mir das hier:

media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;

Das Blöde dabei ist, dass die Optionen im CE Text (Bild über dem Text, Im Text,...) nicht mehr greifen.

Grüße
Jochen

[lucina]

Vielleicht spielst Du hier mal ein wenig herum, um zu sehen, wie flex funktioniert und welche Anweisungen Du setzen musst?

https://flexboxfroggy.com/#de

[kubjo]

Hi lucina,
ich weiß dass "flex" ein mächtiges Werkzeug ist, und man sicherlich das gewünschte Ergebnis hinbekommen kann. Ich finde es nur blöd, wenn die Grundfunktionen nicht funktionieren. Zugegeben weiß ich auch nicht, woher das "flex" kommt, ob vom Theme oder vom Contao Core.

Grüße
Jochen

[kubjo]

Ich habe jetzt nochmal bisschen mit den Optionen des Bildes im CE_Text rumgespielt. Es bleibt immer 'class="media", was sich ändert, ist die zweite Klasse, die wird entweder zu "media--above", "media--left", "media--right" oder "media--below" eine Auswirkung hat das nicht, weil das "display:flex" ja dem übergeordneten "media" zugeordnet ist. Und die anderen Klassen keine Definitionen haben.

Viele Grüße
Jochen

[Spooky]

Zugegeben weiß ich auch nicht, woher das "flex" kommt, ob vom Theme oder vom Contao Core.

Das kommt von Bootstrap (4) welches du eingebunden hast (oder das Theme).

[bizon]

.media {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

Diese CSS-Anweisung kommt aus dem Bootstrap-CSS, das wahrscheinlich von deinem Theme implementiert wird.
Ob du diese Anweisung irgendwo sonst auf deiner Website brauchst oder nicht, musst du selbst wissen oder lernen.

Ansonsten kannst du das Bootstrap-CSS in einem nachfolgenden stylesheet überschreiben:

.media {
    display: unset;
}

[kubjo]

Das hat mir weiter geholfen, vielen Dank!

Was ich nicht richtig kapiere:

Diese CSS-Anweisung kommt aus dem Bootstrap-CSS, das wahrscheinlich von deinem Theme implementiert wird.
Ob du diese Anweisung irgendwo sonst auf deiner Website brauchst oder nicht, musst du selbst wissen oder lernen.

Was bewirkt das Bootstrap-CSS eigentlich? Warum braucht man sowas in einem Theme, das ja normalerweise vom Ersteller des Themes von Grund auf selbst "gebaut" wird, oder täusche ich mich da?

Was mich immer noch irritiert, ist, was ich oben schon geschrieben habe:

Dabei ist mir aufgefallen, dass die Konsole des FF die Datei "https://workshops.kubjo.net/assets/css/bootstrap.min.css,odd.scss-a0456c93.css" anscheinend nicht findet, es wird eine Warnung ausgegeben. Die Datei ist aber da, wo sie sein soll und wird im Inspektor auch angezeigt.

Viele Grüße
Jochen

[Spooky]

Warum braucht man sowas in einem Theme, das ja normalerweise vom Ersteller des Themes von Grund auf selbst "gebaut" wird, oder täusche ich mich da?

Das Theme kann ja auf einem bestehenden CSS Framework (wie bspw. Bootstrap) aufbauen.

[bizon]

Mit dem Eintrag der CSS-Regel

.media { display: unset; }

ist das Ganze jedoch noch nicht zu Ende gedacht. Denn damit hast du jetzt nur die kurze Lösung für genau dein oben beschriebenes Problem. Die Position und Ausrichtung des Fotos bleibt damit aber immer gleich, völlig egal, was du im Textelement bei der Bildauswahl als Position auswählst.

Wenn du also künftig bei weiteren Textelementen ein Bild hinzufügen möchtest und dort die Bildpositionierung anders aussehen soll, fällt dir das wieder auf die Füße.

Contao setzt bei der Auswahl der Bildposition beim Element content-text lediglich die entsprechenden Klassen, jedoch ohne passendes CSS.
.media.media--above
.media.media--below
.media.media--left
.media.media--right

Für jede Position musst du oder der Hersteller des Themes CSS-Regeln anlegen. Falls das evtl. doch mit Flexbox geschehen soll, muss ".media { display: unset; }" wieder entfernt und mit Regeln für jede .media Klasse ergänzt werden.

Siehe auch den Vorschlag von @lucina in #7.

[kubjo]

@lucina Habe alle Frösche zu ihrem Seerosenblatt geführt! Sehr lehrreich, danke für die Anregung!

Ich versuche mich jetzt mal auf der Seite!


Viele Grüße
Jochen

[kubjo]

So, ich habe jetzt mal das CSS für das .media in den vier Geschmacksrichtunge geschrieben:

.media.media--above{
flex-wrap: wrap;
}

.media.media--below{
flex-wrap: wrap-reverse;
}

.media.media--left {
flex-wrap: nowrap;
}

.media.media--right {
flex-wrap: nowrap;
flex-direction: row-reverse;
}

Irgendwo scheint aber der Wurm drin zu sein. "above" funktioniert, so wie ich es mir vorgestellt habe. Die Anderen haben aber noch ihre Macken, ich weiß aber trotz intensiven Ausprobieren nicht woan es liegen kann.
Wenn ich die Anweisungen dierkt in den Inspector schreibe funktioniert es. Wenn es über das CSS eingefügt wird, erscheint nur die Anweisungen von "above" in Inspector, die anderen tauchen erst gar nicht auf!

Verwirrte Grüße
Jochen

[mlweb]

Hast Du einen Link zu Deiner Testseite?

[kubjo]

Ja, hier:
https://workshops.kubjo.net/fotowork...choenster-lage

Ich experimentiere mit dem Element "Die Alpenrosenhütte in den Kitzbüheler Alpen" mit dem Drohnenbild.

Grüße
Jochen

[kubjo]

Ich habe das Textelement jetzt mal dupliziert und das Bild einmal darunter und einmal darüber angeordnet. Das hilft vielleicht. ;-)

Grüße
Jochen

[kubjo]

Was ich dabei nicht verstehe, ist dass bei "media-above" meine Anwesungen "ankommen" siehe screenshot1, bei media-below die Anweisungen erst gar nicht erscheinen!

media-above.png

media-below.png

Habe ich etwas übersehen?

Grüße
Jochen

[derRenner]

hast du den Skript-Cache in der Systemwartung nach Änderung der (S)CSS gelöscht?

[kubjo]

Jetzt ja, ändert aber nichts an der Situation.

Danke!

P.S.:

Es gab Zeiten, da wurde eine Änderung im CSS sofort übernommen, jetzt wird immer alles gecached, kann man das nicht irgendwie während der Entwicklung ausschalten?

Viele Grüße
Jochen

[derRenner]

Jetzt ja, ändert aber nichts an der Situation

also ich erkenne nun das Bild unterhalb und das Bild oberhalb ... also scheint doch zu klappen

Es gab Zeiten, da wurde eine Änderung im CSS sofort übernommen

es gab auch Zeiten, was Ladezeit egal

Arbeite beim Entwickeln im Debug-Mode, da werden auch SCSS-Anweisungen ganz gut umgesetzt.
Weiters kannst du im Layout einstellen, ob Skripte zusammen gefasst werden sollen oder nicht - das hilft auch manchesmal beim Entwickeln ganz gut weiter

[kubjo]

Ja, jetzt paßt es mit drunter und drüber!
War bei mir noch im Cache!
Ich habe jetzt mal auf links und rechts daneben umgestellt, da brauche ich noch weiteres CSS, vor allem dass der Text das Bild umfließt. Geht das überhaupt?

[mlweb]

Außerdem gibt es von E+F eine Erweiterung, die m.E. bei dem Themes immer integriert ist und für die Zeit der Entwicklung eine Möglichkeit zur Verfügung stellt, dass Caching zu umgehen.
Außerdem haben alle Themes von E+F (außer Optimist) die Möglichkeit mit resultierenden CSS-Dateien (SCSS-lokal auflösen) zu arbeiten. Ich glaube das ist der Entwicklermodus oder so ähnlich. Dann hast Du das Problem mit nicht erkannten Änderungen in abhängigen SCSS-Dateien erst gar nicht.

[mlweb]

Ich habe jetzt mal auf links und rechts daneben umgestellt, da brauche ich noch weiteres CSS, vor allem dass der Text das Bild umfließt. Geht das überhaupt?

Mit Flexbox nicht. Dazu gibt es ja das gute alte Floating.

[kubjo]

Außerdem gibt es von E+F eine Erweiterung, die m.E. bei dem Themes immer integriert ist und für die Zeit der Entwicklung eine Möglichkeit zur Verfügung stellt, dass Caching zu umgehen.
Außerdem haben alle Themes von E+F (außer Optimist) die Möglichkeit mit resultierenden CSS-Dateien (SCSS-lokal auflösen) zu arbeiten. Ich glaube das ist der Entwicklermodus oder so ähnlich. Dann hast Du das Problem mit nicht erkannten Änderungen in abhängigen SCSS-Dateien erst gar nicht.

Ja, bei Themes von E&F gibt es das, leider nicht als extra Erweiterung.
Mein hier verwendetes Theme ist nicht von E&F.

Grüße
Jochen

[kubjo]

Mit Flexbox nicht. Dazu gibt es ja das gute alte Floating.

Mit "float" stehe ich schon immer auf Kriegsfuss, aber hier funktioniert das gar nicht, vor allem nicht innerhalb der "flex" Gruppe!

Grüße
Jochen

[mlweb]

Das gibt es als Extra-Erweiterung die Theme-Toolbox müsste es sein, wenn ich mich recht entsinne.

Was Floating betrifft, dazu brauchst Du ja dann auch keine Flexbox. Alles immer für die Sachen einsetzen für die es gedacht ist.

[kubjo]

Habe für rechts und links mal die Anweisungen für die flex-box raus gekommen. Mit float komme ich aber trotzdem nicht weiter.

[mlweb]

Wenn ich deine Seite anschaue, dann ist da noch display:flex vorhanden.

Fürs Floaten z.B. https://www.w3schools.com/css/css_float.asp

[kubjo]

Ich kann dem "media" das "display:flex" ja nicht nehmen, sonst klappt es ja bei oben und unten nicht mehr!

Mein Ziel war eigentlich nur oben und unter schön hin zu bekommen. Dann dachte ich, ich könnte links und rechts auch noch fertig machen, so dass wenn jemand anderes das hier liest, es sich mit Copy&Paste abgreifen kann.
Scheint aber komplizierter zu sein als gedacht. ;-)


Grüße
Jochen

[kubjo]

Das gibt es als Extra-Erweiterung die Theme-Toolbox müsste es sein, wenn ich mich recht entsinne.

Themebox installiert und damit den Cache umgangen!

DANKE!

[mlweb]

Ich kann dem "media" das "display:flex" ja nicht nehmen, sonst klappt es ja bei oben und unten nicht mehr!

Ich habe das jetzt nicht komplett durchgespielt, aber man kann z.B. das display:flex auch explizit nur für die Klassen media--above und media--below setzen.

[mdoll]

Ich kann dem "media" das "display:flex" ja nicht nehmen, sonst klappt es ja bei oben und unten nicht mehr!

Moin,

nutz die Kaskade und gib den Klassen

.media--right/--left ein display:unset

Gruß
Mathias

[bizon]

Anschupser:

.media.media--left,
.media.media--right {
  display: block;  
  margin-bottom: 70px;
}
.media.media--left h2,
.media.media--left h3,
.media.media--right h2,
.media.media--right h3 {
  margin-top: 0;
}

@media screen and (min-width: 768px) {
  .media--left > figure,
  .media--right > figure {
    max-width: 50%;  
  }
  .media--left figure {
    float: left;
    margin: 0 40px 20px 0
  }
  .media--right figure {
    float: right;
    margin: 0 0 20px 30px;
  }
}