Responsive image tinymce image link
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.
on tinymceini put this.... and voala
image_dimensions: false,
image_class_list: [
{title: 'Responsive', value: 'img-responsive'}
]
add this class in file content.min.css
img {
max-width: 100%;
height: auto;
}
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 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%;
}