WBCE CMS Forum

jh-hh

Mitglied

[Erledigt] Wie stellt man WYSIWYG Bilder ein?

Hallo!

Die Artikel über Bildgrößen habe ich mir durchgelesen.
Trotzdem ist mir überhaupt nicht klar, wie mit dem CKeditor Bidler eingepflegt werden.

Beispiel:
Kunde ändert den Inhalt einer Seite, dabei werden im Textfluss zwei Bilder eingefügt.
Der Kunde möchte Größe und Ausrichtung der Bilder festlegen - über Pixelgrößen funktioniert das nicht mehr, Prozentangaben sind schlecht einzuschätzen und der Editor fügt dann Pixelangaben automatisch nach Seitenverhältnis hinzu, die bleiben auch als Höhe erhalten...

Das Ergebnis ist, dass der Kunde weder auf der Seite noch im Editor (nach erneutem Aufruf) die Seite so angezeigt bekommt, wie er sie angelegt hat... also gerade nicht WYSIWYG... Kunde ist frustriert.

Natürlich will niemand auf responsives Design verzichten.

Wie ist das gedacht: Wie muss ich WBCE und den CKeditor konfigurieren, damit der Kunde WYSIWYG im Editor hat, responsives Design generiert wird und Bilder dennoch einzeln angepasst und eingefügt werden können?

Vielen Dank schon mal für Hinweise,
Gruß, jh

colinax

Developer

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Hallo jh,

das wichtigste vorweg der CKEditor ist reiner Texteditor mit Zusatzfuntionen und kein WYSIWYG

Wenn die Webseite ein Responsive Design besitzt darf der Kunde über px, % und co keine Anpassungen der Bilder vornehmen, sobald der CKE die Größe und Breite eines Bildes festlegt ist es nicht mehr responsive!

Der CKE erzeugt nur statische Bilder, im Responsive Design benötigen wir aber dynamische Bilder die sich anpassen können, dass geht nur über CSS. Das was der CKE in den Quelltext rein gibt, ist kein CSS sondern nur statisches („dummes“) HTML.

Auch die % sind in diesem Sinne statische Werte und damit nicht responsive.

damit der Kunde WYSIWYG im Editor hat

Das ist eine reine Template Sache, WYSIWYG im Editor funktioniert auch nur dann wenn ich die Selbstständigkeit des Kunden, beim bearbeiten des Inhaltes beschneide = der Kunde darf nur vordefinerte Klassen bzw. Standards verwenden sonst nichts.

Beitrag geändert von colinax (14.06.2017 14:55:10)

jh-hh

Mitglied

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Danke für die Erläuterung!

