imagecropper in list child pages of specific node umbraco 716

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

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

ImageCropper in list child-pages of specific Node umbraco 7.1.6