Bildeinbau via Editor erweitern

Fragen zur Installation von CONTENIDO 4.10? Probleme bei der Konfiguration? Hinweise oder Fragen zur Entwicklung des Systemes oder zur Sicherheit?
Antworten
Horst1234
Beiträge: 366
Registriert: Sa 25. Okt 2008, 12:45
Wohnort: Bremen
Kontaktdaten:

Bildeinbau via Editor erweitern

Beitrag von Horst1234 » Fr 13. Mai 2022, 11:38

Hallo zusammen,
das Bild-Modul kann ich ja so erweitern, dass die zusätzlichen Infos in der Dateiverwaltung (Medienname, Beschreibung etc) auch angezeigt werden, z.B. in einem Div unter dem Bild oder so. Das klappt super.
Nun meine Frage: kann man ähnliches auch im TinyMCE "einbauen", das also nicht nur das Bild, sondern auch die Zusatzinfos angezeigt werden (können)?
Hat jemand eine Idee, die auch ich als Nicht-Programmierer umsetzen kann?
Gruß aus Bremen,
Horst
Webdesign | Contenido: Templateprogrammierung, Einrichtung und Verwaltung | http://www.w2media.de

bodil
Beiträge: 340
Registriert: Fr 7. Okt 2011, 04:10
Kontaktdaten:

Re: Bildeinbau via Editor erweitern

Beitrag von bodil » Sa 14. Mai 2022, 15:37

Hi Horst!
Ich kann mich nicht erinnern, dass sowas schon veröffentlicht wurde, dabei klingt es ziemlich naheliegend, das mal in ein Modul zu packen: der Text wird nicht einfach ausgegeben, sondern er wird vorher nach Bildern durchsucht, die Metadaten werden z.B. als Bildunterschrift ergänzt und der Text erst dann ausgegeben.
Das, was dafür an Programmierung erforderlich ist, habe ich eigentlich alles schon mal gebaut. Ich hatte aber noch nie die Idee, das alles in ein Modul zu packen. Eigentlich wäre das aber eine schöne Idee. Vielleicht komme ich im Laufe der Woche dazu.
Grüße!
Bodil

Horst1234
Beiträge: 366
Registriert: Sa 25. Okt 2008, 12:45
Wohnort: Bremen
Kontaktdaten:

Re: Bildeinbau via Editor erweitern

Beitrag von Horst1234 » Sa 14. Mai 2022, 15:47

Hallo Bodil,
im Image-Modul kann man das ja recht einfach mit der $imageDescription im Template. Ich würde das aber gerne auch im Tiny haben ;-)
Oder haben wir uns falsch verstanden?
Gruß,
Horst
Webdesign | Contenido: Templateprogrammierung, Einrichtung und Verwaltung | http://www.w2media.de

homtata
Beiträge: 1142
Registriert: Mi 14. Jan 2004, 14:41
Kontaktdaten:

Re: Bildeinbau via Editor erweitern

Beitrag von homtata » So 15. Mai 2022, 21:58

Ich würde mal behaupten, dass das nur unter riesigen Schmerzen in den Tiny zu packen ist. Einfacher ist es, ähnlich wie in einem Teil der ArticleListReloaded, den Quelltext im Moduloutput nach img-Tags zu durchsuchen, die src zu zerhacken, dann gezielt nach dem zugehörigen Datenbank-Eintrag zu suchen und die Metatags für das Bild bereitzustellen. Es müsste dann aber noch eine Routine rein, wie welche gewünschte Meta-Eigenschaft wo mit welchem Wrapper-Code eingefügt werden soll, da wirds dann wieder etwas schwieriger.
Aus gutem Grund wird versucht, Bild und Textinhalte getrennt einzugeben und redaktionelle Vorgaben für die planbaren Spielflächen für jedes Element zu schaffen, da das weitaus einfacher handzuhaben ist.
Ich schreibe mir ständig andere Module mit oft mehreren Text- und Bildcontainern in EINEM Modul, die ich über Smarty-Templates dann jeweils "remixen" und zueinander gestalten kann. Und DANN kommt man auch easy an die Meta-Tags und kann die übers Smarty gezielt ausgeben. Solche Module haben wir hier auch schon gepostet, und die kann man mit etwas Geschick auch erweitern. Ein Beispiel gibts hier: viewtopic.php?f=116&t=43558

