how to crop images within grid layout

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

John Churchley 272 posts 1258 karma points c-trib

Mar 17, 2015 @ 16:32

0

How to crop images within Grid Layout

Hi, does anyone have any thoughts on how you could use the image processor within the grid layout?

Looking at the View/Partials/Grid/Editors it appears like there could be an option?

My only way around this would be to create different Editors for each image size variation.

Copy Link
Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib

Mar 17, 2015 @ 17:26

0

After selecting an image with the media picker on the grid you can crop the selected image. Is that what you want?

Jeroen

Copy Link
John Churchley 272 posts 1258 karma points c-trib

Mar 17, 2015 @ 17:30

0

Hi Jeroen do you have a screen shot of what you mean?

Thank you

Copy Link
Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib

Mar 17, 2015 @ 17:37

1

1. Choose the image option on the grid.

2. You can select an image with the media picker.

3. After selecting the image you choose a focal point for the crop.

Jeroen

Copy Link
John Churchley 272 posts 1258 karma points c-trib

Mar 17, 2015 @ 18:19

0

I'm guessing I avoid using the @Model.Content.GetGridHtml("propertyname) method and manipulate it by getting the JSON string Model.Content.GetPropertyValue("propertyname")?

Copy Link
John Churchley 272 posts 1258 karma points c-trib

Mar 20, 2015 @ 12:01

0

Hi Jeroen thanks for your reply. I've managed to get the Media id and have the focal point positions how would I use imageprocessor combine them to crop the image to as size to which either is closest (width/height) and in relation to focal point?

Thanks

My attempt so far is

[email protected],0,@control.value.focalPoint.top,0&cropmode=percentage&width=350&height=179

Copy Link
simon kerr 31 posts 85 karma points

Aug 28, 2015 @ 14:52
102
in the grid.editors.config.js file you can add different image configurations and that allows editors to pick which image size they want for the correct purpose. The media.cshtml render page is looking for a config object with a size in. You can define this config in the grid.editors.config.js file.
```
{
    "name": "Thumbnail Image",
    "alias": "media",
    "view": "media",
    "icon": "icon-picture",
    "config": {
      "size": {
        "width": 150,
      "height": 150
      }
    }
},
```
Or you could change the media.cshtml render file to look for a crop alias.
Copy Link
Harnam Chana 2 posts 72 karma points

Dec 31, 2015 @ 12:19

0

Hi Simon Kerr,

Thanks for the reply, it has really helped... I was wondering if you could share a quick example on how to use media.cshtml file to render a crop alias?

Thanks

Copy Link
Rune Hem Strand 147 posts 911 karma points hq c-trib

Dec 31, 2015 @ 13:37
0
Hi Harnam, you shouldn't use grid.editors.config but instead make your customized editors in a package manifest as per the documentation.

When the size is defined it will automatically be rendered using just using the normal media.cshtml.

I put this in /App_Plugins/Grid/package.manifest (You can name the sub folder whatever you want)
```
    {
        "gridEditors": [
            {
                "name": "Thumbnail Image",
                "alias": "thumbImage",
                "view": "media",
                "icon": "icon-picture",
                "config": {
                    "size": 
                    {
                        "width": 200,
                        "height": 200
                    }
                }
            }
        ]
    }
```
and this is then rendred on the page <img src="/media/1002/late.jpg?width=200&height=200&center=0.29,0.740088105726872&mode=crop">

Happy New Year :)
Rune
Copy Link
Craig100 1136 posts 2523 karma points c-trib

Mar 24, 2017 @ 14:46

0

Hi Rune,

Just tried adding a package.manifest as your example and don't see anything appearing anywhere in the grid settings panes or when adding an image, or in the dataType. I've read the docs, think I've satisfied all requirements and don't have any syntax errors. Where should I see whatever it is you see to effect the size change?

Thanks.

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?