Tiny Editor - Bild einfügen mit Lightbox

Ideen für neue Funktionen in CONTENIDO?
prepress89
Beiträge: 91
Registriert: Mi 8. Jul 2009, 09:18
Kontaktdaten:

Tiny Editor - Bild einfügen mit Lightbox

Beitrag von prepress89 » Do 20. Sep 2012, 16:26

Hallo Leute,

ich habe in letzter Zeit unter anderem auch viel mit Joomla gearbeitet. Hier ist im Editor etwas standardmäßig integriert das mir bei Contenido doch sehr fehlt:

>> Die "Lightbox" direkt aus dem Editor !

Früher gab es beim "Bild einfügen"-Dialog den Reiter "PopUps" - dieser ist in der aktuellen 4.8.15 nicht mehr mit dabei. Ist ja auch veraltet.. aber warum anstatt normalen Popups nicht ein schlankes Lightbox-Skript einbauen?
Also Eingabemaske stelle ich mir das ähnlich Joomla vor - da ist es ganz gut gelöst:

- URL (zum großen Bild)
- Bildtitel
- Bildunterschrift
- Gruppenname (selber Name = selbe Gruppe zum Bilder Durchklicken in der offenen Lightbox)
- evtl Größen angabe (kein Muss!)
- ...

Das wäre ein sehr nettes Feature und dürfte eigentlich ja nicht so schwer zu realisieren sein?

Oder gibts schon ein Plugin mit dem dies möglich wäre? Ich meinte nicht die xtcSlimbox - die ist klasse für Bildergalerien, aber nicht für Inline-Bilder in Artikeln.

Gruß Alex

Spider IT
Beiträge: 1416
Registriert: Fr 3. Dez 2004, 10:15

Re: Tiny Editor - Bild einfügen mit Lightbox

Beitrag von Spider IT » Do 20. Sep 2012, 18:41

Hallo Alex,

ich habe das mit Javascript und HTML-Code direkt im Layout gelöst.
Dafür braucht man im Editor nichts berücksichtigen, nur beim Bilder hochladen das kleine in ein Verzeichnis /.../klein/ und das große parallel dazu mit gleichem Namen in ein Verzeichnis /.../gross/ ablegen.
Das Javascript am Ende des Layouts erkennt das /klein/ im Pfad und verlinkt das Bild dan mit eine Javascript-Funktion zum Aufmachen des Lightbox-ähnlichen Fensters mit als Parameter der Pfad mit /gross/ statt /klein/.
Javascript für den head-Bereich:

Code: Alles auswählen

<script type="text/javascript">
//<![CDATA[
    function showImagePopup(source) {
        if (source.length) {
            document.getElementById('ImageArea').innerHTML = '<'+'img src="' + source + '" alt="" />';
            document.getElementById('DarkBackground').style.display = 'block';
            document.getElementById('ImageWindow').style.display = 'block';
        }
    }
    function closeImagePopup() {
        document.getElementById('ImageWindow').style.display = 'none';
        document.getElementById('DarkBackground').style.display = 'none';
        document.getElementById('ImageArea').innerHTML = '';
    }
//]]>
</script>
HTML-Code (am besten gleich am Anfang des body-Bereichs):

Code: Alles auswählen

    <div id="DarkBackground" onclick="closeImagePopup();" style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 200; display: none; background-color: #000; opacity: 0.6;"></div>
    <div id="ImageWindow" onclick="closeImagePopup();" style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 210; display: none; font-family: Arial, Verdana, sans-serif;">
        <table border="0" cellspacing="0" cellpadding="0" style="width: 100%; height: 100%;">
            <tr valign="middle">
                <td align="center" style="background-color: transparent;">
                    <div onclick="closeImagePopup();" style="display: inline-block; border: 8px solid #FFF; border-bottom-width: 3px;">
                        <div onclick="closeImagePopup();" style="background-color: #fff;">
                            <div onclick="closeImagePopup();" id="ImageArea"></div>
                            <div onclick="closeImagePopup();" style="padding-top: 6px; text-align: right;">
                                <img src="images/PopupSchliessen.png" alt="Schlie&szlig;en" onclick="closeImagePopup();" style="cursor: pointer;" />
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
Javascript für das Ende des body-Bereichs:

Code: Alles auswählen

