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
    John Churchley
    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.

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    Mar 17, 2015 @ 17:26
    Jeroen Breuer
    0

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

    Jeroen

  • John Churchley 272 posts 1258 karma points c-trib
    Mar 17, 2015 @ 17:30
    John Churchley
    0

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

    Thank you

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    Mar 17, 2015 @ 17:37
    Jeroen Breuer
    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

  • John Churchley 272 posts 1258 karma points c-trib
    Mar 17, 2015 @ 18:19
    John Churchley
    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")? 

  • John Churchley 272 posts 1258 karma points c-trib
    Mar 20, 2015 @ 12:01
    John Churchley
    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

  • simon kerr 31 posts 85 karma points
    Aug 28, 2015 @ 14:52
    simon kerr
    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.

  • Harnam Chana 2 posts 72 karma points
    Dec 31, 2015 @ 12:19
    Harnam Chana
    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

  • Rune Hem Strand 147 posts 911 karma points hq c-trib
    Dec 31, 2015 @ 13:37
    Rune Hem Strand
    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&amp;height=200&amp;center=0.29,0.740088105726872&amp;mode=crop">

    Happy New Year :)
    Rune

  • Craig100 1136 posts 2522 karma points c-trib
    Mar 24, 2017 @ 14:46
    Craig100
    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.

Please Sign in or register to post replies

Write your reply to:

Draft