Bild mit Link und rel-lightbox im tinyMCE

[derRenner]

Hallo,

gibt es eine schönere Lösung für mein Vorhaben?
Im tinyMCE füge ich ein Bild über 'Bild einfügen' in den Textfluss ein - ab und an muss das bei Nachrichten so sein, dass das eine oder andere Bild im (Fliess)Text steht.
Das eingefügt Bild sollte aber über Klick in der Lightbox geöffnet werden - aktuell löse ich das über den Insert tag

{{image::dxxxxxxxxxxxxxxxxxxxxxxxxxx0?width=150[&]rel=lightbox}}

Aber ist das auch schöner lösbar? Ich meine, so wie wenn ich einen Link über einen Text einfüge ...

[Andreas]

Suche mal nach dem tinymce pluginloader für contao auf github, ob da ein plugin dafür vorhanden ist. Ansonsten kannst du den Selektor für die suche nach Lightbox-Links ändern - https://github.com/contao/core/blob/...rbox.html5#L12

$('a[data-lightbox], .my-lightbox-link').map(function() { 

Dann reicht es, wenn du dem Link diese Klasse gibst. Aber du brauchst dann natürlich immer noch ein verlinktes kleines Bild mit dem Linkziel auf das große Bild.

[derRenner]

Den [TinyMcePluginLoader] und [TinyMceLinkLightbox] habe ich bereits drinnen - das funktioniert ja auch ... aber eben nur für Verlinkungen auf Text.
Gleiches über ein Bild zu „stülpen“ - das wäre hier mein Ziel.

[Andreas]

Gleiches über ein Bild zu „stülpen“ - das wäre hier mein Ziel.

Das geht bei mir. Bild einfügen, Größe einstellen. Bild markieren und verlinken auf original Bild.

[derRenner]

*freu* wieder was dazu gelernt
Ja, klappt - was mir bis jetzt nicht bewusst war: dass man auch Einzeldateien auswählen kann ...

[matuweb]

Ich greife das Thema einmal auf da ich auch die Lightbox im Tiny nutzen möchte (Contao 3.5.6).

[TinyMcePluginLoader] und [TinyMceLinkLightbox] habe ich manuell in den Ordner "system/modules" kopiert, ein Datenbankupdate gemacht, den Cache geleert aber ich kann die neue Funktion nicht sehen.

Was habe ich falsch gemacht?

[Andreas]

Halte in der Konsole mal Ausschau nach JS-Fehlern.

Hast du eine angepasste tinyCustom?

Erwartest du das Feature evtl. an einer falschen Stelle?

Mach auch unbedingt mal ein Update auf 3.5.24.

[matuweb]

Danke für die Hinweise.

Die Konsole zeigt keine Fehler an und ich habe keine tinyCustom.
Da einige Module für die neuste Contao-Version u.a. "TAGS" noch nicht freigegegeb sind, warte ich noch mit dem Update.

Also ich möchte bei den Nachrichten im Textfeld ein Bild einfügen mit Lightboxfunktion, Bildunterschrift anzeigen und Abstand zum Text eingeben können...

Dies ist elementar wichtig für das bald erscheinende Newsportal. Früher war es ja in Contao integriert...

[Andreas]

Wenn sich nur die letzte Ziffer ändert, sollten die Erweiterungen weiterhin funktionieren - 3.5.6 => 3.5.24.

Bei mir funktioniert dies auch im Feld Teasertext in den Nachrichten, falls du dieses Feld meinst. Auch mit einer tinyCustom.

Eine Bildunterschrift - figcaption innerhalb eines figure- wird dir der Tiny wohl nicht erstellen können.

Individuelle Abstandsangaben in Inhaltselementen oder anderen Datensätzen sind keine gute Idee. So bekommst du kein einheitliches Layout zustande oder die Möglichkeit diese Werte irgendwann mal wieder effizient zu korrigieren bzw. zu vereinheitlichen. IMHO steht das Feld Bildabstand auch auf der Abschussliste, aus dem gleichen Grund.

Wieso reicht dir die Option Ein Bild hinzufügen nicht aus? Du könntest auch noch ein zweites Bild hinzufügen aufsetzen, oder dieses Feld auf eine Multiple-Auswahl einstellen.

Aber die Frage, warum du bei Link einfügen/bearbeiten das Dropdown-Menü Rel nicht siehst bleibt erstmal weiterhin ungeklärt.

[Andreas]

Wenn es überhaupt nicht funktionieren will, kannst du die Lightbox auch über eine CSS-Klasse aufsetzen.

Normal:
<a href="ziel" data-lightbox="">open LB</a>
Anders:
<a href="ziel" class="lightbox">open LB</a>

Default sucht die Colorbox nach Links mit einem Attribut data-lightbox https://github.com/contao/core/blob/...rbox.html5#L12. Was du über eine kleine Templateanpassung auch auf Links mit der Klasse lightbox erweitern kannst.

// default
$('a[data-lightbox]').map(function() {
// neu
$('a[data-lightbox], a.lightbox').map(function() { 

[derRenner]

Wieso reicht dir die Option Ein Bild hinzufügen nicht aus? Du könntest auch noch ein zweites Bild hinzufügen aufsetzen, oder dieses Feld auf eine Multiple-Auswahl einstellen.

??? jetzt machst du mich neugierig ^^
Wie bzw. wo kann ich dahin gehend etwas einstellen?

[Andreas]

So, wie du für jede Tabelle Felder hinzufügen kannst. Über die $GLOBALS['TL_DCA']. In diesem Fall für die Tabelle tl_news.

[matuweb]

Danke für die Antworten.

Es geht darum, dass die Redaktion der Website weitere Fotos im Inhaltselement "Text" in den Nachrichten hinzufügen muss.
Also es wird ein längerer Fließtext im Textelement/Tiny eingefügt und dort sollen dann max. 2-3 Fotos integriert werden (über Icon "Bild hinzufügen").
Diese Fotos sollen dann auch vergrößert werden können und dann soll in der Lightbox dieBildunterschrift stehen. Im idealfall sollte die Bildunterschrift auch schon in der Voransicht im Fließtext zu lesen sein.

Gibt es noch einen anderen Ansatzpunkt um dies so umzusetzen?

Gibt es vielleicht auch die Möglichkeit die normale "Ein Bild hinzufügen"-Funktion zu duplizieren? Evtl. einfach ein Plus-Icon unter diese Funktion und dann beliebig Bilder hinzufügen.
Und diese dann z.B. untereinander per CSS anzuordnen?

Grüße
Matu

[tab]

Man kann ja auch mehrere Textelemente in einer Nachricht haben...

[Andreas]

Also betrifft es nicht speziell die News, sondern die Inhaltselemente - hier das CE Typ Text.

Es gibt vieles, was du machen kannst. Aber der Verlinkung das Attribut data-lightbox hinzufügen zu können sollte mit der Erweiterung erstmal funktionieren. Wenn du das Bild eingefügt hast, es dann mit der Maus aktivierst und dann auf "Link einfügen/bearbeiten" klickst, dann hast du wirklich nicht das Rel-Dropdown? Screen-2017-02-03_12-04-23.png

Die Colorbox scheint die Anzeige des Bildtextes aus dem TITLE des Links zu nehmen. Wenn du den Titel bereits im Bild hast, könntest du ihn mit JS in den TITLE des Links kopieren. So könntest du auch direkt eine Bildunterschrift unter das Bild legen.

Ich würde da nicht mit langen Texten arbeiten, sondern den Text gliedern und wenn ein Bild benötigt wird ein neues Element Text erstellen.

Ich würde da nicht so kompliziert dieses Element aufbohren. Wenn du es aber aufbohrst, z.B. als Multi-Source, so wie bei Galerien, dann könntest du im Text mit Platzhaltern arbeiten, welche du dann mit den ausgewählten Bildern im Template ersetzt.

Hier *1* kommt Bild 1 hin.

[Andreas]

Gibt es vielleicht auch die Möglichkeit die normale "Ein Bild hinzufügen"-Funktion zu duplizieren? Evtl. einfach ein Plus-Icon unter diese Funktion und dann beliebig Bilder hinzufügen.
Und diese dann z.B. untereinander per CSS anzuordnen?

Duplizieren ja - lohnt sich aber IHMO nicht. Da du dann zB auch das Template anpassen müsstest.

Plus-Icon nein, bzw. viel zu viel Aufwand.

Wenn du die Bilder zum Text sowieso untereinander anordnen möchtest, dann kannst du unter|über dem Text-Element auch ein Galerie-Element erstellen.

[matuweb]

Wenn du das Bild eingefügt hast, es dann mit der Maus aktivierst und dann auf "Link einfügen/bearbeiten" klickst, dann hast du wirklich nicht das Rel-Dropdown?

Doch dieses Menü kommt, so soll es aber nicht gelöst werden. Dort müsste ich ja das Bild noch einmal in der Dateiverwaltung auswählen damit es in der Lightbox angezeigt wird. Also doppelte Arbeit...
Es soll einfach jedes Bild, welches über das Textelement im Text eingefügt wird, via lightbox geöffnet werden. Und dort dann auch die entsprechende BU angezeigt werden.

Mit der Tiny-Erweiterung soll dies ja auch im Tiny-Menü "Bild einfügen" eingebaut werden. Dies scheint bei mir aber nicht zu greifen...

[matuweb]

Ich nehme es zurück, die Funktionen mit den Tiny-Extensions bzw. Zusatzmodulen funktioniert.

Aber trotzdem sollen die Fotos immer in der Lightbox geöffnet werden. Wie kann ich dies als Standard einbauen?

[Andreas]

Fotos werden nie in der Lightbox geöffnet, es wird immer das in der LB geöffnet, was im HREF des Links steht.

Welche Tiny-Erweiterung soll das sein, dass du ein Bild auswählst, und automatisch ein Vorschaubild und ein Link zum Original erstellt wird?

Wie die Lightbox nach Links sucht, deren HREF in der LB geöffnet werden soll hatte ich oben gezeigt.

Ich empfehle dir dich davon zu lösen in den RTE solche komplexen Sachen einfügen zu wollen.

[matuweb]

test.jpg

So konnte es bisher immer eingefügt werden (Contao 2.10). Das Icon Tiny-Icon heißt "Vorschaubild einfügen".
Dies suche ich die ganze Zeit bzw. möchte es wieder in Contao 3.5 benutzen...

[Andreas]

Ob das jemand als Erweiterung aufgesetzt hat weiß ich nicht. Aber da musst du doch auch das Ziel angeben, also was in der LB geöffnet werden soll. Oder wurde dort automatisch das Original aus "Bilderliste" eingefügt?

[Shania]

Ich habe das gleiche Problem. In 2.9 war das im Standard enthalten, das war keine Erweiterung.

Man hat das Originalbild mit einem Select aus der "Bilderliste" dem Filesverzeichnis gewählt und die Größe des Vorschaubildes in dem Feld "Breite/Höhe" angegeben.

Für alle normalen Seiten, werde ich die Bilder nun nicht mehr auf diese Weise einfügen. Das waren ohnehin nur wenige Seiten und lässt sich auch problemlos wieder ändern, aber in den MM komme ich nicht ohne diese Funktion aus. Da kann ich zwar Bilderfelder anlegen, aber ich habe nicht immer feste Plätze für Bilder und Texte.

Bisher hatten wir sie auch in den News so benutzt, was ja nun nicht mehr nötig ist. Das ist aber schon eine Umgewöhnung für die Redakteure und für die komplette Seite löst es mein Problem auch nicht.

So gesehen, wäre ich auch an einer einfachen Variante über den Editor interessiert, die wie vorher funktioniert.

[Andreas]

Wenn es keine Erweiterung dafür gibt, kann man das auch über eine Templateanpassung regeln. Bild einfügen und den Rest dann im Template erledigen. Die kleinen Bilder kann man mit \Image::get() erstellen. https://github.com/contao/core/blob/...Image.php#L952