Ckeditor Bilder Colorbox

Ganz ohne CSS gehts mit dem Media Modul hier findest du eine Anleitung in Bildern

https://docs.acquia.com/article/opening-image-field-lightbox-using-colorbox

Für CK-Editor brauchast du dann noch das Embed Button Modul, damit das Medium auch eingefügt und mit den entsprechenden Anzeigeeinstellungen versehen wird. So funktionierts automatiscch und ganz ohne Code!

https://ilovedrupal.com/blog/drupal-tip-2-colorbox-overlay-images-ckeditor hatte ich gerade versucht hat aber nicht funktioniert bei Drupal 8.
Es wird dort nicht der nötige Code im Editor hinzugefügt.

Deine Anleitung funktioniert nicht.
Dort kann man den nötigen code nicht im Ck Editor einfügen.

Was ist genau für ein Modul mit Embed Button Modul gemeint ?
Link bitte.

Die Anleitungn ist für Drupal 7. Die Anleitung, die du von mir bkommen hast ist für Drupal 8. Verwendest du denn Drupal 8? dann funktioniert die Anleitung von ILoveDrupal nicht. Die Anleitung, die ich dir verlinkt habe ist auch unvollständig, da du zunächst Media und das Modul https://www.drupal.org/project/entity_embed sowie https://www.drupal.org/project/colorbox. und https://www.drupal.org/project/entity_browser Letzten Endes musst du Drupal sagen, dass es für den auf das eingefügte Bild Die Anzeigeeinstellungen (den Bildstiel) anwenden soll, derColorbox aktiviert. Ich bin im augenblick leider nicht zu Hause und kann dir daher keine Schritt für Schritt Anleitung in Bildern schicken.

Ich habe Drupal 8.
Klar das die Anleitung von ILoveDrupal für Drupal 7 ist. Ich habe es einfach dort mit den Beta Modulen für Drupal 8 versucht.

Ok die Module von dir habe ich installiert.

Unter Inhaltstypen Artikel habe ich schon die Colorbox aktiv. Nur wo für den Editor weiß ich nicht.

Da kommt ja nur eine der Möglichkeiten unter :
in Frage.

Ich denke dann warte ich bis sie wieder zu Hause sind.
Und würde mich über eine Anleitung sehr freuen.

Hi,

soweit ich weiss musst du dem Image nur die CSS Klasse "colorbox" mitgeben.

MfG

Robert

Ja das ist richtig es ist aber die Frage wie man den Editor dazu bekommt das er dies autoatisch beim Bildereinfügen erledigt.
In Verbindung mit dem Modul File Entity Browser.

Hi,

der CKEditor unter Drupal 8 dürfte der gleiche Sein wie unter 7.
So sollte es vielleicht gehen:
https://www.knthost.com/drupal/colorbox-ckeditor-drupal-7

MfG

Robert

Die Anleitung funktioniert leider nicht.
Leider ist es nicht gleich.

Alo ich ahb jetzt mal den halben Abend rumgespielt und bin zu dem Ergebnis gekommen, dass es auf Grund einiger Bugs in Drupal momentan nahezu unmöglich ist, einen selbst erstellten entity browser zu kreieren, wenn man Drupal Vanilla benutzt. Ich selbst verwende die Distribution Lightning vin Aquia, die die aktuellen Bugs wohl recht ordentlich fixt. Je nachdem wie weit dein Projekt schon entwicklet ist, solltest du vielleicht überlegen lightning als Basis einzusetzen, um dein Zeil zu erreichrn. Ich weis, dass diese Antwort nicht besonders befriedigend ist, sie ist aber die schnellste und nervenschonenste Lösung, die mir einfällt.

Ich werde in den nächsten Tagen noch einmal probieren, auf einer frischen Lightning Installation Colorbox mit einem Media-Browser zu verknüpfen.

Tut mir leid, aber Media ist eben noch ziemlich experimentell, das habe ich heute Abend leider wieder feststellen müssen. Vielleicht habe ich die Antwort auf deine Frage bis nächste Woche, in sofern es die Zeit erlaubt.

