CODEWITHSUNDEEP
javascripthtmltinymce
joan2404
joan2404

Reputation: 315

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.

Upvotes: 3

Views: 13096

Answers (8)

Adam
Adam

Reputation: 323

For Bootstrap 5 Use This

Add Below Your tinymce.init()

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

Upvotes: 0

Gregory Alexander
Gregory Alexander

Reputation: 21

With version 5 you want to put the same code at the end of the /skins/ui/oxide and /skins/ui/oxide-dark content.css files.

/* <your name> added the following to create responsive images */
img {
    max-width: 100%;
    height: auto;
}

Upvotes: 0

syskey
syskey

Reputation: 1

Using CSS is a safer way to do this

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

Upvotes: 0

Tuğba Nur &#199;akı
Tuğba Nur &#199;akı

Reputation: 1

Below is the solution I found using css and jquery instead of tinymce plugins. 

$(document).ready(function(){

    var tiny_images = $(this).find('img').map(function(){

        if($(this).attr('class') == undefined){
    
            if($(this).attr('src').indexOf("data:image")!=-1){
                $(this).addClass("tiny-img");
            }
            
        }

    }).get()

});
 .tiny-img {
    max-width: 100%;
    height:auto;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Upvotes: 0

Ishwar Patil
Ishwar Patil

Reputation: 1736

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

Upvotes: 7

SIGDL
SIGDL

Reputation: 167

on tinymceini put this.... and voala

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

Upvotes: 15

softcod.com
softcod.com

Reputation: 570

add this class in file content.min.css

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

Upvotes: 11

joan2404
joan2404

Reputation: 315

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%;
}

Upvotes: 1

Related Questions