imagecropper in list child pages of specific node umbraco 716 - Razor

Gísli Freyr Svavarsson 43 posts 126 karma points

Oct 01, 2014 @ 16:29

ImageCropper in list child-pages of specific Node umbraco 7.1.6

i'm having problems with the ImageCropper in umbraco 7.1.6, well maybe not the Cropper it self but the code displaying the cropped image.

I have a list of childpages from a specific node and in each of the childpages there's an imageCropper where I choose the image and the crop point. When I call for the image I get the json code affilliated with it but as soon as I try and GetCropUrl I get an empty string.

Here is my code, I hope someone can help me with this.

@inherits umbraco.MacroEngines.DynamicNodeContext

@{
    var startNodeID = Parameter.nodeID;
}

@if (startNodeID != null)
{
    @* Get the start node as a dynamic node *@
    var startNode = Library.NodeById(startNodeID);
    <div class="col-md-12 container">
        @if (startNode.Children.Where("Visible").Any())
        {
            <ul class="list-unstyled">
                @foreach (var page in startNode.Children.Where("Visible"))
                {
                    <li class="col-md-3">
                        @{
                            if (page.HasValue("employeeImage"))
                            {                                                           
                                <h2>URL: @page.employeeImage</h2>
                                @*var imgSrc = Model.MediaById(page.employeeImage);*@
                                <img src="@page.GetCropUrl("employeeImage", "employees")" />
                            }
                        }

                        <a href="mailto:@page.employeeEmail">@page.Name</a>
                    </li>
                }
            </ul>
        }
    </div>
}

mvh

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Oct 01, 2014 @ 18:28

Hi Gísli,

From the code that you have postet I can see that you are using the old DynamicNode Razor, and this it´s not possible to use in Umbraco 7.1.6 If you have used a partial view your top of your file would look like this.

@inherits UmbracoTemplatePage

If you are using partial view macros, the top of your file should look like this:

@inherits Umbraco.Web.Macros.PartialViewMacroPage

After that I think something like this should work for you:

@inherits Umbraco.Web.Macros.PartialViewMacroPage
    @{
        var startNodeID = Model.MacroParameters["nodeID"];
    }

@if (startNodeID != null)
{
    @* Get the start node as a dynamic node *@
    var startNode = Umbraco.Content(startNodeID);
    <div class="col-md-12 container">
        @if (startNode.Children.Where("Visible").Any())
        {
            <ul class="list-unstyled">
                @foreach (var page in startNode.Children.Where("Visible"))
                {
                    <li class="col-md-3">
                        @{
                            if (page.HasValue("employeeImage")){                                                           
                                <h2>URL: @page.employeeImage</h2>
                                <img src="@page.GetCropUrl("employeeImage", "employees")" />
                            }
                        }

                        <a href="mailto:@page.employeeEmail">@page.Name</a>
                    </li>
                }
            </ul>
        }
    </div>
}

In my example I use a partial view macro, if you want to use partai view the only thing that you should change should be the inherts linie.

Hope this helps,

/Dennis

Copy Link

Gísli Freyr Svavarsson 43 posts 126 karma points

Oct 02, 2014 @ 13:28

Thanks for the propt reply Dennis,

I had tried Partial View Macro as well but I guess I messed something up since it didn't work, But your code got me at least closer to the goal. So I used that along side this video tutorial https://www.youtube.com/watch?v=bQsvGmnYaUU. I had

I had to change some of the code probably because I'm using the media picker, but I got it to work for me ;)

Here's the final code that works for me if anybody needs it for reference:

@inherits Umbraco.Web.Macros.PartialViewMacroPage
    @{
        var startNodeID = Model.MacroParameters["nodeId"];
    }

@if (startNodeID != null)
{
    @* Get the start node as a dynamic node *@
    var startNode = Umbraco.Content(startNodeID);
    <div class="col-md-12 container">
        @if (startNode.Children.Where("Visible").Any())
        {
            <ul class="list-unstyled">
                @foreach (var page in startNode.Children.Where("Visible"))
                {
                    <li class="col-md-3">
                        @{
                            if (page.HasValue("employeeImage")){
                var employeeImages = Umbraco.Media(page.employeeImage);
                var imgUrl = @employeeImages.GetCropUrl("employees");

                <img src="@imgUrl" />
                            }
                        }

                        <a href="mailto:@page.employeeEmail">@page.Name</a>
                    </li>
                }
            </ul>
        }
    </div>
}

mvh

Gísli

Copy Link

is working on a reply...

Flag this post as spam?

ImageCropper in list child-pages of specific Node umbraco 7.1.6