Wenn du eine Seite möchtest, die hauptsächlich Artikel und Medien beinhaltet kann ich dir die Thunder Distribution empfehlen.
https://www.drupal.org/project/thunder

Damit funktioniert die Medienverwaltung wirklich sehr gut und es werden auch einige interessante Konzepte zum schreiben von Artikeln mit dem paragraphs Modul umgesetzt.

Vielen Dank das ihr euch soviel Zeit genommen habt um mir zu helfen.

Also wenn du es nochmal versuchen möchtest wäre es sehr gut. (Ich könnte zwar auch auf eine Lightning Installation wechseln aber ich weiß nicht in wie weit das wieder zu Problemen führt)
Ich finde es schade das es so einen Fehler gibt wo ich jetzt fast alles geschafft habe.

Was auch nicht richtig funktioniert sind die Breadcrumbs wie ich schon in einenem andern Post geschrieben habe.
Auch ohne aktiviertem Cache klickt man eine Seite an geht zur nächsten und der Breadcrumb bleibt der selbe. (Scheint ein Cache fehler zu sein.Cache komplett abgeschaltet in Drupal)
Und auch beim Modul https://www.drupal.org/project/token gibt es derzeit einen Fehler (Modul braucht man um einen Löschen Button für Daten zu bekommen. Wundert mich das es das nicht im Core mit drin hat) .
Mich wundert es derzeit das obwohl Drupal 8 ja auch nicht ganz neu ist derartige Fehler noch hat. Gerade der Breadcrumbs Fehler wo das ja ein Core Modul ist.

Ich habe derzeit noch meine Seite auf Drupal 7 also muss nicht direkt umstellen. Aber fände es halt schön weil wenn ich dort jetzt noch mehr mit Arbeite habe ich noch mehr Arbeit mit der Umstellung.

Weil auch das Importiern von Drupal 7 nicht fehlerfrei war musste ich alles per Hand kopiern (Beiträge) (HTML Code) . Leider kannn man ja beim Importiern über das Modul nicht bestimmen was nicht importiert werden soll.
(Fehler wenn man dann den Titel beim Artikel schreiben nicht ausfüllte gab es eine Absturtz Seite von Drupal. Was durchs fehlerhafte Importiern kam)
Jetzt wollte ich halt noch die Bilder in Drupal wieder einbauen und wäre dann halt bis auf den Breadcrumbs Fehler fertig.

Die Thunder Distribution hat auch keine Colorbox integriert.
Ob man das da besser nachinstalliern kann weiß ich nicht.

Die andere Distribution konnte ich nicht testen. Weil die Installtion auf http://simplytest.me/ mit Fehler abgebrochen ist.

Hi,

ich wollte Dir eigentlich raten selbst ein Plugin für den CKEditor zu schreiben,
dann bin ich über das hier gestolpert:
https://www.drupal8.ovh/en/pages/drupalmodule/synimage
https://www.drupal.org/project/synimage

MfG

Danke aber leider nicht ganz die Lösung.
Das Modul erstellt einen neuen Button aber damit wird der file Browser dann nicht mehr angezeigt.
Ich möchte ja :
https://www.drupal.org/project/file_browser
verwenden.
Oder geht das auch irgendwie damit ?

Ein eigenes Modul schreiben so weit bin ich leider noch nicht.

Also leider hatte ich auch mit Lightning keinen Erfolg. Offenbar erlaubt entity nicht, dass man dort einfach irgendwelche CSS-Klassen anhängt. Somit bleibt dann tatsächlich nur das Einfügen eines normalen Bildes ohne Mediabrowser und dann wie gewohgnt die classe colorbox und rel colorbox anhängen. Es gibt zwar Media Colorbox als Modul für Drupal 7. Das macht in dieser Version offenbar genau dass, was draufsteht. Der Port für Drupal 8 lässt aber noch auf sich warten. Du könntest höchstenns versuchen, die Colorbox datan direkt im twig-template deines Themes hinzuzufügen, wenn du eines erstellst. Dann brauchst du aber einen extra media-type, damit du ein entsprechendes Template erstellen kannst.

