Force responsive images by default

[Dieter Van Uytvanck]

Right now editors have to add class="img-responsive" to img tags to enable responsive scaling. This should be the default.

[Dieter Van Uytvanck]

I would see 3 options:

• configure it as default for img tags in CKeditor (​details - probably most flexible and transparent)
• arrange this via CSS
• configure it as default with a filter (​tried this but does not seem to work also not ideal because opaque to end user what is happening)

To be discussed what is the best solution here.

[Dieter Van Uytvanck]

I discussed it with André and Twan and we agree that the CKeditor approach would be the preferred one.

[Dieter Van Uytvanck]

The same should go for tables (class="table-responsive")

[mail@hendrikschmeer.de]

that many of the tutorials available seem to be valid for specific versions only. I tried various approaches: most of the instructions didn't work at all, some resulted in funny errors, maybe also related to bugs of the editor library itself, as indicated in some articles.
​https://stackoverflow.com/questions/1794219/ckeditor-instance-already-exists
Thus, I'd prepare myself with the following questions and ideas for my next upcoming session:

# Is an upgrade to the most recent editor version viable?

# I am going to try setting up the editor and customizations in a simple and less complex environment, before applying the approach to the Drupal app.

# I'll try setting up the editor without using a CDN. This is currently the case and requires re-instantiation of the editor (the first source of problems in those tutorials), to read in additional config files.
Would loading the editor locally be considerable?

[mail@hendrikschmeer.de]

Tested approaches that did not work:

# Upgrading to Ckeditor 5 is depreciated for incompatibility reasons.
The docs warn for data loss situations and recommend, to use Ckeditor 4 for content generated before the migration.
Furthermore, the Ckeditor Drupal module, wich acts as a wrapper, only supports Ckeditor 4. A module for Ckeditor 5 is currently not available.

# Attempt to directly configure the editor loaded via CDN.
Loading customized local plugins manually in the config file (where we can indeed manipulate some general css styles) does not seem to have any effect.

# Updating the editor (latest stable 4 - 4.11.1), loaded via CDN and attempt to directly configure it.
The path/URL to the resource is stored in the database in the module's settings.
This fails for the same reason as above.

# Downloading the editor source for local storage:
The editor sourcefiles live in ./sites/all/libraries/ckeditor.
The drupal module settings to be loaded by the editor live here:
./sites/all/modules/contrib/ckeditor
Confusingly, there are also some plugins and skins, which seem to be loaded from there. Used package 4.11.1 full

# Replacing the existant minified image plugin and it's dependencies by a downloaded development version (4.11.1) results in a plugin loading error after clearing the browser cache.

# Adding a custom style set in the ckeditor.config.js file also seems to have no effect:
config.stylesSet = [

{ name: 'Custom Image', element: 'img', attributes: { 'class': 'myClass' }}

];
Not clear, where those would appear, guess we would have to (re)define a field of the image dialogue anyway.

So finally, it is not quite clear yet, why loading a customizable module fails.
Next tests:

# re-try using the online builder to get a development version
# investigate more on the available plugins: there seem to be bootstrap-layout style classes conforming plugins available

[mail@hendrikschmeer.de]

Finally discovered my mistake (not checking permissions), but still some specific versions of freshly downloaded ckeditor packages refuse to load - this specially affects the expanded version of 4.11.1.
The error is "TypeError?.editor.ui.addButton is not a function".
Patching a minified version with an expanded & customized image plugin worked out.
So far, the custom class "img-responsive" is now added to every new image by default (editable).
Yet, I have not been able to figure out, where the same thing for tables should go (same, but different ;)

How is this change reliably gonna find its way into the CLARIN website? So far, its neither part of the theme, nor Drupal module, nor configurable in the database, but resides in /sites/all/libraries.
The module configuration in Drupal doesn't seem to accept a path to the local ckeditor library, that resides in the module directory. Instead, it automatically snaps back to the libraries path.

[mail@hendrikschmeer.de]

Yet no idea about the table. The structure of the table dialogue is completely different from the image dialogue - here a generic template is being used. As of the loading error in the expanded version, the origin of that template is hard to investigate. The concatenated package furthermore has a completely different plugin structure.
I tend to give up on this one (at least unless the loading error is resolved).

[Dieter Van Uytvanck]

So I made some tests on ​dev-www

• As to the table, just adding a class="table" to the <table> element is enough. However, the default other attributes (500 px broad etc should not be there.

• For the images, the class is set correctly but now the dimensions of the image are added to the style attribute, eg:

<p><img alt="" class="img-responsive" src="https://www.clarin.eu/sites/default/files/pathways.jpg" style="width:1669px; height:612px" /></p>

This results in these properties not being shown in the CKeditor dialog. Would be better not to have these in. Alternatively the width and height attribute should be used, so that the CKeditor dialog can be used to change the values.

[Dieter Van Uytvanck]

Correction: the width and height are being shown in the CKeditor, if you click in the dialogue after entering the URL. If you paste the URL and just hit enter, the dimensions are not added.

In any case I believe it would be better not to include the dimensions by default. For ​my example picture the dimensions displayed are incorrect.

[mail@hendrikschmeer.de]

A fix that removes the inline styles has now also been included.

All changes have been included in a fork of ckeditor-dev.

[Dieter Van Uytvanck]

Tested at dev-www, can be moved into production.

[André Moreira]

Deployed an tested in production.
It is unclear if that was actually the image box that was being used there before. After deploying the new ckeditor library, I noticed that the enabled image plugin was "enhanced image" and not "image" where we deployed the fix.

See ticket attachments for details on the difference between the two boxes. The first screenshot (without description) is the original state after only deploying the new ckeditor library

[André Moreira]

The option previously selected that I had to unselect

[André Moreira]

The new image window where we deployed the fix. (uses old image plugin)

[Dieter Van Uytvanck]

I believe both versions stem from the same code (CKeditor). In any case the beaviour as on www.clarin.eu is perfect - so I believe we can close this ticket. Yay!

[André Moreira]

For the record both versions come from different plugins of the ckeditor (which has a plugin architecture).
Anyway, since everyone is happy. Closed.

[Dieter Van Uytvanck]

The height and width attribute are currently ​removed by our patched CKeditor. This should not happen since these attributes can indicated a maximum value in combination with img-responsible.

Another issue introduced by the new editor is that the dialog to paste from word and paste as plain text is no longer working.

[mail@hendrikschmeer.de]

I think we should address this on Monday during our call.
There seems to be a default behavior, that removes the width|height attributes as soon a custom class or style attribute comes into the mix.

​https://ckeditor.com/old/forums/CKEditor-3.x/Image-dimensions-attributes (also valid for 4.x)

Thus, using the styles attribute should be the correct way.

Paste from Word is a plugin, that should be available. I'm going to have a look into why it disappeared.

[André Moreira]

An idea of a solution using CKEditor custom styles is deployed on ​https://dev-www.clarin.eu/

Workflow:

1. Insert the image

2. Select the image by clicking on it

3. Select "Image Responsive" from the "Styles" drop down list.

Apart from the extra 3 clicks this looks like a safe solution to me.

[André Moreira]

This is done by editing

/var/www/localhost/htdocs/sites/all/themes/CLARIN_Horizon/ckeditor.styles.js

and adding:

{ name: 'Image Responsive', type: 'widget', widget: 'image', attributes: { 'class': 'img-responsive' } },

[Dieter Van Uytvanck]

Works for me as described. Even if it is not applied automatically and if it is forgotten by the author it makes life easier to add the correct class afterwards.

[André Moreira]

Deployed in production => www.clarin.eu