Author Topic: Bilder lassen sich im Editor nicht verkleinern  (Read 273 times)

Offline ra-wi

  • Posts: 187
  • Gender: Male
Bilder lassen sich im Editor nicht verkleinern
« on: March 17, 2019, 11:57:37 AM »
Hallo zusammen,
es geht um die Version 2.12.1 unter PHP 7.2.

Ich habe zufällig festgestellt, dass sich eingefügte Bilder im Editor zwar verkleinern lassen, jedoch wird nach dem Speichern der Seite wieder die urspüngliche Größe dargestellt.
In einem anderen Forum wird vorgeschlagen die "config.js" zu ändern (im Verzeichnis module/ckeditor/ckeditor/). Ich finde zwar die Datei, aber der nachstehende zu löschende Code ist dort nicht identisch, bzw. nicht vorhanden.

Code: [Select]
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.dataProcessor.htmlFilter.addRules( {
        elements: {
            $: function (element) {
                // Remove width and height style rules from images
                if (element.name == 'img') {
                    var style = element.attributes.style;
                    if (style) {
                        // Get the width from the style.
                        var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style),
                            width = match && match[1];
                        // Get the height from the style.
                        match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
                        var height = match && match[1];
                        if (width) { element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, ''); }
                        if (height) { element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, ''); }
                    }
                }
                if (!element.attributes.style)
                    delete element.attributes.style;
                return element;
            }
        }
    });
});


Ja klar, man sollte Bilder prinzipiell vorher auf die physikalisch richtige Größe bringen, aber in diesem Fall ist das halt nicht gewünscht.

Somit bitte ich um Hilfe :-)

Gruß
Rainer

Offline jacobi22

  • Posts: 5865
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: Bilder lassen sich im Editor nicht verkleinern
« Reply #1 on: March 17, 2019, 01:05:02 PM »
moin,
die gezeigte Schaltung soll aus einem Quellcode die {width} und {height}-Angaben eines Bildes {img} in eine style-Anweisung unwandeln, soll und darf diese aber nicht verändern.
Ich müßte jetzt nachschauen, meine aber, dieser Code ist für das Image2-Plugin erforderlich, da dieses nur mit styles arbeitet

