WBCE CMS Forum

foxlake

Mitglied

[Erledigt] CKEditor img / youtube behaviour

New attempt on this item, on Request

IMG behaviour:

There is a new CK editor version, like the latest editors before this one (Many thanks for keeping this update ! I respect all that work)

(but) I have to change the Ckeditor config.js when I do an upgrade or install a new WBCE site. 

“Protect PHP code tags (<?...?>) so CKEditor will not break them when switching from Source to WYSIWYG”

To prevent that height and width are gone after placing a picture. (Because this is what’s happening in WBCE)

Some explaining:

I make website windows for local schools, footbalclub, tennisclub, etc.

The people there are not ‘IT persons’ so I want to make it easy for them to edit the site.
For example, the editor from the school (a teacher) gets pictures from the other teachers to place them on the site. One sends a 400 pix, the other a 300 pix the other a 500 pix.
The editor wants to make a page with the teachers introducing themselves. He wants to present the pictures 250 px width.  The teacher has no idea how to make all this pics first 250px width in a a photo program. They also have a picture from the school building, its 1000px width. On the front-page they want it 100% width (900px) and on another page with the school address they want the same picture 300px width.
It would be stupid to every time first change the pictures themselves in a photo editor ?

So what do I do, to present them a responsive WBCE site ‘for dummy’s’.
No, I won’t tell them about ‘classes’ they can add to a picture in the editor, because they don’t know the classes in the site template.

I replace the ckeditor config js, so that height and width are not removed when saving the page.

I tell them to always place the picture and after that open the lock nearby and place only the width that they want in the editor. And then save the image. They can also set the alignment when needed.

With only the width in the image it is responsive, and when it is sizing down the % width and height stages in good ratio.

So perfect for them! They don’t have to change every picture first, and don’t have to know style classes in the template.

To make it work like this I have this in my template css:

img {
  border:0;
  display:block;
  height:auto;
  max-width:100%;
  width:auto;
}

And that will do the trick.

---
So my wish is to let the possibility for height/width in the editor.

--------------

And then the YouTube video:

When we use the editor in a responsive site, no matter wat we fill in the media file,  the YouTube video comes only in a small look on the website.
When my page is for example 900 pix width I often want to place the video 100% width on the screen, and not 400px.
Of course it must be responsive.

Therefore, I now let them use the droplet that does the job correct as the school, footbalclub etc. wants.

Isn’t it a pity to have an editor with the possibility’s in it, and don’t use them?  It’s strange to have a width and height field and with saving remove the things you added?

Thank you in advance and kind regards,

I like WBCE .. and wouldn't it be nice that more and more people will use and like WBCE ?
A nice and simple 'editor' so that 'dummy's' can edit a site to ?

Niek Foxlake

Beitrag geändert von foxlake (12.10.2018 07:52:12)

florian

Administrator

Re: [Erledigt] CKEditor img / youtube behaviour

