Topic Closed
mabu
372 Posts
5.8K Downloads
4 Themes
9 Plugins

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)

Edited: 2 years ago#11697

juergen
1.5K Posts
60.5K Downloads
16 Plugins

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.

2 years ago#11698

mabu
372 Posts
5.8K Downloads
4 Themes
9 Plugins

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.

Edited: 2 years ago#11699

juergen
1.5K Posts
60.5K Downloads
16 Plugins

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.

2 years ago#11700

mabu
372 Posts
5.8K Downloads
4 Themes
9 Plugins

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.

Edited: 2 years ago#11702

juergen
1.5K Posts
60.5K Downloads
16 Plugins

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.

 

2 years ago#11703

mabu
372 Posts
5.8K Downloads
4 Themes
9 Plugins

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'); )

Edited: 2 years ago#11704

juergen
1.5K Posts
60.5K Downloads
16 Plugins

… 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.

Edited: 2 years ago#11705

juergen
1.5K Posts
60.5K Downloads
16 Plugins

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!
Edited: 2 years ago#11706

juergen
1.5K Posts
60.5K Downloads
16 Plugins

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.

Edited: 2 years ago#11707

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

HH-Support

Company located in T├│rshavn, Faroe Islands. * Webpage Design * Consultant & Provider of a wide range of programs for visually impaired and dyslextics.

Find out more about our Provider Spotlight

Log In

  Register