Question: Responsive images on edit mode

My img elements have styles img.img-responsive { display: block; max-width: 100%; height: auto; } When I’m on edit mode, img elements are changed to div, and they are given background-image property. They are not displayed auto sizing… I hope that div contain origin img which set invisible (no doing none display) at least. Or is there another way? recommend please.

[darksnake747]

First, to start, I want to point out that ContentTools states that the editor does not work well on mobile devices. More importantly, at least from my observations, it doesn’t have native support for responsive displays. Nor does it have native support for Bootstrap, which I am assuming you are using based on that class name. That said, you can achieve this on your own; in fact, it is how I use it. I don’t have mobile support for the edit mode completely perfect, but that is an issue of screen real estate and not something I care to fix.

Because of all that, when the content switches to edit mode and your img tags become divs, the Bootstrap CSS no longer applies - that is really why the responsive images aren’t working. You should be able to add some CSS to the editor pages that appies the Bootstrap CSS from img.img-responsive, which is: { display: block; max-width: 100%; height: auto; } to the divs. Try this:

.ce-element--type-image.img-responsive { display: block; max-width: 100%; height: auto; }

You could be having another problem though. Does the div in edit mode have the img-responsive class on it? If not, the easiest way to handle that will be to add a supported style for it, like this:

ContentTools.StylePalette.add([
    new ContentTools.Style('Responsive', 'img-responsive', ['img']),
]);

Personally, I inject that class on my images when they get inserted. That’s done like this:

dialog.addEventListener('imageuploader.save', function () {
    // ... do stuff here ...
    dialog.save(image.url, [width, height], {
        'class': 'img-responsive',
        //... other image settings ...
    });
});

Moving forward, if these things happen, just keep in mind that by wanting to use the ContentTools editor with Bootstrap and a responsive display, you will have to manually add support for it like this.

I hope this helps you. Let us know if you get the problem resolved.

[ghost]

No problem 😃 This plugin is still an excellent plugin and I thank you for giving it to us !

That’s why I criticize some part of it, I’m french and we have a proverb that says :

Qui aime bien chatie bien

Which could be translated like that :

Who loves well chatises as well

That’s what I’m doing with your plugin 😃