You are right about the image and video behaviour, both of it is not very comfortable.
The video embed plugin is outdated and not under development any more.
Maybe the plugins which are currently shipped with the CKE module should be reviewed. (Unfortnuately, this sounds easier than it is, so I can't promise when or even if there will be a change).

Allowing PHP in WYSIWYG is no good idea, at least in muli user environments. Malicious users could easily hack the whole server by this. If you need PHP code execution, you can either put it in a droplet or in a code2 section. (Of course, only trustworthy users should have access to admintoools and code2 there too.)

---

Code allein macht nicht glücklich. Jetzt spenden!

foxlake

Mitglied

Re: [Erledigt] CKEditor img / youtube behaviour

When you go to the site of CKeditor it self you see that its not meant to be to take a way the height and width .  (image)

So it would be nice to leave it in, and not delete this when saving.

In the example of CKeditor, (image) they only leave the height away to keep the picture in ratio.

The responsive working must be in the template, and than its working good, I think.

Maybe its word to give it a try ?

Kind regards  and all the best,

Niek Foxlake

florian

Administrator

Re: [Erledigt] CKEditor img / youtube behaviour

I think we will either go back to the usual behaviour of the img tag, e.g. stop removing the manually added width/height values, or replace it with a better image plugin. It's not my decision, the module is maintained by colinax.
Please notice that the current removal of image dimensions has nothing to do with the size of the embedded videos. This comes from the third-party-plugin oemembed, which, as I stated before, is not under development any more.
So again, I know about the problems and I do understand your point of view, but the module maintainer has to decide whether there will be changes or not.

---

Code allein macht nicht glücklich. Jetzt spenden!

foxlake

Mitglied

Re: [Erledigt] CKEditor img / youtube behaviour

Thank you for the answer Florian, I'm glad with you're answer and I think and hope that Colinax will see this to.

I like WBCE very much, its a lot more friendly than most of  the other CMS systems in this world.

Thank you all for doing all this good work.

Regards,  Niek Foxlake

Beitrag geändert von foxlake (14.10.2018 12:37:45)

colinax

Developer

Re: [Erledigt] CKEditor img / youtube behaviour

You are right about video behaviour, it is not very comfortable.

It's true, it's not comfortable, but the best we can deliver.

See below

The video embed plugin is outdated and not under development any more.

that's not really true.

The CKEditor Media (oEmbed) plugin is under development, but the most important dependency has not been developed since December 2014.

The plugin works as expected only the result is on the development level of 2014

To make the result responsive, only a little CSS code is necessary (I've tested it with YouTube and Vimeo):

.embeddedContent  {
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
}
.embeddedContent iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
/* ratio 4x3 */
.embeddedContent.ratio4x3 {
  padding-bottom: 75%;
}

There are some plugins from CKSource at the development level of 2018 and these are also reponsive in the backend and frontend (scale to 100% of the content area) BUT these plugins require payment services like https://iframely.com

In the days of the GDPR it's better to use an old script that works locally than to use a paid and external script.

The other option is to completely remove such plugins and say "Use the embed feature in the sharing menu of the platforms".

Allowing PHP in WYSIWYG is no good idea, at least in muli user environments.

It is needed for CKEditor or WBCE, I do not know why or for what.

/* Protect PHP code tags (<?...?>) so CKEditor will not break them when switching from Source to WYSIWYG.
    *  Uncommenting this line doesn't mean the user will not be able to type PHP code in the source.
    *  This kind of prevention must be done in the server side, so just leave this line as is. */

I am only the maintainer, but not the original developer of the module.

You are right about the image behaviour, it is not very comfortable.

It's true, it's not comfortable, but the best for everyone.

The current behavior remains as it is.

The problem with the pictures in the CKEditor is, that the CKEditor can only handle static values.

To become it responsive you need to use CSS (hacks or overwrites).

In this case, we decided, by a vote, to remove the static CSS for clean output and better CSS handling in the templates.

See below

Summary

It is easier to customize the CKEditor with old modules and a certain behavior for the average (of the templates) or for all users.

If someone needs something special, we can still say "use that" and / or "do that".

Unfortunately I still can not find / read where you have problems (now) or need help.

Do you have problems with the frontend or backend (view in the CKEditor).

As I already wrote, you can solve these problems (in the frontend and backend) via CSS.

The CKEditor style can behandelt over the editor.css

Ich case of the wbce_vertal Template, the editor.css handels the view in the Backend and Frontend, it's not the recomendet usage of the editor.css but it works.

On the other hand, you need to know in advance how the CKEditor and the template work, otherwise you will destroy the frontend and backend view.

Your CSS code

img {
  border:0;
  display:block;
  height:auto;
  max-width:100%;
  width:auto;
}

works the e.g. in the CKEditor, but in 99% it can happen, but it does not have to destroy the view of the Templates and Modules like Responsive FolderGallery (RFG) and so on.

So please tell us the name of the template and / or the address of your website so that we can see, how the template works, to help you.

Beitrag geändert von colinax (14.10.2018 21:43:06)

florian

Administrator

Re: [Erledigt] CKEditor img / youtube behaviour

I discussed the subject with colinax. Actually, I was wrong when stating "oemEmbed is outdated", this is a false information from the readme file from the plugin. In fact, it _is_ still maintained, and has the advantage that it works without commercial services (the newer alternative plugins don't). And, I can confirm that if you add colinax' CSS code to your template CSS, the videos will be displayed responsive. Magic!

About the image sizes: both options, e.g. allowing CKE to add width/height styles to images, and removing them, have their very own advantages and disadvantages. Unfortunately, we currently do not have any possibility to let the user decide how the CKE should behave, in the backend. But on the other hand, just removing or commenting out the lines 17ff in /modules/ckeditor/ckeditor/config.js or replacing it with a version without the code (see attachment) is done in a few seconds.

---

Code allein macht nicht glücklich. Jetzt spenden!

foxlake

Mitglied

Re: [Erledigt] CKEditor img / youtube behaviour

Hello Colinax,

I have no problem to make my sites work... and it will bring nothing new to show you that sites.

I now remove the code that takes the width and height away, luckily they told me how to to that. 
And for video I use the droplet code now, that works for me and the editor-people who are keeping the websites update.

Some of that sites are using also the Responsive Folder Gallery, and it simply works well enough.  There is one problem in RFG now, but that is when you upload pics threw the media folder,  and just do the synchronize database, the first time it  will creates thumbnail pics, you are getting lots of php errors.  But after that it work great. (colorbox) . Also with the img code as shown, that will not effect the RFG.

You can try it with the 'FRAGSTAN' template for example.

I know that some 'dutch friends', who used to be WB guys, already left this platform.
I would like to stay with this platform, as I already said I like it (till now?)
I just tell you my thoughts and worries...    Sorry about that.

I can imagine me that people who want to try WBCE, install it and found out that it is not doing what they aspect, are looking further.
An editor is used to place text and pictures in de way you want.   Its not logical to remove height and width ? ?

What is the goal of WBCE in the future ?

Sorry .. I don't want to be rude,    not at all...  and again I thank you for all the  good work.

I hope you know what I mean,  and I don't want a third WB ..  in the future .

Just a  "WBCE CMS ist ein einfach zu bedienendes Content-Management-System" with a editor that does what you expect.

Sorry for my opinion, i'm not angry ...   just want that WBCE stays great to work with.

Don't we all?

When the winter is coming ... I hope to get some time to look around and see what other CMS can bring.
For me its just hobby, working at day in something completely else, and now and then do some site hobby in the evening.

Greetings,

Beitrag geändert von foxlake (14.10.2018 20:34:13)

florian

Administrator

Re: [Erledigt] CKEditor img / youtube behaviour

It's a bit confusing. The RFG has nothing to do with the issues mentioned in this thread.
If you have problems with that module, please post in the corresponding thread, including the error messages - and also information about the PHP version and RFG version. I'm using the RFG by myself and on a lot of sites, and can't reproduce the error, maybe it's a server issue - too large files, too short runtime or memory, whatever.

And about "till now" and "look around"... you just cease using WBCE due to a small, 5-seconds-change you might have to apply to a single file? Really?
In German, we have a saying: "Reisende soll man nicht aufhalten".

---

Code allein macht nicht glücklich. Jetzt spenden!

foxlake

Mitglied

Re: [Erledigt] CKEditor img / youtube behaviour

Hai Florian,

Thank for your answer ..

I think I was clear enough  ... I LIKE WBCE.  And yes I now that I can remove a part of the script etc. (5 seconds)  to make it work.
The errors when making the thumbnail in RFG, don't bather me.  The viewer of the site will not see them, that's important.
I came up with RFG because of the answer from Colinax.

Its not for me only, that I bring this up, but there are more people looking for a nice CMS like WBCE.
But as told, when they test it, and it does do things they don't aspect ?   
They don't know that they simply can remove the script.

I know WBCE is free,  and you work very hard to keep it alive.  Thanks again !
I appreciate that very much.

So I have no rights to complain.  I simply tell you my thought and that's all.
Its up to you guys to do something with it or not.

I just give you a simple advice .. what benefits WBCE (I think)

Butt yes .. maybe you are better of without a stubborn Dutchman ? 

Have a nice evening, and again.. keep up the good work !

Beitrag geändert von foxlake (14.10.2018 21:18:04)

florian

Administrator

Re: [Erledigt] CKEditor img / youtube behaviour

I don't bother you when you have issues with any modules. Thats what this forum is for.
So again, if you have issues with the RFG, please post the appearing errors (or notices or warnings) in the RFG thread. 

About the image sizes: So what should we do. Remove the code by default? Then some users will complain about "I'm posting an image, but it is not responsive". Others will say: "Hey, what's this, posting responsive images worked before, suddenly it does not any longer". Do YOU have a solution how we could solve that problem? The way we do, the way we'll do it wrong.

And no, we are not better without "a stubborn Dutchman". We would like to keep any user, and I'm quite sorry that specially the formerly strong dutch user community is lost - fo WBCE as well as for WB as far as I can see. But we are no magicans and we can't fulfill every wish.
And of course, WBCE is no "national" project. Although the most common language in this forum is german, this does not mean that WBCE is a "gerrrman" CMS. In contrary. Au contraire. Integendeel.

---

Code allein macht nicht glücklich. Jetzt spenden!

foxlake

Mitglied

Re: [Erledigt] CKEditor img / youtube behaviour

Dear Florian,  in answer to:

"About the image sizes: So what should we do. Remove the code by default? Then some users will complain about "I'm posting an image, but it is not responsive". Others will say: "Hey, what's this, posting responsive images worked before, suddenly it does not any longer". Do YOU have a solution how we could solve that problem? The way we do, the way we'll do it wrong"

Now you are turning the things around I think. ;

I have about a 30 websites (al free hobby work for others; local school, clubs, church, etc. ) made with WBCE CMS. Not all of them are responsive, only the new ones are. With 'safety' on my mind, I do update the back-end of all sites with the new WBCE.
They had an editor where they worked with image size.  After the  WBCE update: To use you're words:  "suddenly it does not any longer".

Again: In the editor you can ad SIZE, with a reason.  Its just strange to have it in, and then with saving the file take away what you edit there.
When users don't want to ad the SIZE they can leave it blank.  Just the way I leave the height empty, so it is responsive (on the responsive sites) and stays in good ratio!

Cause in the responsive template is this CSS:
img {
  border:0;
  display:block;
  height:auto;
  max-width:100%;
  width:auto;
}
And there are more examples of how to make it responsive.

I did not say the word 'WRONG', you did now.   I want to stay nice and see it as positive criticism to make WBCE better.

But its better to end this discussion now and maybe delete this topic. 

"Cause you decided, by a vote, to remove it."   "take it or leave it"  is it in English.

Entschuldigung für die Unannehmlichkeiten,  guten Abend,

Niek Foxlake

colinax

Developer

Re: [Erledigt] CKEditor img / youtube behaviour

Hi foxlake,

There are so many ways to customize the ckeditor or to handle it.

On my Github Chanel is a archive Branche with the Editor Version before i took over the cke maintance.

Or you can simply activate the image2 or add any other plugin to change the Image behavor.

If dont want to Update the cke with the wbce Update simply remove the cke from the Update package.

Please notice, in Times of responsiv Websites we musst follow dem to, to Support it. I know that non responsiv Websites can have Problems with it.

For Such cases is this forum, to help people.

LG

-- Written on mobile

foxlake

Mitglied

Re: [Erledigt] CKEditor img / youtube behaviour

Yes ... but it can be responsive leaving the h and W .
Just make the template responsive ...

But i rest my case.

Have a nice day.   NF

florian

Administrator

Re: [Erledigt] CKEditor img / youtube behaviour

Just as additional information:

In the CKEditor module the "image2" plugin is "hidden" shipped too.

To activate it, edit the /modules/ckeditor/include.php and change the lines 123f.

$ckeditor->config['extraPlugins'] = 'wbdroplets,wblink,wbsave,wbshybutton,autolink,ckawesome,codemirror,lineutils,oembed,textselection,widgetselection,colorbutton,copyformatting,flash,font,indentblock,justify,panelbutton';
	$ckeditor->config['removePlugins'] = 'wsc,link,save';

to:

$ckeditor->config['extraPlugins'] = 'wbdroplets,wblink,wbsave,wbshybutton,autolink,ckawesome,codemirror,lineutils,oembed,textselection,widgetselection,colorbutton,copyformatting,flash,font,indentblock,justify,panelbutton,image2';
	$ckeditor->config['removePlugins'] = 'wsc,link,save,image';

The advantage of the image2 plugin is that it generates just the html width and height attributes and no style attributes. The disadvantage is that it has less image configuration options than the default image plugin.

---

Code allein macht nicht glücklich. Jetzt spenden!

foxlake

Mitglied

Re: [Erledigt] CKEditor img / youtube behaviour

CKeditor does leave only width if you test is there.   Just as it should be.

colinax

Developer

Re: [Erledigt] CKEditor img / youtube behaviour

Hi, you're right, but this example uses the image2 plugin with activated "Picture with headline" option.

This option ensures that not an img tag is used, but figure with figcaption.

Unfortunately that does not work with most of the templates.

The HTML code looks like this:

<figure>
    <img src="/media/examples/example.png" alt="example" />
    <figcaption>example by colinax on WBCE</figcaption>
</figure>

colinax

Developer

Re: [Erledigt] CKEditor img / youtube behaviour

I have tested this behavior in the image plugin and it works, but if the size of the image is changed with the button at the bottom right, the editor fills the height and width again and the image is no longer responsive.

The only clean and solid solution is to use CSS classes, so we'll remove the height and width of the images.

We are not the only ones who are not happy about this situation.

So from your point of view, it should be more informative to directly ask the CKE developer why nothing has changed, or whether they can change it so that it is not changed by the resize feature.

https://github.com/ckeditor/ckeditor-dev

foxlake

Mitglied

Re: [Erledigt] CKEditor img / youtube behaviour

Best WBCE team,

The editor must just do what we want, I think . 
But who am I.

If you leave de W and H empty you get a 100% responsive (youre template must take care of that)
When you fill in only the width  you get a 100% responsive img, but you're template make the filed in width the view width)
(you're template must take care of that)

Even without  giving each pic a class in the editor.

But do what you want... its your decision.

All the best...

NF