The Responsive Image 1.5.6 plugin functions with Typesetter images (Page ->...)  But what about other images and Bootstrap 4 images in the content. The BT4 image-fluid only changes the width and is not really responsive( Example) .

I was looking for a js  and found a stackoverflow - issue  with a  fiddle - link  , which allows 3 ways to resize images  as

function directResize() {
img = new Image();     img.src = sourceImage;   
    img.onload = () => {
            var directCanvas = document.getElementById("direct");
            var directCanvasContext = directCanvas.getContext("2d");

            directCanvas.width = canvas4.width
            directCanvas.height = canvas4.height;

            //    Set original canvas size
            directCanvasContext.drawImage(img, 0, 0, directCanvas.width,     
                                                                        directCanvas.height); }}

There is just no dependence upon the document.body.width.

* see also https://github.com/danschumann/limby-resize :

Canvas:  var resizer = require('limby-resize')({ canvas: require('canvas'), }); resizer.resize('/tmp/image01.jpg', { width: 300, height: 500, destination: '/uploads/myimage.jpg', });

The next step is how to bind this into js and make a general plugin.

Evtl. someone else knows a better solution ?

P.S. I found finally  .img-fluid {max-width: 100%; height: auto; }  - but thats only for BT4 and allows no initial size in ckeditor (the images-size must be as they are in the website)

I think, Simple Image can do most of your resizing needs.

 

I was looking for a js…

function directResize() {
  img = new Image();
  img.src = sourceImage; 
  …
}

I would advise against using such scripts that define variables in the global scope.
It indicates poor programming skills.

Sorry - but simple image (see my example ) doesnt function for me....? Here it has (the greece vase) 420*359  - thats the frame - the image is not magnified, but  I can draw it within the adjustable frame - ... and ... if i have images in a grid or table....

My momentary solution is (with phantasy)

1. add .img-fluid { max-width: 100%; height: auto; margin:5px; } -- to the custom.css

2. then adjust the image -size for the lg mode and notice the height  - and then delete any entries like width, height, vspace, align -

3. in the advanced mode - tab under Stylesheet Classes add :   img-fluid mx-auto d-block

4. then add the above lg - height to max-height: xxpx; (i.e. 300px) into  the line beyond

( most of it bootstrap-people could have done - integrated into img-fluid  except point 4)

For people without bootstrap 4 a class like expanded img-fluid could solve that too.

Sorry - but simple image (see my example )

I cannot see any simple image sections in your example.

the image is not magnified,

Use the 'scale to fit' setting which acts like img-fluid. The 'shrink o fit' default will act like img-responsive.

I  cant find Your menupoints?

After i added a second image - that image is not responsive either..

Is is optimized for the newest master - or where do i find the other 'simple image'.

I better use the standard bootstrap-fomations a w3c teaches.

You are using Typesetter's standard Image type. Simple Image is a plugin you can download from my Typesetter Addons Website. After installation there will be a new section type.

 

The plugin was  installed - it just didnt appear - after new login it is there. I just cant put or draw  pictures  into a bootstrap grid and not several pictures into  a row and cannot resize a picture , if i put it to 'scale to fit. Still much to do !

(P.s. There is also a bootstrap grid editor, beside btgrid, which only partially functions - needs reprogramming. The momentary owner overtook it and made changes - like  - editor.addContentsCss('/admin/assets/pkg/bootstrap/css/bootstrap.min.css');  + editor.addContentsCss('/path/to/bootstrap/css/bootstrap.min.css'); )

… cannot resize a picture , if i put it to 'scale to fit.

Of course, you cannot have both at the same time.

Still much to do !

Don't hesitate.

I just cant put or draw  pictures  into a bootstrap grid and not several pictures into  a row

1. Create a wrapper section and give it the class row
2. Add Simple Image sections, move them into the wrapper
3. Give them the col- classes you want
4. Voila!

There is also a bootstrap grid editor

Well, that's exactly what we have wrappers and sections for.
If you build grids inside individual Editable Text sections (which is also perfectly fine), you lose the ability to use different section types within this grid.

Use whatever suits you best - Typesetter makes no restrictions in this regard.