Ok schade.
Mit dem Theme kenne ich mich nicht so gut aus.
Also bleibt erstmal leider nur warten.

Mich wundert aber das es nicht funktioniert.
Wie machen andere das denn mit den Bildern ?
Weil man muss es ja schaffen das die beim klicken darauf größer dargestellt werden.

Das Colorbox Modul liefert "nur" einen Feldformatter für Bildfelder und Views.
Hier wird es ganz gut erklärt:
https://www.optasy.com/blog/how-create-colorbox-image-gallery-drupal-8

Man kann das Feldformat auf jedes Bildfeld anwenden.

Ok
Sagt mir zumindest ungefähr was.
Was mich mehr interessiert halt wie man Bilder halt variabel in der Position im Text einfügt und das halt mit Colorbox.
Bisher sehe ich da nur die Möglichkeit über den Editor wenn es mal funktioniert. Oder gibt es da eine andere Möglichkeit?

Oder macht das kaum einer sondern positioniert das fest übers Theme?
Überhaupt bin ich mit dem https://www.drupal.org/project/file_browser Modul schon auf dem richtigen Weg? Irgendwo stand auf einer Seite das Firmen mehr auf Eigenlösungen setzen.
Kenne halt niemand der mit Drupal arbeitet und da ist es schwer die Richtige beste Lösung zu finden bei all den Modulen usw.

Wie diese Feldformatter dann von der Position gesteuert werden ist mir auch nicht ganz klar.
Ich weiß wohl das man über structure/types/manage/article/display (Manage display ) halt die verschiedenen Felder hat und in der Reihenfolge ändern kann.
Und dann kenne ich halt die Blöcke dessen Position dann wieder im Theme festgelegt wird.