<script type="text/javascript">
//<![CDATA[
    function AutoLinkPopupImages() {
        var cnt, p1, p2, p3, p4, link;
        
        cnt = document.body.innerHTML;
        p1 = cnt.indexOf('<'+'img ');
        while (p1 > -1) {
            p2 = (cnt.indexOf('>', p1) + 1);
            p3 = (cnt.indexOf('src="', p1) + 5);
            p4 = cnt.indexOf('"', p3);
            link = cnt.substring(p3, p4);
            if (link.indexOf('/klein/') > -1) {
                cnt = cnt.substring(0, p1) + '<'+'a href="javascript:showImagePopup(\'' + link.replace(/\/klein\//g, '/gross/') + '\');">' + cnt.substring(p1, p2) + '<'+'/a>' + cnt.substring(p2);
                p2 += (45 + link.length);
            }
            p1 = cnt.indexOf('<'+'img ', p2);
        }
        document.body.innerHTML = cnt;
    }
    AutoLinkPopupImages();
//]]>
</script>
Der 2. Javascript-Block muss unbedingt am Ende des Body-Bereichs stehen (direkt vor </body>), damit der Code ausgeführt wird BEVOR die Seite zuende geladen ist, aber NACHDEM der Content geladen wurde.
Dies verhindert Inkompatibilitäten mit Scripte, die nach dem Laden der Seite losgehen (z.B. das der Lightbox-Galery), da dieses Script dann schon vorher den Content umgestellt hat.

In Aktion sehen kannst du das hier (die Bilder bei den Farbangaben).

Gruß
René

prepress89
Beiträge: 91
Registriert: Mi 8. Jul 2009, 09:18
Kontaktdaten:

Re: Tiny Editor - Bild einfügen mit Lightbox

Beitrag von prepress89 » Di 25. Sep 2012, 09:36

Super. Damit kann ich erst mal arbeiten :) Nur noch eine Frage: Wie muss ich (vermutlich den letzten Codeschnipsel) abändern, wenn ich die Ordner "gross" und "klein" in einem Unterordner, z. B. namens "Popup", packe? Die ganzen Slashes und Backslashes irritieren mich :D

Trotzdem wäre eine direkte Implementierung in Contenido ein tolles Feature. Wie gesagt, früher ging es mit normalen Popup-Fenstern - diese Funktion müsste man ja nur um die Lightbox erweitern. Ich denke dies würde viele Leute freuen.

Außerdem wäre, abgesehen von der Lightbox, eine automatische Thumbnailerstellung beim Upload der Bilder sehr hilfreich für Leute, die sich damit nicht so gut auskennen (ich denke hier nicht an mich sondern eher an meine Kunden, die es selbst Pflegen möchten). Auch hier verweiße ich auf Joomla. Beim Upload der Bilder zeigt es ein Dialog an bei dem man bei Thumbnails ein Haken setzen kann - dann inkl. Größenangabe. Dann wird automatisch in dem Ordner, in dem das Bild liegt, ein Unterordner namens "thumbnails" erstellt.

Nur als Anregung - wäre sicher für einige Leute sehr hilfreich und ich kann mich nicht vorstellen, dass das sehr Aufwendig wäre zu implementieren.

Gruß Alex

Spider IT
Beiträge: 1416
Registriert: Fr 3. Dez 2004, 10:15

Re: Tiny Editor - Bild einfügen mit Lightbox

Beitrag von Spider IT » Di 25. Sep 2012, 10:12

