V8: Media crop inside Grid

[AndersBrohus]

I'm in the middle of migrating an Umbraco 7 blog to Umbraco 8, and in V7 project i have created an new grid editor of the media editor which has a size set, like this :)

{
    "name": "Image",
    "alias": "croppedMedia",
    "view": "media",
    "icon": "icon-picture",
    "config": {
        "size": {
            "width": 700,
            "height": 468
        }
    }
}

The would give me the URL like this, /media/1005/image.jpgwidth=700&height=468&center=0.601973684210526,0.470454545454545&mode=crop

Where in V8 i get this URL, /media/rikf2vfz/image.jpg?width=700&height=468

So it does not parse the center or mode parameters which results in some strange images 😢 And the editor does not work properly, it stretches the preview image inside Umbraco

Bug summary

So the config section in an grid editor does get ignored and the preview image inside the editor looks either stretched or funky because of what i guess is the missing "mode".

Specifics

I'm using Umbraco 8.0.0, and Chrome 72.0.3626.121 and have tested in other browsers aswell

Steps to reproduce

Insert this in the grid.editor.config.js file or in an package,

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

Then try to use the editor in the grid

Expected result

I did expect a result like this,

Actual result

But i got this 😢

[nul800sebastiaan]

Hmm, looks like a bug indeed!

[AndersBrohus]

If nobody takes this before i have time, then i will try debug this and see what's happening and if i can fix it 😄

[AndersBrohus]

Okay, so i have debugged a little to find the problem..

In the this file, "Umbraco.Web.UI.Client\src\views\propertyeditors\grid\editors\media.controller.js", the scope sets an variable called "focalPoint" if the selected image has it, but even trough the images should have an focalPoint since it has a "cropSize", then it's something deeper then the grid editor file..

So it must be inside the "Umbraco.Web.UI.Client\src\views\common\infiniteeditors\mediapicker\mediapicker.controller.js" file, some where the "

In the "\Umbraco.Web.UI.Client\src\views\common\infiniteeditors\mediapicker\mediapicker.html" file there is an umb-image like below, where the "target.focalPoint" is empty...

<umb-image-thumbnail center="target.focalPoint" src="target.url" height="{{cropSize.height}}" width="{{cropSize.width}}"
                            max-size="400">
                        </umb-image-thumbnail>

So it must somehow be something with the "target"...

[AndersBrohus]

@nul800sebastiaan - I kinda have the same problem with Umbraco 7.14, because the focal point on the rendered image is wrong.. :(

[lassemoldrup]

Hey, any updates on this issue?

[umbrabot]

Hiya @AndersBrohus,

Just wanted to let you know that we noticed that this issue got a bit stale and might not be relevant any more.

We will close this issue for now but we're happy to open it up again if you think it's still relevant (for example: it's a feature request that's not yet implemented, or it's a bug that's not yet been fixed).

To open it this issue up again, you can write @umbrabot still relevant in a new comment as the first line. It would be super helpful for us if on the next line you could let us know why you think it's still relevant.

For example:

@umbrabot still relevant This bug can still be reproduced in version x.y.z

This will reopen the issue in the next few hours.

Thanks, from your friendly Umbraco GitHub bot :robot: :slightly_smiling_face: