WBCE Home | WBCE Hilfe | WBCE Addon Repository | Impressum | Datenschutz

WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 07.01.2017 10:39:45

grindbatzn
Member

Bilder + Upload + WYSIWYG + Plan(los) ;-)

Mit Bildern (responsive) habe ich immer so meinen Not..
Klar: Ich kann HTML, ich kann alles machen. Aber ich würde auch gerne haben, dass das alles ganz einfach ist, so dass jeder Anfänger sofort zurecht kommt.

Kurz: Ich würde gerne haben: dass man an jeder Stelle ein Bild hochladen und zuschneiden kann (egal ob Module oder WYSIWYG-Editor).
Im Editor ganz einfach und narrensicher responsive zu machen. (Module sollten das ohnehin selbst machen)
Möglichst mit Drag and Drop und nichts falsch zu machen.
KEINE Option: Bild über die Medienverwaltung hochladen  und dann reinholen - das ist 70er Jahre.

Ich eiere da ziemlich herum, und komme auf keine allgemein befriedigende Lösung.

Bilder für Module:
Da bin ich momentan zuversichtlich, dass man das mit GlobalUpload gut auf die Reihe bekommen kann.
https://forum.wbce.org/viewtopic.php?pid=7983

Auch  cherrg arbeitet an was, da ist der Ansatz ganz verschieden, aber vielleicht geht das zusammen.
https://forum.wbce.org/viewtopic.php?pid=7975

Dann gibt es noch die Toolbox im Admin-Theme beesign_ce
http://addons.wbce.org/?do=item&item=62
Auch da ist ein Upload drin (der ebenso durch GlobalUpload ersetzt werden kann). Diese "Toolbox" kann noch einiges mehr und lässt sich ziemlich leicht in jedes Admin-Theme einbauen. Ist nur ein iFrame.
Den richtigen Browser vorausgesetzt kann man hier einfach ein Bild hochladen, Class auswählen und - per Drag&Drop in den Editor ziehen.
toolbox.jpg

Leider ist das eben sehr vom Zusammenspiel Browser/Editor abhängig. Mit FF gehts am besten. Die Bild-Klassen sind in den meisten neueren Templates definiert (pic2-4left/right)
Was gar nicht mehr geht, sind komplexere Gebilde - die die Toolbox natürlich erzeugen kann, aber: Wie kriegt man die dann in den Editor?

Ja

Gibt es noch weitere Optionen? Hab ich etwas vergessen (ich weiß nicht alles ;-)

Wie macht ihr das?

Offline

#2 07.01.2017 12:49:15

cwsoft
Developer

Re: Bilder + Upload + WYSIWYG + Plan(los) ;-)

Wie macht ihr das?

In Silverstripe CMS wird das ganze wie folgt gelöst, was ich vom Ansatz her recht gut finde.

1. Es gibt eine Core Image Klasse die Crop, Resize etc. mitbringt (ähnlich class_upload.php)
2. Beim Bildupload wird das Bild auf eine max. Grösse skaliert (oder belassen) und in /media gespeichert
3. Beim ändern im WYSIWYG Editor wird automatisch ein Bild /media/cache/image_path_scale_400x500.png erzeugt und verlinkt
4. Aus PHP und in Templates stehen die Image Funktionen ebenfalls zur Verfügung
5. Geänderte Bilder landen immer in /media/cache und werden vom System automatisch erzeugt

Ich fand sehr sypatisch, dass Bilder vom WYSIWYG Editor hochgeladen werden können und Bild-Änderungen (resize, crop, scale etc.) im Editor beim abspeichern ein skaliertes Bild erstellen und dieses verwenden, statt einfach nur die HTML Eigenschaften width und height des Bildes zu übernehmen, aber stets das Originalbild in Originalgrösse laden.

Gruss cwsoft

Last edited by cwsoft (07.01.2017 12:50:23)


Signaturen werden überbewertet

Offline

#3 07.01.2017 13:26:04

grindbatzn
Member

Re: Bilder + Upload + WYSIWYG + Plan(los) ;-)

Hallo!
So wie du es aus Silverstripe beschreibst, ist an sich das, was ich mit GlobalUpload vor habe: Bilder auf ca 1600 x 2500 (oder so) belassen, mehrere Größen aus diesem Original beschneiden können. Auch nachträglich, jederzeit neu.
Es gibt aber keinen Cache, sondern die Bilder werden einfach im Bildverzeichnis des Moduls unter /original bzw /zoom gespeichert.
Das funktioniert bei Modulen mit klarer Struktur recht gut. Ist aber momentan eine andere Baustelle.

Mehr Sorgen macht mir eben der WYSIWYG Editor, da gibt es keine klaren Strukturen.

Bildgrößen: Ich denke, dass sich da durch Responsive Design (und durch den Breitbandausbau..) sehr viel geändert hat. Man schneidet heute keine Bilder mehr genau zu, sondern sagt "so irgendwie" - und dann wird eben gestaucht.
In der Toolbox hast du zur auswahl: Groß, Sidebar oder Klein: 1200px, 768px, 440px. (Breite)
Ich glaube, feiner muss man gar nicht mehr unterscheiden.

Offline

#4 07.01.2017 14:29:09

cwsoft
Developer

Re: Bilder + Upload + WYSIWYG + Plan(los) ;-)

@grindbatzn: Ja die responsive Images sind in der Tat noch ein weiteres Feature das man berücksichtigen sollte. Bin aber leider kein Designer und auch kein Meister in JavaScript, um zu den Dingen was brauchbares sagen zu können.

Evtl. gibt es auch Plugins für den CKEditor die teile der Probleme bereits lösen, wie z.B. das schon ältere Enhanced Image: http://ckeditor.com/addon/image2, oder Upload Image: http://ckeditor.com/addon/uploadimage

Auf jeden Fall schön dass Du dich dieser Problematik anhand eines Prototypens angenommen hast und Michael in die Richtung auch was entwickelt  thumb_up

P.S.: Es wird ja auch bereits seit einigen Jahren am Nachfolger CKEditor 5 gearbeitet, der vor allem hinsichtlich Responsive und HTML5 getrimmt wird. Dauert aber wohl noch etwas bis zu einem fertigem Produkt: https://ckeditor5.github.io

P.P.S.: Drupal 8 löst das Responsive Image Problem ähnlich wie von grindbatzn beschrieben, mit dem <picture> Tag und vordefinierten Bildgrössen in Abhängigkeit des aktuellen Viewports: https://dev.acquia.com/blog/tutorial-dr … /2016/9821

Last edited by cwsoft (07.01.2017 14:59:31)


Signaturen werden überbewertet

Offline

Board footer

Powered by FluxBB

up