5.2 Bildabstand einstellen

[Sonnenstrahl]

Hallo Zusammen,
ich habe mir testweise Contao 5.2 installiert. Bisher läuft alles recht gut, mit einer Einschränkung:
Beim Einfügen eines Bildes in einen Text gibt es keine Möglichkeit mehr den Bildabstand zu definieren.

Kann mir jemand einen Tipp geben, wie ich trotzdem zu einem Abstand zwischen Bild und Text kommen könnte?

Vielen Dank, Sonnenstrahl

[zoglo]

Hallo Zusammen,
ich habe mir testweise Contao 5.2 installiert. Bisher läuft alles recht gut, mit einer Einschränkung:
Beim Einfügen eines Bildes in einen Text gibt es keine Möglichkeit mehr den Bildabstand zu definieren.

Kann mir jemand einen Tipp geben, wie ich trotzdem zu einem Abstand zwischen Bild und Text kommen könnte?

Vielen Dank, Sonnenstrahl

Siehe https://github.com/contao/contao/issues/4575 - Es wurde entfernt, da es nicht korrekt mit Float funktioniert hatte.
Nutze hierbei CSS, du kannst auf die Klassen des floats zugreifen:

float_left / float_right

[purzel]

Mahlzeit,

ich hänge mich mal hier mit dran weil ich ein ähnliches Symptom (beobachtet) habe: in der 4.13 noch vorhanden, in der 5.3 nicht mehr: die schon oben erwähnte Möglichkeit zum Angeben eines Abstands zwischen Bild und Text. Den verlinkten Git-Artikel habe ich überflogen; mir geht's aber hier nicht um Galerien sondern wenn man im Text-Element gewählt hat "Ein Bild hinzuzfügen".

"Nicht schlimm" dachte ich mir, "machste eben was mit CSS" - wie damals als der Abstand über und unter Artikeln "wegoptimiert" wurde und ich mir etliche Abstands-CSS-Regeln gebaut habe.

Doch leider haben anscheinend weder das Bild noch der Text "stylebare" (brrr, welch denglisch) klassenangaben:

<div class="mod_article block" id="article-144">
<h1 class="content-headline">Tolle Überschrift</h1>
<div class="content-text media media--right">
<figure>
<a href="/files/...bild.jpg" data-lightbox> <img src="/merkwürdiger_verzeichnisname/bild.jpg" alt width="200" height="267">
</a>
</figure>
<div class="rte">
<p>&nbsp;</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<p>&nbsp;</p>
</div>
</div>

und auch die weiter oben genannten float_left / float_right finde ich im erzeugten Code nicht. Oder übersehe ich mal wieder irgendwas? Ist damit jetzt die class "media--right" gemeint? Ich will ja nicht für alle Bilder den selben Abstand zum Text haben... Außerdem ist ja der Text ebenfalls in dem DIV mit "media--right" drin...
Wie kriege ich jetzt einen (praktikabel wählbaren) Abstand zwischen Text und Bild?

TIA
purzel

[Spooky]

Ist damit jetzt die class "media--right" gemeint?

Genau, ja.

[dazzle89]

Mahlzeit,

ich hänge mich mal hier mit dran weil ich ein ähnliches Symptom (beobachtet) habe: in der 4.13 noch vorhanden, in der 5.3 nicht mehr: die schon oben erwähnte Möglichkeit zum Angeben eines Abstands zwischen Bild und Text. Den verlinkten Git-Artikel habe ich überflogen; mir geht's aber hier nicht um Galerien sondern wenn man im Text-Element gewählt hat "Ein Bild hinzuzfügen".

"Nicht schlimm" dachte ich mir, "machste eben was mit CSS" - wie damals als der Abstand über und unter Artikeln "wegoptimiert" wurde und ich mir etliche Abstands-CSS-Regeln gebaut habe.

Doch leider haben anscheinend weder das Bild noch der Text "stylebare" (brrr, welch denglisch) klassenangaben:

