I'm new too and using the Fanoe starter kit. I just did a quick test and the images aren't resized at all. It's weird as the Grid TextPage has a setting "Maximum size for inserted images" which is set to 500, but it doesn't seem to affect anything on the page. I've dug around in the Settings & Developer areas a bit and noticed a "Wide image" row it has a "Image wide cropped" editor, but that uses a fixed size of 1920 * 700 (which even increases the size for smaller images). I'm not sure what I'm missing... perhaps it's not possible in a grid and you have to create a property in a tab that uses the "Image Cropper" data type? But that would defeat the purpose of having images throughout the grid content...

It's possible to add an image via a URL (e.g. http://yoursite.com/media/1054/someimage.jpg?width=500&height=300&center=0.393,0.585&mode=crop) , but that is already far too difficult for some of the people I intend to hand this over to use

I generally resize everything before hand to the maximum size required by my responsive layout, but I could imagine other users wouldn't bother and would be uploading massive files - which is an issue as we deal with a lot of high res photos, and some pages are likely to have a lot of photos on them.

I would be interested to hear how this should be done too!

Hi Jeroen, thanks. The image dropped in the grid doesn't really has a width or height in the img src element when inspected. But the partial view of the grid shows this piece of code:

var url = Model.value.image;
    if(Model.editor.config != null && Model.editor.config.size != null){
        url += "?width=" + Model.editor.config.size.width;
        url += "&height=" + Model.editor.config.size.height;

        if(Model.value.focalPoint != null){
            url += "¢er=" + Model.value.focalPoint.top +"," + Model.value.focalPoint.left;
            url += "&mode=crop";
        }
    }

    <img src="@url" alt="@Model.value.caption" class="img-responsive"> 

So, it's still not clear for me where under the hood the resizing happens. Thanks.

@Jeroen - so what steps are we missing to adjust the query string? We are able to set a focal point before inserting but there are no fields for the user to specify width or height. There is also no way to adjust the img query string being used (as a User). As antao pointed out it should be passing in model.editor.config sizes from somewhere - the only indication of this is in grid.editors.config.js for "Image wide cropped" which has these hard-coded values:

 "config": { "size": { "width": 1920, "height": 700 } }

In a responsive layout specifying specific images is less of an issue (as you want it to adjust automatically) but it would be good if we could ensure that the uploaded file is at least a maximum size...  There is a Grid setting "Maximum size for inserted images" but it ONLY applies to images uploaded in the RTE. That would be great, except it still doesn't seem to be getting applied there so I'm not sure what I'm missing to get this working.

I've done a test on the default Image component and it's possible to specify a maximum width (in the grid.editors.config.js) and it will maintain the aspect ratio:

 { "name": "Image", "alias": "media", "view": "media", "icon": "icon-picture", "config": { "size": { "width": 800, "height": 0 } } },

So that's at least a partial success - it would be great if I can access the "editor.settings.maxImageSize" setting so I can update it via the Umbraco admin instead of stuffing around in the grid config file.

Any help would be appreciated, thanks! :)

@antao - It looks like this has been marked as "solved" even though Joroen's answer doesn't really say much (no offence). It seems to me that the images still being uploaded at full-size and stored that way (not ideal for server space) and the only way to resize it is to pass in parameters (not ideal for clueless users) or force the templates to add the parameters (not ideal for maintainability). It also allows people to retrieve high-resolution images just by changing the parameters themselves... not ideal if you've got high-resolution images of photos or artwork that a clueless user has uploaded. 

I assume that ImageProcessor is something like an in-between handler for images, so if it sees parameters it opens the image file, resizes it appropriately, and stores a cached version on the server. I'd like to know how we can force images to be resized before being stored on the server filesystem...

Currently there is no built in method to resize uploade images to maximum size (width or height). However, The Upload Data Type supports a list thumbnails. The name thumbnail is a little misleading as you can define even big sizes like 1600. No upscaling is done and two special sizes (100[thumb] & 500[big-thumb]) are generated by default. The naming covention is to add the size or default name (thumb & big-thumb) separated with _ (underscore) to the filename ie. test.jpg -> test_thumb.jpg, test_big-thumb.jpg and test_1600.jpg. This will not solve your issues as the original upload size is kept as test.jpg. Even more this not supported by the default Image cropper, which you could use instead of the Upload data type on the Media-Image type.

