Responsive image tinymce image link

Question

I'm expanding an existing website. I have the site published (if you want to take a look click here). I have just added a very simple blog (made with php and mysql) and it works well, except for one thing. If I add an image to a new or post, the person that is writing the post is able resize it. The problem is that the image has static width and height, and then if I access the blog on a mobile device, the image is cut because it's bigger than the width of the device. I don't know how to solve it, I thaunght I could modify the plugin that allows to insert images to add this parameters (which makes an image responsive):

max-width="['user selected width'], width=100%, height=auto

I've been trying to modify the plugin but i find it very hard to understand, and i'm not very experienced on javascript. Here's the plugin. I'm using tinymce editor to edit or add posts. Anyone knows were I have to add this parameters? Thank you.

Solution 1

on tinymceini put this.... and voala

image_dimensions: false,
         image_class_list: [
            {title: 'Responsive', value: 'img-responsive'}
        ]

Solution 2

add this class in file content.min.css

img {
    max-width: 100%;
    height: auto;
}

Solution 3

No need to handle this via separate te css. You can apply "img-responsive" class at the time of adding the image in tinymce editor itself.

Add below property in your tintmce editor properties:

image_class_list: [
    {title: 'Responsive', value: 'img-responsive'}
],

Reference and credits: http://archive.tinymce.com/forum/viewtopic.php?pid=114620#p114620

Solution 4

Solution found, instead of modifying the html code that produces tinymce to insert an image, I modify the image proportions on the css stylesheet by modifying the img. I use this code:

[element that contains the image] img {
width:100%;
height:100%;
}

View more solutions

Comments

[ivp]

I did not check that somebody has already posted this solution above.

[ahmednawazbutt]

where do I need to place this in yii2?

[singe batteur]

you place this in the mce initialiasation : tinymce.init({ ... for bootstrap 4 : img-fluid instead of img-responsive

[aderchox]

Does nothing on TinyMCE version 5.

[aderchox]

The pure CSS solution that makes the most sense.