<div class="mod_article block" id="article-144">
<h1 class="content-headline">Tolle Überschrift</h1>
<div class="content-text media media--right">
<figure>
<a href="/files/...bild.jpg" data-lightbox> <img src="/merkwürdiger_verzeichnisname/bild.jpg" alt width="200" height="267">
</a>
</figure>
<div class="rte">
<p>&nbsp;</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<p>&nbsp;</p>
</div>
</div>

und auch die weiter oben genannten float_left / float_right finde ich im erzeugten Code nicht. Oder übersehe ich mal wieder irgendwas? Ist damit jetzt die class "media--right" gemeint? Ich will ja nicht für alle Bilder den selben Abstand zum Text haben... Außerdem ist ja der Text ebenfalls in dem DIV mit "media--right" drin...
Wie kriege ich jetzt einen (praktikabel wählbaren) Abstand zwischen Text und Bild?

TIA
purzel

Ja, das sind die neuen Klassen für die ehemaligen Float-Klassen.

Bilder kannst du darüber trotzdem ansprechen. Zum Beispiel

.media--right img {
   float: right;
   margin-left: 10%;
   margin-bottom: 30px;
}

Falls du damit nicht alle Bilder ansprechen willst, die diese Klasse haben, könntest z.B. dem Artikel oder dem Text-Element noch eine Klasse geben.

.mein-artikel .media--right img {
   ...
}

[mlweb]

Und wenn Du es pro Textelement wählbar haben willst, benutzt Du Hilfsklassen für den Abstand zwischen Text und Bild.

[purzel]

Und das heißt jetzt was?

... Ich will ja nicht für alle Bilder den selben Abstand zum Text haben... Außerdem ist ja der Text ebenfalls in dem DIV mit "media--right" drin ...
Wie kriege ich jetzt einen (praktikabel wählbaren) Abstand zwischen Text und Bild?

Den Satz etwas ergänzt: ... praktikabel wählbaren Abstand zwischen Text und Bild wenn doch beides im selben DIV drin ist?
Leider wieder einmal was, was ich nicht verstehe

Vereinfacht und eingerückt:

<div class="content-text media media--right">
  <figure>
    <a href="/files/...bild.jpg" data-lightbox> <img src="/merkwürdiger_verzeichnisname/bild.jpg" alt width="200" height="267"> </a>
  </figure>
  <div class="rte">
    <p>Lorem ipsum ...</p>
  </div>
</div>

Wenn ich nun der class "rte" ein padding gäbe führte das wahrscheinlich zu einem Abstand zwischen Text und Bild - ist aber m.E. nicht wirklich praktikabel wählbar
Und wenn ich dem Content Element unter Experteneinstellungen eine Klasse gebe bezieht sich die erwartungsgemäß auch auf das GANZE Element, also Text UND Bild.
Wenn man weiß wie's geht ist es bestimmt ganz einfach...

- - - Aktualisiert - - -

Und wenn Du es pro Textelement wählbar haben willst, benutzt Du Hilfsklassen für den Abstand zwischen Text und Bild.

Sorry, Überschneidung - genau DIE Möglichkeit suche ich...

[purzel]

Ah!!!!!
Ich war (betriebs)blind - das Posting von @dazzle89 habe ich komplett übersehen - SORRY!
Das könnte helfen, ich probiere damit mal ein bisschen herum...

[purzel]

Moin!

Nach einem Rudel Fehlversuchen habe ich es hinbekommen; es entstand aber ein kleines Fragezeichen über mir - dazu weiter unten.

Um flexibel zu sein habe ich mir (wie für die Artikel-Abstände auch) mehrere Hilfsklassen angelegt um die dann den jeweiligen (Text-)Inhaltselementen zuzuordnen (unter Experteneinstellungen -> CSS-Klasse). Ich will den jeweiligen Abstand ja ausdrücklich nicht pauschal für alle Bilder dieser Art gleich haben.
Wenn ich nun einem solchen Element z.B. die Klasse abstandlinks20 gebe wird ein DIV erzeugt mit
<div class="abstandlinks20 content-text media media--right">
Soweit OK und nachvollziehbar (im Text-Element ist Bildausrichtung "oben rechts, Text umfließend" (also das Dritte) ausgewählt).

Wenn ich nun mein CSS so mache wie von dazzle89 vorgeschlagen

