render dynamic image from media using getcropurl

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

Paul Griffiths 370 posts 1021 karma points

Apr 20, 2016 @ 14:15

Hi All,

I have a milestone doctype that has a media picker dataType property called 'milestoneImage' defined on it.

I am trying to get the image using .GetCropUrl and defining the height and width e.g. .GetCropUrl(200, 200) but not having much luck so im obviously missing something.

Here is my code (milestones are direct children of the current model)

//get the milestones
    var milestones = @Model.Content.Children();

  @foreach (var milestone in milestones)
                    {


var image = Umbraco.Media(milestone.GetPropertyValue<int>("milestoneImage"));

                        <li>
                            <div class="timeline-image">
                                <img class="img-circle img-responsive" src="@(milestone.HasValue("milestoneImage") ? image.GetCropUrl(200, 200) : "")" alt="">
                            </div>
                            <div class="timeline-panel">
                                <div class="timeline-heading">
                                    <h4>@milestone.GetPropertyValue("milestonePeriod")</h4>
                                    <h4 class="subheading">@milestone.GetPropertyValue("milestoneHeading")</h4>
                                </div>
                                <div class="timeline-body">
                                    @milestone.GetPropertyValue("mainContent")
                                </div>
                            </div>
                        </li><!-- /timeline item -->

I can see that the dynamic published object is created for image but im unsure how to call the cropUrl to render it as the image source.

enter image description here

Can anyone help/explain please?

Copy Link

Marc Goodson 2155 posts 14408 karma points MVP 9x c-trib

Apr 20, 2016 @ 19:53
100
Hi Paul

Would this work for you ?
```
 var image = Umbraco.TypedMedia(milestone.GetPropertyValue<int>("milestoneImage"));
```
and then in your src attribute
```
src="@(image!=null ? image.GetCropUrl(width: 200, height: 200) : "")"
```
ie I think it could be how you are passing the width and height to the GetCropurl() method:

more info here: https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/image-cropper
Copy Link
Paul Seal 524 posts 2889 karma points MVP 7x c-trib

Apr 21, 2016 @ 07:22
1
Hi paul I would bypass that and just add the querystring on the end of the imageurl myself like this.
```
    var mediaItem = Umbraco.Media(milestone.milestoneImage);
    string imgUrl = mediaItem.umbracoFile;
    <img src="@(imgUrl)?width=200&height=200&mode=crop&anchor=center" />
```
Copy Link

Paul Griffiths 370 posts 1021 karma points

Apr 21, 2016 @ 08:50

Hi Both,

Thanks for your responses regarding this. I will certainly give your suggestions a go and see how i get on :).

In the meantime i got it working using the following 'test' code (poorly names vars)

//get the milestones
    var milestones = @Model.Content.Children();

  @foreach (var milestone in milestones)
                    {


var image = Umbraco.Media(milestone.GetPropertyValue<int>("milestoneImage"));
var image2 = Umbraco.TypedMedia((int)image.Id); <-----------------

                        <li>
                            <div class="timeline-image">
                                <img class="img-circle img-responsive" src="@(milestone.HasValue("milestoneImage") ? image2.GetCropUrl(200, 200) : "")" alt="">
                            </div>
                            <div class="timeline-panel">
                                <div class="timeline-heading">
                                    <h4>@milestone.GetPropertyValue("milestonePeriod")</h4>
                                    <h4 class="subheading">@milestone.GetPropertyValue("milestoneHeading")</h4>
                                </div>
                                <div class="timeline-body">
                                    @milestone.GetPropertyValue("mainContent")
                                </div>
                            </div>
                        </li><!-- /timeline item -->

Outcome of the above code :)

enter image description here

There will obviously be a better way to do this and i believe my understanding is not quite there with it. Maybe you can shorten down what i have done and put it into one statement

Many thanks Paul

Copy Link

is working on a reply...

Please Sign in or register to post replies