Wahrscheinlich werde ich jetzt schon auf Drupal 8 umsteigen und halt erstmal die Colorbox über den Code im Editor einfügen.
Dann kann ich zumindest wieder Artikel schreiben.
Und bin schon mal die Umstellung auf Drupal 8 los. Weil es wird nicht weniger Aufwand. (Auch so ist die Drupal 7 Version durch die ganzen Module recht langsam im Vergleich zu Drupal 8 (256 mb php RAM mit ssd im Server usw. Also ein sehr guter Server). Ich bin eigentlich ehr begeistert wie gut man viele Sachen in den Core aufgenommen hat. Und wie weit sich Drupal damit entwickelt hat.
Und mit der Zeit kann man ja sicher noch einiges nachrüsten.

Und ich werde mir nochmal die zwei Distributionen die ihr gepostet habt anschauen.
Mit ist es aber lieber die Sache selbst zusammen zusetzen da weiß ich dann genauer was ich an Module einsetze und wofür...

Meine Seite ist eh mehr eine Hobby Seite. Ich schreibe halt über Linux, Wetterstation usw. und halt alles was ich so mit Drupal mache. Bald auch wie gut die Umstellung auf Drupal 8 funktioniert und wo die Probleme liegen. Welche Module ich einsetze wofür usw.
Meinen bei einem alten Artikel über die von mir eingesetzten Module in Drupal 7 hatte ich schon einige Besucher.
https://rothlive.de/de/content/wichtige-und-sehr-gute-drupal-module
Viel mehr hatte ich bisher noch nicht über Drupal geschrieben.

Hi,

wenn die Colorbox sowieso bei jedem Bild eingefügt werden soll,
überschreibe das Field Template für dieses Feld und füge da
die Colorbox Klasse ($classes_array) hinzu.
https://api.drupal.org/api/drupal/modules%21field%21theme%21field.tpl.ph...

MfG

Robert

Es gibt auch andere, meiner Meinung nach bessere Möglichkeiten das umzusetzen.
Der bisherige Ansatz den gesamten Text inklusive Bilder und Videos alles in ein einzelnes Textfeld einzutragen hat einige Nachteile.
Zum einen wird es schnell unübersichtlich wenn ein Artikel mal länger wird- vor allem wenn ein Artikel nochmal bearbeitet wird.
Das Handling vom CKeditor mit Medien ist auch eher so "Naja..."

Es gibt einen Ansatz mit dem "Paragraphs" Modul, das ein paar Probleme löst- das ist der Weg, der auch in der Thunder Distribution verfolgt wird.

Was genau willst du positionieren? Die Bilder in deinem Text? Woran willst du bstimmen wie und wo die positioniert werden?
Das ist ziemlich umständlich über CSS Klassen im Theme zu lösen- wenn nicht gar unmöglich

Die Feldformatter haben mit der Position auch nichts zu tun - sie bestimmen nur, wie ein Feld formatiert und ausgegeben wird.
Blöcke sind ein Weg Elemente der Seite zu positionieren, lassen sich aber im "klassischen" inhaltsbereich einer Seite nicht anwenden.
Deswegen gibt es schon seit langer Zeit die Module Panels und Display Suite um das Problem anzugehen

Warum baust du dir nicht eine VM und installierst dir eine Umgebung darin? Dann musst du nicht alles "live" machen.

Mit meiner eigenen Seite verfolg ich ein ähnliches Ziel und ich bin angetan wie gut es mit Thunder klappt. Es wird auch höchste Zeit meine Erfahrungen runter zu schreiben.

Ich versuche es gerade mal mit XAMPP.
https://www.drupalcenter.de/node/57486
Leider hat es noch nicht funktioniert.

Ohj ja bitte mach das, dass spart dir auf jeden fall Zeit und Nerven. Jetzt beim start und später sowieso. Auf Windows würde ich nur entwickeln, wenn ich später einen IIS-Server verwenden würde. Da du aber sicherlich nginx oder Apache2 verwenden wirst, wenn dein Projekt live geht, dann bitte setz dich 45 Minuten hin und richte dein Linux ein und spar dir den Xampp-Stress

Das Problem ist ich habe das mit Linux noch nie gemacht.
Das heißt ich weiß nicht wie man nginx usw installiert.
Ok das zu probiern ist auch mal richtig sollte ich eh mal machen.
Nur dauert das dann wieder sicher sehr lange.
Braucht man unbedingt nginx ?

Nein, du musst kein Nginx verwenden. Du musst auch kein Linux verwenden.

Wenn du keine Erfahrung in der Betreuung von Linuxsystemen hast solltest du sowieso keinen aus dem Internet erreichbaren Server benutzen. Das führt schnell dazu, dass du eine Spamschleuder mit dicker Leitung hast.
Linuxsysteme sind grundsätzlich schwerer zu übernehmen und verbreiten Viren und Trojaner nicht so rasend wie Windowssysteme, aber mangelnde Erfahrung führt aber doch dazu, dass Lücken ungepatcht, unsichere Konfigurationen aus dem Internet abgeschrieben werden.
Meine 2¢ zu dem Thema...

Wie ich in dem anderen Thread sehe macht dir deine Windowsinstallation mit XAMPP auch keine große Freude- Bei dem Thema muss ich dann allerdings passen ;)

Schau dir aber doch mal einen der vielfältigen Webspaceanbieter an. Damit kannst du ja in einer kleinen Installation starten und wenn du mehr Erfahrung hast auf was eigenes Umsteigen, bspw https://uberspace.de/ o.ä

Ok nein Sicherheit das das nicht einfach ist weiß ich.
Deshalb habe ich ja ein Webhosting Paket.
Nur dort gibt es ja kein SSH.

Ob dann meine Offline Maschiene sicher ist oder nicht ist ja hinterm Router erstmal nicht so wichtig.

Mir geht es im Moment nur darum das ich mir mal ein Demo von lightning anschauen kann.
Und das lässt sich leider nur mit composer installiern.
Jetzt nur zum testen extra einen andern Webspace mieten ist schlecht.

Dann mach das doch Warte ich hab das doch gerade schon in eine Beitrag geschrieben:

https://www.drupalcenter.de/node/57481

Damit funktioniert lightning ganz sicher, ich betreibe miene Entwicklungsumgebung auch so, mit Lightning

Zum ansehen und antesten kannst du https://simplytest.me benutzen

Hatte ich versucht aber dort gab es einen Fehler bei der Installation als ich es getestet habe.
Kann ich aber nochmal prüfen ob es vieleicht wieder funktioniert.