.abstandlinks20 .media--right img {
   margin-left: 20px;
}

wird der Abstand NICHT erzeugt. Lasse ich aber in meinem CSS das .media--right weg

.abstandlinks20 img {
   margin-left: 20px;
}

funktioniert es. WARUM? Wo ist mein Fehler? (Oder ist es der von dazzle89?)

Allerdings - vielleicht ist das ja wichtig - habe ich diesen Code nicht eingebunden:

.media--right img {
   float: right;
   margin-left: 10%;
   margin-bottom: 30px;
}

[zoglo]

Du solltest bei CSS-Fragen immer einen Link zur Seite posten.

[dazzle89]

Der Selektor .abstandlinks20 .media--right img bedeutet, dass sich .media--right innerhalb von .abstandlinks20 befindet. In deinem Fall bekommt das div aber beide Klassen. Richtig wäre also entweder

.abstandlinks20.media--right img (ohne Leerzeichen) oder einfach nur .abstandlinks20 img.

.abstandlinks20 .media--right img wäre eigentlich nur notwendig, wenn du z.B: dem Artikel die Klasse gegeben hättest und es somit außerhalb vom .abstandlinks20 DIV liegt.

[mlweb]

Ich denke auch, dass es sinnvoll wäre Du zeigst mal in einem Link was Du hast und sagst uns was Du eigentlich erreichen möchtest. Es gibt in CSS heutzutage so viele Möglichkeiten um effizient bestimmte Effekte zu erzielen.

Dazu muss man sich allerdings zum einen intensive mit CSS auseinandersetzen und zum anderen m.E. für ein bestimmtes Layout nach dem optimalen Weg suchen. Flexibilität kann gut sein, es kann aber auch ein Fluch sein. Das merkt man z.B. beim Einsatz einiger fertiger Themes.

[purzel]

Habt Dank.
Demnach war es weder ein "echter" Fehler von mir noch von dazzle89. Erfreulich.

Erreichen wollte ich, deswegen habe ich mir hier ja mit angehängt,

... in der 4.13 noch vorhanden, in der 5.3 nicht mehr: die schon oben erwähnte Möglichkeit zum Angeben eines Abstands zwischen Bild und Text.

Gemeint ist der gelb markierte Bereich: Screenshot_20250320_104105.png

In der 4.13 gab es wie gesagt noch die Möglichkeit das im Artikel bei den Bildeinstellungen zu konfigurieren: Screenshot_20250320_104239.png und wurde im FE per <style.... erzeugt; so ähnlich wie damals der Abstand von einem Artikel-Element zum Nächsten. Damals habe ich DAFÜR auch Hilfsklassen bauen (und überall einfügen) müssen. Der Teil steht mir nun für die ganzen Bilder noch bevor...

Der Selektor .abstandlinks20 .media--right img bedeutet, dass sich .media--right innerhalb von .abstandlinks20 befindet.

So hatte ich es später dann auch interpretiert... (bzw. vermutet - deswegen das kleine "restliche" Fragezeichen )

...und es dann so

oder einfach nur .abstandlinks20 img

gemacht.

Also nochmal Danke für die "Erleuchtung"

[mlweb]

Trotzdem bleibt für mich die Frage warum Du es unterschiedlich pro Textelement brauchst.
Bei meinen Kunden brauche ich das in der Regel höchstens unterschiedlich je nach "Verwendungsart" und dafür würde ich z.B. keine Hilfsklassen für den Abstand im Textelement verwenden.

[purzel]

Trotzdem bleibt für mich die Frage warum Du es unterschiedlich pro Textelement brauchst.

Naja, vielleicht nicht pro Textelement, aber (vermutet) schon pro Artikel.
Es sei denn, ich merke beim Einbau, dass ich (fast) überall die gleichen z.B. 20 px eingestellt hatte - dann suche ich mir eine andere Stelle anstatt der ~ 10 Hilfsklassen.

Bei den Abständen der Inhaltselementen untereinander habe ich der Vergangenheit schon recht unterschiedliche verwendet. Damals hatte ich AFAIR sogar eine Suche in der DB losgeschickt um genau das in Erfahrung zu bringen. Vielleicht mache ich das wieder so...