Abstände; Float: Bild im Text

[Schockwelle]

Moin,
ich vermisse die Möglichkeit Bilder in einem Artikel zu formatieren.

Vorher konnte man den Abstand, die Ausrichtung etc. über ein Popup definieren.

Gibt es die Möglichkeit nicht mehr?
Habe ich etwas übersehen?
Kommt es ggf. zu einem späteren Zeitpunkt zurück?

Danke!

[mlweb]

Eigentlich sollte man so etwas über css machen.

[Schockwelle]

Eigentlich sollte man so etwas über css machen.

Erzähl das mal einen Kunden. Besonders bei diversen Möglichkeiten, wie man ein Bild im Text positionieren kann.

[Stefko]

Erzähl das mal einen Kunden. Besonders bei diversen Möglichkeiten, wie man ein Bild im Text positionieren kann.

@mlweb hat da meiner Meinung nach schon recht. Im Prinzip gibt es ja auch nur vier Möglichkeiten, oben, unten und float left & right. Diese lassen sich schon per CSS definieren.
Soll nun der Kunde/Redakteur/who ever nun wirklich die Möglichkeit haben, das Layout zu zerschießen, kann man den 4er TinyMCE auch um Funktionen erweitern, die im 3er noch Standard waren. Von Cliff Parnitzky gibt es da den [tiny-mce-plugin-loader]

Grüße,
Stefko

[lucina]

Prinzipiell gäbe es dafür: https://packagist.org/packages/cliff...-plugin-loader und dazugehörige Plugins.

Wobei das sicher noch nicht kompatibel zu 4.4 ist, was sich aber möglicherweise durch Beauftragung ändern lässt.

Grundsätzlich gebe ich der Vorposterin allerdings recht. CSS ist der bessere Weg, und Inline-Styles sind in Zeiten mobiler Zugriffe & darauf angepasster Layouts alles andere als optimal.

Möglicherweise fährt der Kunde besser, wenn Du ihm (oder ihr ...) erklärst, weshalb das nicht so gut ist, dass man Artikeltexte auch in mehrere Häppchen aufteilen kann um die Core-Funktionen zur Ausrichtung zu nutzen und darüber hinaus mit ein paar CSS-Klassen versorgst.

[mlweb]

Das Einbinden von Bildern im Tiny lasse ich grundsätzlich nicht zu (Anpassung Tiny).
Wenn der Kunde mit dem Auswählen von Klassen nicht überfordert ist löse ich vieles mit https://packagist.org/packages/psi/stylepicker4ward. Manchmal sind aber auch custom-Elements die bessere Lösung. Ich setze rocksolid-custom-element ein. Alternative wäre der dma_elementgenerator.

Ich richte das Backend wenn es irgend geht so ein, dass es kein Kunde schafft Inline-Styles zu verwenden, einzige Ausnahme ist eine Seite mit einem fertigem Theme wo das in einigen Bereichen so vorgesehen ist.

Vieles ist bei den Kunden auch harte Überzeugungsarbeit bzw. Schulung.

Edit: Korrektur Erweiterungsname

[Stefko]

stylepicker4ward wollte ich auch schon als "Alternative" vorschlagen, zumal man da dem User auch anhand von Screenshots zeigen kann, wie das Ergebnis aussieht. Leider ist es noch nicht 4.4 kompatibel.
Auf die Schnelle bin ich über das hier gestolpert, aber selbst noch nicht getestet: https://packagist.org/packages/craff...elector-bundle

NACHTRAG:
Habe mir eben mal [css-style-selector-bundle] angeschaut, aber leider reicht es, was die Möglichkeiten angeht, (noch?) nicht an [stylepicker4ward] heran.

[Schockwelle]

stylepicker4ward wollte ich auch schon als "Alternative" vorschlagen, zumal man da dem User auch anhand von Screenshots zeigen kann, wie das Ergebnis aussieht. Leider ist es noch nicht 4.4 kompatibel.
Auf die Schnelle bin ich über das hier gestolpert, aber selbst noch nicht getestet: https://packagist.org/packages/craff...elector-bundle

css-style-selector-bundle sieht schon gut aus, aber sowas in dem Modal zur Bildauswahl wäre perfekt.

[Stefko]

css-style-selector-bundle sieht schon gut aus, aber sowas in dem Modal zur Bildauswahl wäre perfekt.

Zum Verständnis, reden wir jetzt a) von dem Inhaltselement "Bild" oder sprichst Du b) davon ein Bild per RichTextEditor (TinyMCE) einzufügen?

a) das ist möglich, wenn Du CSS-Klassen für den Stylepicker definierst, kannst sehr detailliert bestimmen, wo und wann die Anwendung finden sollen. D.h. definierst Du Klassen für für das IE "Bild", stehen diese auch nur dort zur Auswahl und z.B. nicht bei dem IE "Text".

b) das würde ich wie auch schon @mlweb andeutete unterbinden. Mag für den User vlt. im ersten Moment etwas umständlich/restriktiv erscheinen. Aber aufgrund leidvoller Erfahrung ist es meist der bessere Weg - spart viele Nerven
Ausnahmen mache ich da nur bei Leuten, von denen ich weiß, dass sie wissen was sie tun - und das sind nicht arg viele

[Schockwelle]

Ich meine Variante B.

Die Erweiterung "css-style-selector-bundle" erfüllt Ihren Zweck.
Allerdings wäre es schon sensationell, wenn man die CSS Klasse, die man definiert hat
im Modal (da wo man auch die Grafik auswählt) auswählen könnte.

Hätte den Vorteil, dass man als Entwickler die Klassen definieren kann und zum anderen
der Nutzer vordefinierte Klassen nutzen kann.

[mlweb]