Leider funktioniert es nicht.

Hi,

sorry aber ich verstehe nicht was hier für ein Aufwand betrieben wird um einem Element eine CSS Klasse
hinzuzufügen.
Überschreibe einfach das Twig Field Template für dieses Feld und füge da die Klasse hinzu.

MfG

Robert

Auch wenn Robert grundsätzlich recht hat. Bei dem oben gezeigten Problem kann ich dir helfen.

Drücke F5 und stosse dann den iinstaller noch mal an. Simplytestme hat da gerade einen bug

F5 funktioniert bei mir nicht. Es bleibt bei dem Fehler bei Simplytestme.

Das ist richtig.
Ich wollte mir aber lightning auch mal anschauen.
Um zu sehen was noch alles möglich ist.

Mit der Klasse muss ich mal schauen wo man das wie einfügen muss. Wenn das mal so einfach für mich möglich wäre.

Ja ich hab das jetzt mit fast allen Lightning versionen auf Simplytest.me getestet. Funktioniert nicht. Stimmt. Lösungsansatz

Vitualbox + Linux+ Webserver + php + mysql/mariadb + composer + drush + Lightning Funktioniert garantiert traumhaft.Und genauso wie später auf seiten deines Webhosters.

Ja ich hab das jetzt mit fast allen Lightning versionen auf Simplytest.me getestet. Funktioniert nicht. Stimmt. Lösungsansatz

Vitualbox + Linux+ Webserver + php + mysql/mariadb + composer + drush + Lightning Funktioniert garantiert traumhaft.Und genauso wie später auf seiten deines Webhosters. Vorrausgesetzt, du hat mindestens einen virtuellen server und kannst die Anforderungen von Drupal damit erfüllen, in dem du slebst die notwendigen Pakete installierst.

Ja mit Linux muss ich erst noch weitermachen. Ich hatte nur mich gewundert das jemand sagt es es so leicht mit F5 funktionieren würde.

Mir stellt sich die Frage, warum du Bilder über den CKEditor und nicht via Feld / Paragraph einbindest? Kennst du das Paragraphs-Paket? Dann wären dynamischere Verwendungen möglich und du hast mehr Flexibilität bzgl. der Ausgabe.

Den f5 Bug gibt es momentan bei Drupal Core 8.5 auf simplytest me für Lightning gilt das leider nicht. Wie sieht es mit dem Rwig-template aus, hast du die Blasen dort anhängen können. Paragraphen statt ck-Editor sind devinitiv der Königsweg, auch hier wirst du am Ändern des entsprechenden Templates nicht vorbeikommen, aber das Paragraphs Modul ist definitiv geil.

Ich bin gerade verwirrt. Meiner Meinung nach geht es um die Positionierung der Bilder im Text, oder nicht?

So wie ich es verstanden habe möchte er im CKEditor nur eine CSS Klasse für Colorbox hinzufügen.

Da er das nicht hinbekommen hat, habe ich vorgeschlagen das Field Template für diese Body Feld zu überschreiben.
Hier könnte er den Image Tags vor der Ausgabe die fehlende Klasse hinzufügen.

Gruss Robert

Ja das hab ich verstanden Robert und ich bin ganz bei dir, der Ansatz sollte auch jeden fall funktionieren, ich wollte eigentlich nur wissen, ob er es hin bekommt seinen Twig-Debug-Modus anzuschalten und die richtige Datei zu finden, sonst läuft dein Vorschlag, so gut er auch ist, nämlich ins leere.

Du meinst Drupal in den Debug Modus zu schalten das kann ich.
Den rest versuche ich jetzt dann mal.
Aller Warscheinlichkeit nach werde ich es aber nicht finden.
Ich hatte aber vor kurzem zumindest im css das mit dem Teaser Text gefunden. Ich denke mal das das ähnlich ist.

Also das sieht so aus einmal der Code:

Dann besteht das Theme aus folgenden Daten.
Wo muss ich jetzt suchen ? Bzw. was ändern.

Ich kann auch gerne die Test Installation für euch aufrufbar machen das ihr den Code im Browser sehen könnt.