Horst1234
Beiträge: 366
Registriert: Sa 25. Okt 2008, 12:45
Wohnort: Bremen
Kontaktdaten:

Re: Bildeinbau via Editor erweitern

Beitrag von Horst1234 » Mo 16. Mai 2022, 07:15

Lieben Dank, Homtata, für deine ausführliche Antwort.
Ich hatte so etwas schon befürchtet, aber dachte, vielleicht kennt ja doch jemand einen Weg.
Ciao aus Bremen,
Horst
Webdesign | Contenido: Templateprogrammierung, Einrichtung und Verwaltung | http://www.w2media.de

bodil
Beiträge: 340
Registriert: Fr 7. Okt 2011, 04:10
Kontaktdaten:

Re: Bildeinbau via Editor erweitern

Beitrag von bodil » Mo 16. Mai 2022, 10:31

Hi!
Nein, ich hatte nicht vor, den Editor aufzubohren, sondern, so wie homtata schreibt, die Bilder im HTML-Code (Tiny-Output) passend zu ersetzen. In einem Template müsste man festlegen, durch welchen HTML-Schnipsel Bilder zu ersetzen wären und darin Platzhalter für medianame, description, copyright etc. vorsehen.
In einem nächsten Schritt könnten noch im Tiny gemachte Angaben für alt- und title-Tag die Datenbankdaten überschreiben.
Obwohl ich die Zuordnung von Meta-Daten zu Bildern bisher eher so gehandhabt habe, wie von homtata beschrieben, hielte ich so ein Modul für sinnvoll und sehr universell einsetzbar.
Grüße!
Bodil

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Bildeinbau via Editor erweitern

Beitrag von Faar » Mo 16. Mai 2022, 14:14

