CODEWITHSUNDEEP
cssasp.netumbraco7
ghost1349
ghost1349

Reputation: 83

Library.GetMediaById Umbraco Returning Weird String

I am trying to display images in a carousel on my Umbraco from a macro and I am using Library.GetMediaById(child.picture). Here is my code:

        @foreach (var child in slider.Children.Where("Visible"))
        {
            var background = Library.MediaById(child.picture);

            if (i == 0)
            {
                <div id="@i" class="item active" data-id="@i" style="background-image: url(@background.UmbracoFile)">

                </div>
            }
            else
            {
                <div id="@i" class="item" data-id="@i" style="background-image: url(@background.UmbracoFile)">

                </div>
            }

        i++;
        }

However when I do this instead of getting <div id="1" class="item" data-id="1" style="background-image: url('/media/1007/slide-2.png')"></div> like I should I am getting a bunch of extra stuff:

<div id="1" class="item" data-id="1" style="background-image: url({src: '/media/1007/slide-2.png', crops: []})"></div>

How do I just get that media item url and not all the extra stuff?

BTW I am using Umbraco 7.4

Upvotes: 0

Views: 284

Answers (2)

elolos
elolos

Reputation: 4450

If you are using Umbraco 7 or later, I strongly recommend using the new APIs to retrieve property values and content or media nodes, rather than using the Library.MediaById method which is now obsolete.

If you prefer a dynamic view model, you can use the DynamicPublishedContent API, which lets you write dynamic queries using the @CurrentPage model. So your example would be:

@foreach (var child in CurrentPage.AncestorOrSelf(1).Children.Where("isVisible"))
{
    var backgroundPicture = Umbraco.Media(child.Picture); //assuming an image property on child
     var backgroundPictureUrl = picture.Url;
     // your markup here
}

If you instead prefer a strongly typed model, you can use the IPublishedContent API. Please bear in mind that your view must inherit from a suitable type, such as Umbraco.Web.Mvc.UmbracoTemplatePage.

@foreach (var child in Model.AncestorOrSelf(1).Children().Where(c => c.IsVisible))
{
     var backgroundPicture = Umbraco.TypedMedia(child.GetPropertyValue<int>("picture");
     var backgroupdPictureUrl = backgroundPicture.Url;
     // your markup here
}

Also, from your example I'm suspecting that you may be using an image cropper property to store the background image, in which case the property will have a json (JObject) value rather than an int corresponding to the media Id.

In this case, the code retrieving the picture property needs to be adapted, have a look at the documentation for image cropper to see the different ways you can get the image url depending on whether you've specified crops and/or a focal point. As an example, if you're using the dynamic API and you're only interested in the image URL, use the following:

<div style="background-image: url('@child.picture.src')">

Upvotes: 1

ghost1349
ghost1349

Reputation: 83

So the way I got around this was to, make a partial instead of a macro because partials inherit Umbraco.Web.Mvc.UmbracoTemplatePage so then I could use Umbraco.Media() instead. Here is the working code in case anyone comes across this and needs help:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{

 var root = Model.Content.AncestorOrSelf(1);

 int i = 0;
}


<div class="container">
  <div id="photo-carousel" class="carousel slide">
    <div class="carousel-inner">
        @foreach (var child in root.Children().Where("naviHide == true"))
        {
            if (child.DocumentTypeAlias.Equals("slider"))
            {
                foreach (var picture in child.Children.Where("naviHide != true"))
                {
                    var background = Umbraco.Media(picture.GetPropertyValue("picture"));

                    if (i == 0)
                    {
                        <div id="@i" class="item active" data-id="@i" style="background-image: url('@background.Url')">

                        </div>
                    }
                    else
                    {
                        <div id="@i" class="item" data-id="@i" style="background-image: url('@background.Url')">

                        </div>
                    }
                    i++;
                }
            }

        }
    </div>

    <a class="carousel-control left" href="#photo-carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right" href="#photo-carousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
   </div>
  </div>

Upvotes: 0

Related Questions