Ich habe jetzt etwas gesucht nach Informationen aber ich weiß einfach nicht wo und wie ich was im Theme einfügen muss.
Mir würde es reichen wenn ich es direkt im Theme mache ohne Sub Theme.

Das würde ich dir nicht empfehlen. Wenn das Theme ein Update erhält, sind deine Änderungen nämlich weg. Grundsätzlich wpmürde ich dir empfehlen Paragraphs zu verwenden, wie Robert schreibt oder an die Klasse des Bildes im Ck-Editor die Klasse colorbox anzuhängen und zwar über das Theme. Am besten ist, du machst die Testinstallation im Web aufrufbar, dann kann man als ich die entsprechenden Zeilen hier her Kopieren und die Änderungen direkt zeigen.

Das mit dem update ist richtig aber ich habe das Theme wenn es funktionierte eigendlich nie geupdatet. Kann man aber auch als sub theme machen.

https://test.markus-roth.www23.webhosting-account.com/drupal-8.4.3/
Test installation.
Zugriff auf ftp oder login auch ?
Weil das kann ich nicht offen posten.

Paragraphs muss ich mir anschauen aber was ich bis jetzt gesehen habe ist das mehr was für Zeitungstexte.
Weil ich schreibe meist Anleitungen 2 Zeilen Text Bild und sw. das heißt sehr viele Bilder im Text.
Ansonsten hatte ich schon über einen Bild Slider nachgedacht.

Auf der derzeitigen Seite kann man halt den Text lesen aber sieht auf den verkleinerten Bildern ja auch nicht alles und muss halt jedes mal draufklicken.

Wenn du das so beschreibst, solltest du dich aber eher mit responsible Images und Blazy auseinandersetzen, als mit Colorbox. Dir geht es ja offensichtlich darum, die Bilder so gross wie möglich darzustellen. Wenn dass dann nicht ausreicht, dann kannst du die Bilder, die unbedingt eine Colorbox haben müssen immer noch mit einem Link belegen und diesen mit Ememrel=Colorbox ausstatten, damit dies dann geöffnet wird.

Verstehe ich jetzt nicht ganz. Ich kann doch Bilder so groß einstellen wie benötigt in Drupal.
Nur nimmt das dann viel Platz weg so das man lange scrollen muss.

Na ja dass ist schon richtig, aber hast du dir deine Seite schon mal von einem Mobiltelefon aus aungesehen und versucht, die Bilder so einzustellen, dass sie sowohl auf dem Handy und dem Desktop gut aussehen. Und hast du Schon mal deine Webseite auf einem Richtig großen Monitor betrachtet. Ich hab deine Testseite auf dem Handy aufgemacht und dieses Bild kann man auf dem Handy kaum erkennen,

Ich nehme an, du willst Colorbox ja nicht nur einsetzen, weils cool aussieht, sondern, weil du darin eine größere Version deines Bildes anzeigen willst.

Was wäre, wenn dein Bild immer so groß wäre, wie die dem Nutzer zu verfügung stehende Anzeigefläche. Dann hättest du deine Bilder in den Anleitungen und sie wären immer so groß wie die Anzeigefläche. Colorbox macht nämlich auf dem Handy auch niccht wirklich spaß. Darum Responsive Images

https://die-netzialisten.de/allgemein/bilder-fur-responsive-designs-fur-...

Sehr gut weil so weit bin ich da noch nicht gekommen. Hatte nie die Colorbox auf dem Handy geöffnet.

Wie geht man jetzt vor um die Bilder entsprechend in Drupal dazu bekommen ?
Es gibt ja einmal Bildstile in Drupal und einmal Responsive Bildstile.
Das Theme soll ja Responsive sein.

In welcher Größe (Auflösung) sollte dann ein Bild mindestens sein für den Upload ?

Ich habe wenn ich screenshots erstelle ja zb. nur die Auflösung meines monitores.
Ok wenn ich was mit Adobe Illustrator erstelle sieht es wieder anders aus.

Die Bilder auf der Testseite waren nur zum Colorbox test gedacht. Auf die größe usw habe ich da überhaupt nicht drauf geachtet.