Welches der Plugins verwendest du für Images? (zur Kontrolle bitte in die include.php des Edotors und ggf in eine wb_ckconfig.js schauen nach extraPlugins und removePlugins und auch unter modules/ckeditor/ckeditor/plugins, welches image-Plugin installiert ist. (in WB standard-mäßig nur image, in WBCE (glaube-bin nicht sicher) nur image2. Beide Systeme könnten aber auch mit dem jeweils anderen Plugin arbeiten, wenn das entsprechend eingestellt wurde. Sie können aber beide nicht zeitgleich mit beiden Plugins arbeiten (image + image2)

Könntest du bitte mal diese Schritte abarbeiten und für jeden Scritt das Ergebnis mitteilen?
1. Das Bild in einer x-beliebigen Seite entsprechend deinen Erfordernissen in Größe und Einstellung anpassen
2. Auf Quellcode umschalten und die entsprechende Stelle kopieren oder Screenshotten
3. Seite Speichern und Punkt 2 wiederholen

Sollte Punkt 3 keinen Unterschied zu Punkt 2 ergeben, bitte mal auf eine Seite ohne Wysiwyg-Editor wechseln und dann wieder zurück. Damit öffnet der editor eine neue Instance.
Wer nicht will, findet Gründe, wer will, findet Wege.

Offline ra-wi

  • Posts: 187
  • Gender: Male
Re: Bilder lassen sich im Editor nicht verkleinern
« Reply #2 on: March 17, 2019, 03:28:25 PM »
Hallo und danke schon mal,

es handelt sich um eine normale WB Standard Installation. Mit den Angaben des Plugins Image2 bin ich etwas überfordert. Wie ja schon erwähnt stammt der zu entfernende Code aus einem WBCE Forum und stimmt nicht mit meinem Code überein.

Hier mal der Code in meiner Installation:
Code: [Select]
/**
 * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */

CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config

// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];

// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';

// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';

// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
};


Und hier die Schritte 1 bis 3:
1. Ein Bild in der Originalgröße 768 x  982 Pixel eingefügt
<img alt="" class="img-responsive" height="982" src="https://hundepension-duwensee.de/media/K1024_Arno_und_Christine_Duwensee.JPG" style="" width="768" />

2. Dann auf 200 x 256 Pixel verkleinert
<img alt="weewe" class="img-responsive" height="256" src="https://hundepension-duwensee.de/media/K1024_Arno_und_Christine_Duwensee.JPG" style="" width="200" />

3. Seite gespeichert  und Punkt 2 wiederholt. Keine Änderung. Das Bild wird wieder in der ursprünglichen Größe angezeigt.
Obwohl der Code lautet: <img alt="weewe" class="img-responsive" height="256" src="https://hundepension-duwensee.de/media/K1024_Arno_und_Christine_Duwensee.JPG" style="" width="200" />

Sitzt der Knackpunkt im "class="img-responsive" ?
Ich habe gelesen, wenn die Verkleinerung von Bildern zugelassen wird, dann ist diesbezüglich keine responsives Design mehr möglich, zumindest was die  betreffenden Bilder betrifft.

Offline jacobi22

  • Posts: 5865
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: Bilder lassen sich im Editor nicht verkleinern
« Reply #3 on: March 17, 2019, 03:35:15 PM »
Quote
Sitzt der Knackpunkt im "class="img-responsive" ?
Ich habe gelesen, wenn die Verkleinerung von Bildern zugelassen wird, dann ist diesbezüglich keine responsives Design mehr möglich, zumindest was die  betreffenden Bilder betrifft

kommt drauf an, wie diese definiert wurde.
In der Praxis meist mit style ="width:100%;height:auto"
das würde natürlich die Angabe aus dem Code übertoppen

die Idee dahinter ist, das sich durch das responsive Verhalten ja die Boxen drum herum anpassen, also ein DIV, ein Table usw
Wer nicht will, findet Gründe, wer will, findet Wege.

Offline jacobi22

  • Posts: 5865
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: Bilder lassen sich im Editor nicht verkleinern
« Reply #4 on: March 17, 2019, 03:59:10 PM »
hab mir das auf deiner Seite mal angeschaut

template.css // Zeile 37
Code: [Select]
.maincontent img {
    border: 2px solid #FFFFFF;
    box-shadow: 0px 3px 4px 0px #939393;
    max-width: 100%;
}

und
template.css // Zeile 163
Code: [Select]
img {
    height: auto;
    max-width: 100%;
    width: auto;
}

sowie editor.css  // Zeile 19
Code: [Select]
img {
    height: auto;
    max-width: 100%;
    width: auto;
}


insbesondere die letzten beiden allgemeinen Definitionen ziehen jedes Bild im Back- oder Frontend auf seine 100% der Breite des Originalbildes.
Es wäre zu probieren, ob der im Eingangsthread gepostete Tip da analog funktioniert
der obige Code vom Eingangspost ist sinngemäß in der Datei /modules/ckeditor/wb_config/wb_ckconfig.js schon enthalten
Zeilen 380 - 412

Code: [Select]
$: function (element) {
                // Output dimensions of images as width and height
                if (element.name == 'img') {
                    var style = element.attributes.style;
                    if (style) {
                        // Get the width from the style.
                        var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style),
                            width = match && match[1];

                        // Get the height from the style.
                        match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
                        var height = match && match[1];

                        if (width) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
                            element.attributes.width = width;
                        }

                        if (height) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
                            element.attributes.height = height;
                        }
                    }
                }
/**
 *
//console.log( width );
                if (!element.attributes.style)
                    delete element.attributes.style;
 */

                return element;
            }

Du kannst, wenn nicht schon vorhanden, diese Datei vom angegebenen Platz in dein Template kopieren und dort die eben gezeigten Zeilen auskommentieren, in dem du sie in /* am Beginn und */ nach dem Ende einschließt
Anschließend Browsercache löschen
Wer nicht will, findet Gründe, wer will, findet Wege.

Offline ra-wi

  • Posts: 187
  • Gender: Male
Re: Bilder lassen sich im Editor nicht verkleinern
« Reply #5 on: March 17, 2019, 04:36:08 PM »
Vielen Dank jacobi22,
es funktioniert nun, d.h. die Bilder können verkleinert werden und behalten die Größe auch nach dem Speichern.
Jetzt muss ich den Leuten nur noch beibringen, dass die verkleinerten Bilder nicht mehr responsiv sind. Aber damit kann man dann je nach Bildgröße wohl leben :-)

Vielen Dank noch einmal für die schnelle (am Sonntag) und sehr kompetente Hilfe  :-) (Y)

LG
Rainer

Offline jacobi22

  • Posts: 5865
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: Bilder lassen sich im Editor nicht verkleinern
« Reply #6 on: March 17, 2019, 05:48:01 PM »
Was hast du jetzt gemacht? Den Code auskommentiert oder das CSS geändert?
Wer nicht will, findet Gründe, wer will, findet Wege.

Offline ra-wi

  • Posts: 187
  • Gender: Male
Re: Bilder lassen sich im Editor nicht verkleinern
« Reply #7 on: March 18, 2019, 08:58:07 AM »
Auskommentieren erschien mir die einfachste Lösung.
Danke nochmal....