Im tinyMCE sind die Contenido eigenen Metadaten schlicht nicht vorgesehen, ich fand nirgends Hinweise darauf, dass man den Editor hier erweitern könnte, außer dem Bildtitel, denn der fehlt in meinem Contenido 4.10.1dev. Da ist nur die Bildbeschreibung eintragbar aber nicht der Titel.
Den kann man im tinymce.init({ ... am besten hinter dem Eintrag Toolbar: ...; einfügen, nach dem letzten Komma, der noch zu "Toolbar" gehört.
Beispiel für image_titel:true;

Code: Alles auswählen

tinymce.init({
  selector: 'textarea',
  height: 500,
  plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste imagetools wordcount"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    /* enable title field in the Image dialog*/
  image_title: true,
  ...
Dann erscheint auch ein Feld, in dem man den Bildtitel eingeben kann:
https://www.tiny.cloud/docs-4x/demo/image-tools/

Das geht leider nicht automatisch, da diese Bilddaten ja vom Contenido-PHP bereitgestellt und von Tynimce übernommen werden müssten.
Selbst wenn das PHP für die Bereitstellung der Upload- und Bildliste die Daten aus der Datenbank lesen würde, wohin im Tinymce würde das dann eingefügt werde?
Dazu bräuchte es in Bild-Plugin des Tinymce mit quasi Custom-Fields, wo dann die Daten vom PHP übernommen werden.
Und es bräuchte auch ein angepasstes Ausgabe-Template für den Tinymce, denn wohin sollen die Daten dann ins HTML geschrieben werden?
Praktisch müsste man dafür ein Contenido eigenes Plugin für den Tinymce bauen, nur für den einen Fall.

Hier tsum selbst üben:
https://codepen.io/tinymce/pen/epbRwB
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

bodil
Beiträge: 340
Registriert: Fr 7. Okt 2011, 04:10
Kontaktdaten:

Re: Bildeinbau via Editor erweitern

Beitrag von bodil » Mo 16. Mai 2022, 15:04

Hm. Mir dünkt, ich verstehe den Satz
kann man ähnliches auch im TinyMCE "einbauen", dass also nicht nur das Bild, sondern auch die Zusatzinfos angezeigt werden (können)
etwas anders als alle anderen Foristen.
Nach meinem Verständnis geht es darum, ein Bild mit dem Tiny einzubauen, und dann auf der Webseite Zusatzinfos angezeigt zu bekommen. Als Copyright-Hinweis, als Bildunterschrift, als alt-Parameter im Img-Tag. Und das ist vergleichsweise einfach hinzubekommen.
Alle anderen (Horst selbst möglicherweise auch?) scheinen zu wollen, dass diese Information im Editor auftaucht? Im Bildeinfüge-Dialog? Wozu?

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Bildeinbau via Editor erweitern

Beitrag von Faar » Mo 16. Mai 2022, 17:08

bodil hat geschrieben:
Mo 16. Mai 2022, 15:04
Nach meinem Verständnis geht es darum, ein Bild mit dem Tiny einzubauen, und dann auf der Webseite Zusatzinfos angezeigt zu bekommen.
Und wo sollen die her kommen?
Als Copyright-Hinweis, als Bildunterschrift, als alt-Parameter im Img-Tag. Und das ist vergleichsweise einfach hinzubekommen.
Nicht, wenn die zum Bild gehörig in der Datenbank liegen.
In dem Moment, wo man über Contenido-Modul an die Daten heran geht, befindet man sich nicht mehr im Editor.
Es sind zwei Welten.
Alle anderen (Horst selbst möglicherweise auch?) scheinen zu wollen, dass diese Information im Editor auftaucht? Im Bildeinfüge-Dialog? Wozu?
Das sehe ich als Problem an, weil der tinymce nicht dafür gemacht wurde.
Man müsste ein eigenes Contenido Plugin in Javascript programmieren.
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: Bildeinbau via Editor erweitern

Beitrag von McHubi » Mi 18. Mai 2022, 22:42

Hallo zusammen,

ich bin da absolut kein Kenner, aber könnte man dazu nicht ggf. eine Chain verwenden? Contenido.Frontend.HTMLCodeOutput zum Beispiel? (https://docs.contenido.org/display/CONDEVE/Chain) - allerdings finde ich die nicht mehr in der aktuellen 4.10.1 über den Pfad in der Doku...

Also nach dem Erstellen der HTML-Ausgabe nach img-Tags durchsuchen und dann über den Pfad sowie $imageDescription die Beschreibung "einmischen". Allerdings müsste man an jedem Bild im Tiny selbst wieder festlegen können, ob eine Beschreibung ausgegeben werden soll oder nicht - das könnte man über eine CSS-Klasse lösen. Sprich, wenn per Tiny eine CSS-Klasse "show_description" drin steht und die Chain sie findet dann soll der HTML-Code entsprechend ergänzt werden.

Holzweg? Mögliche Lösung? K.A. Die Manipulation vor dem Weiterreichen an den Browser ist aber in der Tat etwas nützliches. Man könnte darüber auch z. B. abbreviations automatisieren usw.

VG
Markus
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)

Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)

bodil
Beiträge: 340
Registriert: Fr 7. Okt 2011, 04:10
Kontaktdaten:

Re: Bildeinbau via Editor erweitern

Beitrag von bodil » Do 19. Mai 2022, 07:18

Hi Markus!
Das sehe ich ähnlich, denke aber, dass die Chain nur bedingt geeignet ist, weil sie den Code der kompletten Seite durchsuchen würde und man den Bereich, wo sie arbeiten soll wieder einschränken müsste. Daher fände ich es besser, den generierten HTML-Code direkt im Modul weiterzuverarbeiten eher er ausgegeben wird.
Grüße!
Bodil

Oldperl
Beiträge: 4250
Registriert: Do 30. Jun 2005, 22:56
Wohnort: Eltmann, Unterfranken, Bayern
Kontaktdaten:

Re: Bildeinbau via Editor erweitern

Beitrag von Oldperl » Fr 20. Mai 2022, 07:46

Servus,

grundsätzlich sollte man mit Chains sehr sparsam umgehen, zumal wenn sie den gesamten generierten Code parsen.

Man sollte eher schauen, ob man den Editor nicht "aufbohren" kann. Eventuell wäre ein Hook in den entsprechenden Klassen möglich, oder man könnte die entsprechende Contenido-Einbindung erweitern um eigene Plugins für den TinyMCE. So könnte man die Ersetzung beispielsweise beim Speichern des Editors machen oder auch das img-Plugin des Editors erweitern.

Für die 4er-Version findet man die entsprechenden Klassen unter /contenido/external/wysiwyg/tinymce4/contenido/.

Gruß aus Franken

Ortwin
ConLite 2.1, alternatives und stabiles Update von Contenido 4.8.x unter PHP 7.x - Download und Repo auf Gitport.de
phpBO Search Advanced - das Suchwort-Plugin für CONTENIDO 4.9
Mein Entwickler-Blog

bodil
Beiträge: 340
Registriert: Fr 7. Okt 2011, 04:10
Kontaktdaten:

Re: Bildeinbau via Editor erweitern

Beitrag von bodil » Di 24. Mai 2022, 07:22

Hallo zusammen!
Ich habe ein Modul gebaut, das zwar vermutlich nicht so funktioniert, wie von Horst gedacht, vielleicht aber trotzdem seinen Zweck erfüllt.
Das Modul arbeitet mit den üblichen TinyMCE-Editoren zusammen, die dafür nicht verändert werden müssen.
Die Funktion des Moduls: Im Editor werden wie gehabt Bilder in den Text eingefügt. Das Modul erkennt diese Bilder, interpretiert die Parameter der Bildes (alt, title, class ...) und liest die Metadaten der Bilder, die in der Dateiverwaltung hinterlegt sind, aus.
Im Modul gibt es ein Template (figure.tpl), in das all diese Daten eingefüllt werden können: Metadaten und Bildparameter. Damit am Ende irgendwo beim Bild der Medianame steht, trägt man im Template den Platzhalter {MEDIANAME} ein usw. ({INTERNAL_NOTICE}, {DESCRIPTION}, ... aber auch {ALT}, {TITLE}, {CLASS} ...) Außerdem gibt es einen Platzhalter {IMG}, in dem das eigentliche img-Tag stehen soll.
Es ist die Möglichkeit vorgesehen, dass man im Editor-Dialog mit der Beschreibung und dem Titel Media-Daten überschreiben kann. Was was überschreiben kann, ist im Array $overwrite festgelegt. Gibt man hier nur ein »-« (Minus) ein, bleibt das Feld leer, obwohl es Mediadaten dafür gibt. Ein alt-Parameter wird auf jeden Fall eingebaut, im Zweifelsfall ein leerer.
Es ist möglich, statt des einfachen img-Tags ein picture-Tag zu verwenden. Die source-Tags darin erhalten Bildversion von verschiedenen Typen (webp, jpeg) und sind auf die Größe verkleinert, die im Editor angeben wurden. Die Typen und deren Reihenfolge sind konfigurierbar ($types), werden keine Typen festgelegt, wird nur ein einfaches img-Tag ausgegeben.
Ich habe das Modul auf zwei Seiten mit Contenido 4.10.1 getestet, es sollte aber auch in älteren Versionen laufen. PHP 8.1 geht auch.
Über Anmerkungen freut sich:
bodil
Dateianhänge
content_text_with_images_with_captions.zip
(10.41 KiB) 86-mal heruntergeladen

McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: Bildeinbau via Editor erweitern

Beitrag von McHubi » Do 9. Jun 2022, 12:08

Hallo Bodil,

Danke Dir für das neue Modul. Ich habe es in der Übersicht viewtopic.php?f=116&t=43506 mit aufgeführt.

VG

Markus
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)

Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)

Antworten