Hello!

Im trying to to use the GetCropUrl method on a series of images in a loop. I have created the crop on the imageMediaPicker data type. I am using umbraco 8.

Currently, the loop works fine without the crop. This is the razor code currently.

    @foreach (var item in selection.OrderBy(x => x.Value<string>("fullName")))
{
    modalInput++; 
     var profileImage = new Image(item.Value<IPublishedContent>("image"));

            <div class="e-item">
                <img src="@profileImage.Url" alt="@item.Name Profile picture">
                <h3>@item.Value("fullName")</h3>
                <p>
                @item.Value("jobTitle")
                </p>
                <a href="#" data-toggle="modal" data-target="#ambassadorModal-@modalInput">View more</a>
            </div>

}

So the above works fine. Now, however, i need to add a crop named "headshots" to the img tag. I have tried a few ways to combine the image URl and getCropUrl but to no avail.

I have seen another question in the forum regarding this. I tried the solution but this is still not working for me. The solution added the image value to a variable and then add the crop method within the image tag. When I try this, all that is rendered is an empty img tag. Here is the example = https://our.umbraco.com/forum/using-umbraco-and-getting-started/95990-get-media-picker-id-in-foreach-loop

    @foreach (var item in selection.OrderBy(x => x.Value<string>("fullName")))
{
    modalInput++; 
     var profileImage = item.Value<IPublishedContent>("image");



            <div class="e-item">


                <img src="@profileImage.GetCropUrl("headshots")" />

                <h3>@item.Value("fullName")</h3>
                <p>
                @item.Value("jobTitle")
                </p>
                <a href="#" data-toggle="modal" data-target="#ambassadorModal-@modalInput">View more</a>
            </div>

}

Thanks in advance!