Refering to version 7.2.4 I have notice a somehow unexpected behaviour: All custom size are generated twice ie. your original upload named test.jpg is of size width = 2048px and height = 1024px (ratio 2:1) and you have defined a custom size of 900 then you get the default thumbs and test_900.jpg plus test_900x450.jpg. I am not sure whether this is a bug or a feature;-)

For Umbraco versions 6.x I have created the package Image Cropper Extended which save the configured crops after upload automatically. However, all defined crops for a given cropper data type are always saved. You could disable the persisting-on-save and the only actually used crops are generated and persisted. But this is history and I am not planning to make this cropper available for version 7.

Personaly I like the new approach. It is much more responsive and the way the ImageProcessor caches and handles changes in crop settings and more is very powerful. And yes it works as an httpModule in-between whenever an image url has appropriate url parameters like width.

Have you seen the package slimsy https://our.umbraco.org/projects/website-utilities/slimsy - it might helpful too.

At least my conclusion is that indeed a config setting that allows for a maximum size of uploaded images and btw. an automatic conversion from tif to jpg would be very appreciated.

I have not much experience with v7 as all my projects currently stick on v6 :(
But here you may find your answers: https://our.umbraco.org/documentation/reference/Querying/UmbracoHelper/

Yours
Dirk 

Hi Dirk,

I made another post about this and there is a solution provided as well: https://our.umbraco.org/forum/umbraco-7/using-umbraco-7/64007-Umbraco-7-Image-Resizing-(Media-Library-RTE)

Essentially, it overrides the save event and does some in-place resizing to a maximum size (1920px wide in my example).

There is still an issue with the image uploading in the Grid RTE (property RTE is fine) as it currently ignores the 'maximum size for inserted images' setting. Images can be manually re-scaled (using the resize sliders) to achieve the same goal though, which isn't ideal but it's a viable workaround for now. Issue is reported here: http://issues.umbraco.org/issue/U4-6453

I did look at Slimsy, and it's definitely worth considering!

i did it in Umbraco: 7.5 like this, changed code in Umbraco.Web.UI\Umbraco\js\umbraco.services.js in the function insertMediaInEditor:

$timeout(function () {

  var imgElm = editor.dom.get('__mcenew');
  var size = editor.dom.getSize(imgElm);

  if (editor.settings.maxImageSize && editor.settings.maxImageSize !== 0) {
     var newSize = imageHelper.scaleToMaxSize(editor.settings.maxImageSize, size.w, size.h);

    // images must be responsive: commented 3 lines of code, added addClass with img-responsive, 
    // var s = "width: " + newSize.width + "px; height:" + newSize.height + "px;";
    // editor.dom.setAttrib(imgElm, 'style', s);
    editor.dom.addClass(imgElm, 'img-responsive');
    editor.dom.setAttrib(imgElm, 'id', null);

    if (img.url) {
        //var src = img.url + "?width=" + newSize.width + "&height=" + newSize.height;
       var src = img.url;
       editor.dom.setAttrib(imgElm, 'data-mce-src', src);
    }

}

}, 500);

Hey I'm having an issue, I assume it was an upgrade error in the past but I can't go and update it now since it's not in the clients budget.

I went into umbraco.services.js and updated the 500 to 1000, but it doesn't seem to be working.

dialogService.mediaPicker({
                    currentTarget: currentTarget,
                    onlyImages: true,
                    showDetails: true,
                    callback: function (img) {

                        if (img) {

                            var data = {
                                alt: img.name,
                                src: (img.url) ? img.url : "nothing.jpg",
                                rel: img.id,
                                id: '__mcenew'
                            };

                            editor.insertContent(editor.dom.createHTML('img', data));

                            $timeout(function () {
                                var imgElm = editor.dom.get('__mcenew');
                                var size = editor.dom.getSize(imgElm);

                                var newSize = imageHelper.scaleToMaxSize(1000, size.w, size.h);

                                var s = "width: " + newSize.width + "px; height:" + newSize.height + "px;";
                                editor.dom.setAttrib(imgElm, 'style', s);
                                editor.dom.setAttrib(imgElm, 'id', null);

                                if(img.url){
                                    var src = img.url + "?width=" + newSize.width + "&height=" + newSize.height;
                                    editor.dom.setAttrib(imgElm, 'data-mce-src', src);
                                }

                            }, 1000);
                        }
                    }

Any thoughts? The datatype richtexteditor doesn't have the default auto resize option. (Install Package Error)

is working on a reply...