Im Prinzip ist doch letzteres möglich, wenn Du die Bilder z.B. beim Textelement nur über die Quelldatei auswählen lässt (zumindestens beim Stylepicker). Irgendwie habe ich da Gefühl wir reden aneinander vorbei.
Warum soll der Redakteur den unbedingt Bilder über den Tiny einbinden können? Dafür gibt es doch das Textelement mit der Möglichkeit Bilder oben, unten, recht und links einzubinden und Du kannst über css steuern wie oben unten rechts und links nun konkret aussehen sollen. In den Fällen wo das noch nicht genug ist, kannst Du über zusätzliche Klassen z.B. oben rechts oder links oder unten mit riesigem Abstand steuern.

[Schockwelle]

Im Prinzip ist doch letzteres möglich, wenn Du die Bilder z.B. beim Textelement nur über die Quelldatei auswählen lässt (zumindestens beim Stylepicker). Irgendwie habe ich da Gefühl wir reden aneinander vorbei.

Siehe Anhang. Ich meine über den MCE bzw. Tiny.

Warum soll der Redakteur den unbedingt Bilder über den Tiny einbinden können? Dafür gibt es doch das Textelement mit der Möglichkeit Bilder oben, unten, recht und links einzubinden und Du kannst über css steuern wie oben unten rechts und links nun konkret aussehen sollen. In den Fällen wo das noch nicht genug ist, kannst Du über zusätzliche Klassen z.B. oben rechts oder links oder unten mit riesigem Abstand steuern.

Warum soll der/die RedakteurIn es nicht können? Es gibt ja die Funktion und außerdem erzeugt es weniger Markup.
Im Tiny Modal einfach eine vordefinierte Klasse auswählen und die Sache wäre perfekt.

Im alten (edit: 2.x) Modal war es möglich die Abstände auszuwählen.

[mlweb]

s.o. die Hinweise von @Steffko.
Die Möglichkeit im Tiny gibt es deshalb, weil der ja nicht speziell für Contao gebaut wird. Über weniger Markup mag ich mich hier nicht auseinandersetzen. Ein Argument gegen Bilder im Tiny sind auch responsive Bilder, die m.E. mit dem Tiny nicht funktionieren, jedenfalls nicht out of the Box.
Wenn Du es unbedingt im Tiny machen willst, dann gib Klassen vor, die im Tiny wählbar sind. Geht ja auch.

[Schockwelle]

s.o. die Hinweise von @Steffko.
Die Möglichkeit im Tiny gibt es deshalb, weil der ja nicht speziell für Contao gebaut wird. Über weniger Markup mag ich mich hier nicht auseinandersetzen. Ein Argument gegen Bilder im Tiny sind auch responsive Bilder, die m.E. mit dem Tiny nicht funktionieren, jedenfalls nicht out of the Box.
Wenn Du es unbedingt im Tiny machen willst, dann gib Klassen vor, die im Tiny wählbar sind. Geht ja auch.

Steffko meinte aber, dass es mit stylepicker4ward funktioniert und stylepicker4ward ist nicht mit 4.4.x kompatibel.

Wenn ich ein Bild über Tiny einfüge, dem Bild Float+Padding und zusätzlich die Klasse img-repsonsive (Bootstrap) vergebe, dann sollte es doch kein Problem mit responsive geben oder irre ich?

Ich habe kein Problem damit CSS-Klassen zu definieren, allerdings frage ich mich, wie ich diese im Tiny vergebe (außer im HTML-Code)? Ohne Extension?

[mlweb]

Steffko meinte aber, dass es mit stylepicker4ward funktioniert und stylepicker4ward ist nicht mit 4.4.x kompatibel.

Stylepicker4ward ist auch für die normale Art Bilder in Contao einzufügen gedacht, genauso wie style-selector-bundle soweit ich sehe.

Wenn ich ein Bild über Tiny einfüge, dem Bild Float+Padding und zusätzlich die Klasse img-repsonsive (Bootstrap) vergebe, dann sollte es doch kein Problem mit responsive geben oder irre ich?

Keine Ahnung was Bootstrap macht. Ich nutze Bootstrap nicht.
Ich meinte die Möglichkeiten des Contao-Cores um responsive Bilder einzusetzen.

Ich habe kein Problem damit CSS-Klassen zu definieren, allerdings frage ich mich, wie ich diese im Tiny vergebe (außer im HTML-Code)? Ohne Extension?

In Contao 4 habe ich es mir noch nicht angeschaut, wie man das macht. Da gibt es ja für den Tiny jetzt auch ein Template, wenn ich es richtig in Erinnerung habe. Früher hat man das über die tiny.css gemacht. Ich meine aber dass das vor kurzem auch schon mal hier im Forum für contao 4 erklärt wurde. Wenn ich den Thread finde verlinke ich ihn noch.

Nachtrag: Einen Link gefunden zwar nicht im Forum, sondern bei E+F. Googeln hilft. Hier kommt der Link https://erdmann-freunde.de/ressource...ao-4-anpassen/

[mlweb]

Aber noch mal eine Frage am Rande, meinst Du wirklich, dass das eingesparte figure-Element im Quellcode, den Aufwand rechtfertigt unbedingt Bilder im Tiny einzufügen?

Edit: Link in passenden Beitrag verschoben.

[Andreas]

Hier nochmal der Vergleich der TinyMCE Konfigurationsdatei von Contao 3.5 und 4.
https://github.com/contao/core/blob/...CE.php#L47-L49
https://github.com/contao/core-bundl...yMCE.html5#L35

Wie man sieht ist das Plugin importcss in Contao 4 bereits geladen, aber "content_css: path/to/style.css" fehlt, welches in 3.5 auf files/tinymce.css zeigte.