Sorry, aber nochmal zum Verständnis:
Heißt das, ich muss per CSS eine einzige Standardbildgröße festlegen, in der dann alle Bilder skalieren (die per CKeditor eingefügt werden?
Oder kann ich irgendwie mehrere Größen per STyles zur Auswahl anbieten?

Merci, jh

florian

Administrator

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Es gibt in vielen neueren Templates die Klassen pic2right, pic2left, pic3right/left, pic4right/left sowie picfull.
Wenn nicht, kann man anhand dieses Beispiels solche Klassen selbst definieren.
Die Klassen im Beispiel sorgen dafür, dass ein Bild die Hälfte / ein Drittel / ein Viertel / die gesamte Breite des Elternelements einnimmt und (außer bei gesamter Breite) rechts bzw. links vom Text umflossen wird.
Zusätzlich ist in den genannten Beispiel-Klassen height:auto !important; angegeben, so dass die Bilder immer ihr richtiges Seitenverhältnis behalten.

Diese Klassen sind in der CSS-Datei des Templates bzw. in der editor.css hinterlegt.

Wenn also im Feld "Formatvorlagenklassen" die jeweilige CSS-Klasse eingegeben wird, wird das so auch sofort im CKEditor-Feld angezeigt.
Das schreibt man dann in die Doku und/oder erklärt es dem Kunden im Rahmen einer Schulung, und dann gibt es auch keinen Frust mehr.

Beitrag geändert von florian (14.06.2017 15:39:31)

---

Code allein macht nicht glücklich. Jetzt spenden!

jh-hh

Mitglied

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Danke, florian!

Damit kann ich was anfangen, die Klassen ermöglichen zwar keine filigrane gestaltung, aber für die meisten Seiten sollte das ja ausreichen...

Vielleicht wäre es für die Zukunft eine gute idee, diese Klassen einfach im CKeditor zur Auswahl anzubieten?

Ich such jetzt erst mal, ob ich solche Klassen habe und pass die an,
vielen Dank für die Hilfe,
Gruss, jh

colinax

Developer

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Vielleicht wäre es für die Zukunft eine gute idee, diese Klassen einfach im CKeditor zur Auswahl anzubieten?

Nein, dass wird per deafult im CKE nie umgesetzt werden, da es nur für Verwirrung sorgt, dass muss der Template Entwickler selber machen, über eine editor.styles.js im Template VZ kann man die Klassen in den CKE bringen.

Beitrag geändert von colinax (14.06.2017 16:49:18)

jh-hh

Mitglied

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Aha... gibt es denn eine Dokumentation zu dieser "editor.styles.js"?

Ich denke, so eine Vorauswahl würde ich gerne realisieren, aber ich finde nichts auf http://docs.ckeditor.com/#!/guide zu der Datei...

Cheers, jh

grindmobil

Gast

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Das würde auch mich sehr interessieren!

Auch bin ich nicht der Meinung, dass man das den template-entwicklern überlassen soll. Man sollte zumindest versuchen, Standards zu etablieren. Wer sich dann nicht dran hält, ist eben selber verantwortlich.

colinax

Developer

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Der Dateiname ist ja auch eine Erfindung von WB, eine Doku über den Inhalt der Datei gibt es zwar, ist aber nicht sehr Sinnvoll, da diese noch auf CKE 3.2 beruht, aktuell haben wir ja 4.7.x

Über den Link lässt sich die editor.styles.js des CKE ansehen die wir von Classic mitgenommen haben da gibts viele Beispiele.

evaki

Gast

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

>>Wer sich dann nicht dran hält, ist eben selber verantwortlich.
Jo, das würde ich mir -janz persönlisch- auch nicht nehmen lassen 

MfG. Evaki

grindmobil

Gast

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Ich hab da hier mal angerissen:
https://wbce.at/de/topics/wbce-und-bilder.php

Natürlich ist jedem unbenommen, seine eigene Suppe zu kochen, aber ich denke den meisten Usern (und Designern) ist es egal, wie das Ding heißt, solange es funktioniert.

screamindan

Mitglied

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Moin. Ich finde die Steuerung der Bildgrösse über Klassen eigentlich SEHR bedienerfreundlich. Am Anfang hab ich immer versucht, das direkt im Editor einzustellen. Da vergisst man aber gerne mal, wie gross das jetzt genau war. Die Website soll ja schliesslich nicht aussehen wie ne mexikanische Würfelbude... Also hatte ich nen Zettel mit Bildmaßen. Mittlerweile hab ich nur noch pic_links und pic_rechts in 2 verschiedenen Grössen.

Liegt vielleicht auch an meiner Arbeitsweise; ich benutze in Libre Office auch die Formatvorlagen und tippe nicht wie auf ner Schreibmaschine...

Beitrag geändert von screamindan (15.06.2017 10:50:02)

florian

Administrator

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Zumal mich das immer ganz fuchsig macht, wenn ein briefmarkengroßes Bild physikalische Postermaße hat und ich trotz Kabel-DSL dabei zuschauen muss, wie sich das Bild Zeile für Zeile aufbaut. 2 MB und mehr, wo auch 20 KB gereicht hätten, muss doch nicht sein.

---

Code allein macht nicht glücklich. Jetzt spenden!

grindmobil

Gast

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Zumal mich das immer ganz fuchsig macht, wenn ein briefmarkengroßes Bild physikalische Postermaße hat und ich trotz Kabel-DSL dabei zuschauen muss, wie sich das Bild Zeile für Zeile aufbaut. 2 MB und mehr, wo auch 20 KB gereicht hätten, muss doch nicht sein.

Ja, aber da kann den Leute da keinen Vorwurf machen. Sie wissen es eben nicht besser, und weil sie das Bild dann ja schon im Cache haben, fällt es ihnen nicht mehr auf.

Für mich ist das eine der ganz wichtigen Fragen: Wie stellt man WYSIWYG Bilder ein?

Etwas wie Image-Tweak - beliebige Größe hochladen und einsetzen, erst beim ersten Aufruf verkleinern - das kann man bei responsiven Designs grundsätzlich vergessen.

Es gäbe da die Toolbox aus beesign CE.
Die funktioniert ganz gut in FIrefox, sonst aber nicht (mehr). Und ist insgesamt ein wenig "verbesserungswürdig".

Was ich gerade bastle: Bild hochladen (dabei grob verkleinern, Original behalten), class per Schalter auswählbar, eventuell Bildunterschrift dazu, -> Button "DO" setzt alles im CKEditor an Cursorposition ein.
Das geht und funktioniert auf meinem localhost schon. Aber es st mir an manchen Stellen zu schwierig, ich stecke etwas fest.
Und das setzt auch die oben genannten Classes voraus. Wenn die nicht da sind, funktioniert nichts.

Inline-Styles würden sich ebenfalls mitübergeben lassen, aber das ist sehr heikel.

Vorschläge? Anregungen?

Beitrag geändert von grindmobil (16.06.2017 19:23:29)

screamindan

Mitglied

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Ich benutze meistens JPEG Kompressor, um die Grösse und / oder die Dateigröße zu reduzieren. Wenn sich sowas zwischen hochladen und einfügen des Bildes schalten lassen würde... Muss man dann aber wohl aufpassen, dass kleine Bilder da nicht aufgeblasen werden...

grindmobil

Gast

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

In fast jedem Modul, das Bilder hochladen kann wird die Größe reduziert.
Nur im Editor nicht.
Das ist verwirrend.

evaki

Gast

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Meine Anwender und alle aus dem DTP-Bereich möchten keinesfalls die Göße von "irgend einem Teil, in welchem CMS auch immer"  automatisiert reduziert wissen, sondern möchten Bildergrößen und per css-Klassen selbst festlegen wo es langgeht, außer es ist ausdrücklich erwünscht. Wer über "gescheite" Werkzeuge verfügt, weiß im allgemeinen, z.B. aufgrund Ausbildung oder sonstiger Unterrichtung, daß er mit diesen optimierte und damit bessere Ergebnisse als mit sonstwas auf 'nem Server erzielt. Wer mit einem CMS werkelt, sollte über Grundkenntnisse diverser Art verfügen.

(oder weiter auf seinem Handy spielen -der mußte mal raus. Hatte heute mal wieder Leute, die delegiert auf dem Gleis "Technik-Allwissend" laufen. Kollateralschäden vorauszusehen... Schön, daß Wochenende kommt. -wg Halskrause und so)

MfG. Evaki

Beitrag geändert von evaki (16.06.2017 20:32:26)

grindmobil

Gast

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Evaki: DEINE User machen das, was DU ihnen seit 10 Jahren eintrichterst. Für die jüngere Entwicklung im Web hat das NULL Relevanz.

DIe Leute schauen sich heute HD-Videos auf YouTube an, und bald 4k Videos. Mit dem Handy im Wald.

In der gelebten Praxis sind die Zeiten vorbei, wo man ein Bild genau passend herrichtet, hochlädt und einbaut.
Heute habe ich "Größenordnungen", klein, mittel, groß.

Da kaum ein Bildschirm höher als 1400 Pixel ist, reicht bei "groß" eine Limitierung in der Höhe auf 1200. (1200, weil ja immer noch oben/unten irgendein Rand ist.) Breite maximal ca 1800 oder so.
1000 Pixel breite sehe ich als mittel, 480 Pixel breit/hoch als klein. Ein Thumb geht in Richtung 120px im Quadrat.

Irgendwelche Zahlenangaben sind vielleicht für Altgediente, die Mehrheit der Leute interessieren sich nicht mehr dafür.

screamindan

Mitglied

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Ich denke wenn man es hinbekommt, Bilder beim hochladen auf die für Responsive nötige Grösse bei kleiner Dateigrösse zu skalieren, wäre das schon gut. Ich mag die Klassen, von mir aus auch mehrere; links / rechts in variierenden Breiten. Das ist einfach, auch für "Endnutzer" die keine Ahnung haben. Meiner Erfahrung nach sind denen spezielle Grössen nicht so wichtig. Entweder Bild über komplette Breite, oder seitlich mit Text daneben...

evaki

Gast

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

@grindmobil
Mit Deiner Einschätzung liegst Du komplett daneben. Machs doch für die "Schlichten" einfach so wie die Spaß dran haben oder auch nützlich ist bzw. sein kann, nur solls -wie angemerkt- nicht diktiert werden. Übrigens braucht man den Profis nichts zu erzählen, die bringen mit jeder Generation ihr eigenes und erweitertes Fachwissen mit. Wenn die höhere Auflösung und Größenangaben einsetzen hat das auch nix mit altbacken sondern mit genauen Zielsetzungen (z.B. kein Gemurkse auf'm Schnäppchenjäger-Server) zu tun. Da Du ja anscheinend keine Einblicke in z.B. Verlage hast, bleib halt einfach bei Deinen Leisten, statt Leute auf dem ewig gleichen Niveau anzumachen. Das steht Dir und diesem Forum nicht gut.

Es geht nicht an, daß ich wg. diverser persönlicher "Untertöne" zur Raison gemahnt werde, aber Du hier die Sau rauslassen kannst. Laßt es einfach, un jut is. Amen.
MfG. Evaki

Beitrag geändert von evaki (17.06.2017 10:48:04)

grindbatzn

Gast

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Evaki: Ich nehme an, dass die Sites, die du betreust, nicht unbedingt die frischesten sind, was responsive Design betrifft. Es ist dir unbenommen, das auch weiterhin so zu machen wie du glaubst, aber wer heute eine SIte anfängt, braucht was anderes.

@topic:
Ich versuche ja immer wieder mal, das Thema "Responsive Bilder einfach in den Editor bekommen" in den Griff zu kriegen.
Momentan schraube ich an der Toolbox2, aber ich stehe ein wenig an.

Wie das aussieht - und warum ich anstehe, hab ich hier in einem Video dargestellt:
https://youtu.be/UirNrkwn7rc
(Alles was nur so gebrummelt ist, muss man nicht verstehen)

Beitrag geändert von grindbatzn (17.06.2017 11:16:07)

evaki

Gast

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Nach ("was DU ihnen seit 10 Jahren") also 10 Jahren solltest Du wissen, daß ich keine Sites betreue.

Beitrag geändert von evaki (17.06.2017 10:57:26)

florian

Administrator

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Hinsichtlich der von der Entität evaki betreuten Nutzer_innen ist die Einschätzung "Null Relevanz" etwas überzogen, es gibt ja im geschilderten DTP-Umfeld durchaus Anwendungsfälle, in denen eine Verkleinerung der Bilder nicht oder nach anderen Kriterien gewünscht ist.
Allerdings hat auch Chio recht, wenn er darauf hinweist, dass sich das Mediennutzungsverhalten und die Kriterien, wie Bilder auf Webseiten eingestellt werden, ändert (anzumerken ist hier allerdings, dass in Deutschland der Ausbau des mobilen Internets weit, weit hinterherhinkt und auch die Preise für die Nutzung von mobilem Internet hierzulande zu den teuersten in Europa zählen).
Die Aussage "Mit Deiner Einschätzung liegst Du komplett daneben" ist also genau so falsch wie die Null-Relevanz.

Das Beruhigende: Chio arbeitet an einen MODUL, und das bedeutet: wem es gefällt - und mir wird es gefallen, denke ich - der_die nutzt es; und alle anderen tun es dann eben nicht. Niemandem wird hier etwas aufgezwungen.

Weitere Metadiskussionen bitte per PM untereinander fortführen.

Beitrag geändert von florian (17.06.2017 11:36:15)

---

Code allein macht nicht glücklich. Jetzt spenden!

grindbatzn

Gast

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Naja - ich arbeite eben NICHT an diesem Modul - weil ich anstehe.

Es läge noch viel Arbeit vor mir, die mir aber nicht ganz sinnvoll erscheint. MIr kommt vor, dass man das anders angehen sollte:

Resizen: Im CKEditor kann man Bilder hochladen - aber sie werden nicht resized. Das sollte eigentlich ein kleineres Problem sein; der Uploader ist PHP und könnte das auf die eine oder andere Art genauso machen wie die Toolbox.
Nur: Wie konkret? Man könnte in den iFrame des Uploaders genauso eine kleine Auswahlliste reinmachen: Nicht resizen, Content, SIdebar, Mini. Und das Original (wenn resized wurde) unter zb originalname.orig.jpg dazuspeichern.

Die Classes:  Ist es irgendwie möglich, die "Standard-CLasses" pic2left, pic2right usw leichter auswählbar zu machen? Ohne Notizzettel am Monitor?

Was mache ich, wenn ein zu großes Bild keine Class hat? Jede Lösung klemmt mit den obigen Classes. Kann ich jedem Bild, das über den Editor eingesetzt wurde zumindest eine class="pic_default" oder so geben? Hat das überhaupt SInn?

Vielleicht bin ich da auch komplett auf dem Holzweg - ist nicht auszuschließen.

Wie gehen andere CMS damit um?

Beitrag geändert von grindbatzn (17.06.2017 11:37:39)

florian

Administrator

Re: [Erledigt] Wie stellt man WYSIWYG Bilder ein?

Mal in Kladde gedacht: Wenn Du die Toolbox als Modul erstellst, könntest Du dieser eine include.php und eine frontend.css mitgeben (vgl. mein FontAwesome-Snippet), die dann immer geladen werden. In der frontend.css stehen dann Toolboxspezifische Klassen, auf deren Vorhandensein Du Dich somit verlassen kannst.

Klassen im CKEditor: http://ckeditor.com/addon/stylesheetparser

---

Code allein macht nicht glücklich. Jetzt spenden!