prepress89 hat geschrieben:Super. Damit kann ich erst mal arbeiten :) Nur noch eine Frage: Wie muss ich (vermutlich den letzten Codeschnipsel) abändern, wenn ich die Ordner "gross" und "klein" in einem Unterordner, z. B. namens "Popup", packe? Die ganzen Slashes und Backslashes irritieren mich :D
Die Pfade sind absolut frei wählbar, es müssen nur ein Ordner "gross" und ein Ordner "klein" neben einander liegen.
Beispiel: /upload/Bilder/Popups/klein/ und /upload/Bilder/Popups/gross/
Oder: /upload/Artikelbilder/Produktbilder/Holzapplikationen/klein/ und /upload/Artikelbilder/Produktbilder/Holzapplikationen/gross/
(/upload ist der in Contenido vorhandene Ordner für den Upload-Bereich des Dateimanagers).
prepress89 hat geschrieben:Trotzdem wäre eine direkte Implementierung in Contenido ein tolles Feature. Wie gesagt, früher ging es mit normalen Popup-Fenstern - diese Funktion müsste man ja nur um die Lightbox erweitern. Ich denke dies würde viele Leute freuen.
Wie du in meinem Code sehen kannst, bedeutet eine Lightbox-ähnliche Funktionalität einiges an JavaScript (der Codeblock für den Head-Bereich) und HTML-Code.
Dies automatisch einfügen zu lassen wäre mit Schwierigkeiten verbunden (darf z.B. auch bei mehrere Bilder nur einmal vorkommen, darf nicht in dem Bereich liegen, in dem der Editor seinen Code ablegt usw).
prepress89 hat geschrieben:Außerdem wäre, abgesehen von der Lightbox, eine automatische Thumbnailerstellung beim Upload der Bilder sehr hilfreich für Leute, die sich damit nicht so gut auskennen (ich denke hier nicht an mich sondern eher an meine Kunden, die es selbst Pflegen möchten). Auch hier verweiße ich auf Joomla. Beim Upload der Bilder zeigt es ein Dialog an bei dem man bei Thumbnails ein Haken setzen kann - dann inkl. Größenangabe. Dann wird automatisch in dem Ordner, in dem das Bild liegt, ein Unterordner namens "thumbnails" erstellt.
Thumbnails werden (wenn man von deinem Vorschlag und meiner Lösung oben absieht) nur für Bildergalerien benutzt, welche diese selbst generieren.
Auch ich habe mir des öfteren Gedanken zu dem Thema gemacht, dann aber den Vergleich zu xtcModified und anderen XT:Commerce-Ablegern, welchen sämtliche Bildgrößen bereits beim Upload generieren, angestellt und gesehen, dass dieses Verhalten zu Probleme führt, wenn man nachträglich die Abmessungen abändert (bei diese Systeme müssen die Bilder dann erneut hochgeladen werden um sie in den richtigen Größen zu haben).
Bei Contenido werden lediglich die Originalbilder abgelegt und die Thumbs nach Bedarf generiert, wodurch bei eine Umstellung der Thumbgröße diese automatisch neu generiert werden.

Um für Kunden das Hochladen von Bilder für die Lightbox-Gallery oder Javascript-Slideshow zu erleichtern habe ich das Modul Bilderverwaltung entwickelt.

Gruß
René

prepress89
Beiträge: 91
Registriert: Mi 8. Jul 2009, 09:18
Kontaktdaten:

Re: Tiny Editor - Bild einfügen mit Lightbox

Beitrag von prepress89 » Di 25. Sep 2012, 16:32

Vielen Dank für die schnelle Antwort! :)

Das der Pfad bei deinem Lightbox-Skript frei wählbar ist, habe ich mir schon gedacht. Ich habe nur nach der stelle im Code gesucht wo man diesen Pfad ändern kann. Ich finde nichts dass mit "upload" anfängt!?
Wird der Pfad OHNE "upload" hier angegeben?

Code: Alles auswählen

 if (link.indexOf('/klein/') > -1) {
Das Bildverwaltungs-Modul von dir kannte ich noch nicht - werd ich mal testen. Hört sich aber gut an. :)

Trotzdem fände ich gut wenn man zumindest Global in den Mandanteneinstellungen eine max-Größe für Bilder setzen könnte. Ich hatte schon oft das Problem, dass die Kunden einfach die Bilder von der Digicam hochspielen (2MB aufwärts). So das diese dann maximal mit z.b. 1280x720 abgespeichert werden - und nicht in Originalgröße. Natürlich nur wenn diese Bilder größer sind.

Spider IT
Beiträge: 1416
Registriert: Fr 3. Dez 2004, 10:15

Re: Tiny Editor - Bild einfügen mit Lightbox

Beitrag von Spider IT » Di 25. Sep 2012, 16:39

Du musst einfach nur in der Dateiverwaltung (diese fängt in /upload an) deine Ordner anlegen und darin die Bilder, dann kannst du im TinyMCE ein Bild einfügen und es funktioniert.
Dafür muss kein Script angepasst werden, das ist schon alles darauf angelegt.
Das Script nimmt den Pfad vom Bild und ersetzt darin /klein/ durch /gross/ für den Link.
Du kannst es also so übernehmen und eine beliebige Ordnerstruktur auch mit mehrere Ordner "klein" und "gross" verwenden, nur müssen die zusammen gehörenden Ordner "klein" und "gross" immer parallel zueinander liegen und die Bilder dann paarweise den gleichen Dateinamen haben.

Gruß
René

prepress89
Beiträge: 91
Registriert: Mi 8. Jul 2009, 09:18
Kontaktdaten:

Re: Tiny Editor - Bild einfügen mit Lightbox

Beitrag von prepress89 » Mi 26. Sep 2012, 14:20

Das ist ja geschickt! Vielen Dank :) Ich hab schon wieder viel umständlicher gedacht... :D

Danke!!

mfweb
Beiträge: 270
Registriert: Mo 12. Sep 2005, 18:31
Kontaktdaten:

Re: Tiny Editor - Bild einfügen mit Lightbox

Beitrag von mfweb » So 14. Okt 2012, 12:29

Es ist zwar schon etwas her, aber hier noch eine andere Lösung: Wenn es nur um eine flexible und automatische Größenanpassung geht, hilft vielleicht auch das Modul AtqImageResizeHTML, dass seinerzeits entwickelt wurde.

Man lädt die Bilder einach in einer "beliebigen" Größe hoch und fügt sie via TinyMCE ein. Dabei gibt man die gewünschte Größe im Dialog-Fenster ein. Falls das Bild dann verkleinert werden müsste, übernimmt das das Modul beim Seitenaufruf automatisch und speichert die verkleinerte Version im Cache von Contenido. Gleichzeitig wird das Bild in der Website verlinkt, um eine größere (die original-Version?) anzuzeigen.

Ich hoffe mal, dass das Modul auch noch mit der aktuellen Contenido-Version funktioniert. :-)
Immer mal ein Blick wert: Contenido Wiki ... auch schreibender Zugriff ist erlaubt!

farina
Beiträge: 259
Registriert: Fr 24. Okt 2003, 13:16
Wohnort: Düren
Kontaktdaten:

Re: Tiny Editor - Bild einfügen mit Lightbox

Beitrag von farina » Mi 30. Jan 2013, 17:44

Super und wäre genau das Richtige für meinen Bedarf.
Aber leider klappt es nicht im IE. Ich habe es gerade in IE 6-8 getestet. den IE9 habe ich nicht.
Ich finde, den IE kann man nicht ignorieren.
Hat jemand eine Idee, wie man es im IE zum Laufen bringt?
Gruß farina

Spider IT
Beiträge: 1416
Registriert: Fr 3. Dez 2004, 10:15

Re: Tiny Editor - Bild einfügen mit Lightbox

Beitrag von Spider IT » Mi 30. Jan 2013, 20:18

Hallo Farina,
farina hat geschrieben:Super und wäre genau das Richtige für meinen Bedarf.
Aber leider klappt es nicht im IE. Ich habe es gerade in IE 6-8 getestet. den IE9 habe ich nicht.
Und was genau?

Gruß
René

farina
Beiträge: 259
Registriert: Fr 24. Okt 2003, 13:16
Wohnort: Düren
Kontaktdaten:

Re: Tiny Editor - Bild einfügen mit Lightbox

Beitrag von farina » Do 31. Jan 2013, 13:59

ach so, entschuldige.
Es erscheint auf deiner Beispielseite kein Link, wenn man das Bild anklicken möchte.
LG

Spider IT
Beiträge: 1416
Registriert: Fr 3. Dez 2004, 10:15

Re: Tiny Editor - Bild einfügen mit Lightbox

Beitrag von Spider IT » Do 31. Jan 2013, 15:23

Ich gehe mal davon aus, dass du die Demoseite zum Modul "Bilderverwaltung" meinst.
Dieses Modul dient der VERWALTUNG der Bilder, nicht der Anzeige als Galerie (geschweige denn Lightbox).
Dafür braucht man ein separates Modul, welches sinnvollerweise auch in einen anderen Artikel untergebracht ist, denn an die Bilderverwaltung soll niemand fremdes ran.

@Moderatoren: Bitte entfernt den Beitrag von Laicaz (30.10.2012 14:32), der Link im Zitatblock zeigt auf camfreundin.com (ist also SPAM).
Eventuell sollten alle Beiträge dieses Users überprüft werden.

Gruß
René

farina
Beiträge: 259
Registriert: Fr 24. Okt 2003, 13:16
Wohnort: Düren
Kontaktdaten:

Re: Tiny Editor - Bild einfügen mit Lightbox

Beitrag von farina » Do 31. Jan 2013, 15:47


Spider IT
Beiträge: 1416
Registriert: Fr 3. Dez 2004, 10:15

Re: Tiny Editor - Bild einfügen mit Lightbox

Beitrag von Spider IT » Do 31. Jan 2013, 19:42

Das große Bild ist nicht verlinkt, dafür aber das Detailbild und die Farbbilder.

Gruß
René

farina
Beiträge: 259
Registriert: Fr 24. Okt 2003, 13:16
Wohnort: Düren
Kontaktdaten:

Re: Tiny Editor - Bild einfügen mit Lightbox

Beitrag von farina » Do 31. Jan 2013, 19:53

ja, weiß ich.
Im firefox klappt es ja auch, aber nicht im IE.
lg

Gesperrt