media id conversion to url

Stefan Turcanu 8 posts 101 karma points

Apr 24, 2019 @ 13:52

Umbraco 7

Hey there!

Been having a hard time cracking this, after trying every possible link on this forum & google results, including the official docs. Maybe I'm missing something...

All information is retrieved properly except for media Url for the article box, I'm getting the ID, printed both in data-background upon inspection as well as in the badge. Badge turns red when mediaId cannot be read or is not defined (in the case of demo course 2 it is not defined).

Running u7.14.

Here's the view

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.Courses>
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.Course>
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
  Layout = "MasterMembers.cshtml";
  var courseList = Model.Content.Children<Course>();
}
<!-- START main-content -->
<div class="main-content">
  <section class="section">
    <div class="section-header">
      <h1>@Umbraco.Field("pageName")</h1>
    </div>
    <div class="row">
    <!-- START courseList -->
    @{
      foreach (Course c in courseList)
      {
        if (c.UlmsCourseVisibility.ToString() == "Published")
        {
            var courseHasImage = @c.UlmsCourseImage;

            <div class="col-12 col-md-4 col-lg-4">
                <article class="article article-style-c">
                  <div class="article-header">
                    @if (courseHasImage != null)
                    {
                        <div class="article-image" data-background="@c.UlmsCourseImage"></div>
                        <div class="article-badge">
                            <div class="article-badge-item bg-info"><i class="fas fa-fire"></i> Image ID @c.UlmsCourseImage </div>
                        </div>
                    }
                    else
                    {
                        <div class="article-image" data-background="httpum://picsum.photos/500/200"></div>
                        <div class="article-badge">
                            <div class="article-badge-item bg-danger"><i class="fas fa-fire"></i> Image ID NOT FOUND </div>
                        </div>
                    }
                  </div>

                  <div class="article-details">
                    <div class="article-title">
                      <h2><a href="@c.Url">@c.UlmsCourseFullTitle</a></h2>
                    </div>
                    <p>@c.UlmsCourseSummary</p>

                    <!--
                    <div class="article-user">
                        <img alt="image" src="../assets/img/avatar/avatar-1.png">
                        <div class="article-user-details">
                            <div class="user-detail-name">
                                <a href="#">User Usersen</a>
                            </div>
                            <div class="text-job">Web Developer</div>
                        </div>
                    </div>-->

                  </div>
                </article>
            </div>
        }
        else
        {
          @Html.Partial("_ContentNotFound")
        }
      }
    }
    <!-- ENd courseList -->

    </div>
  </section>
</div>
<!-- END main-content -->

Here's a screenshot

enter image description here

Also here's the doctype setup

enter image description here

Copy Link

Rhys Hamilton 140 posts 942 karma points

Apr 24, 2019 @ 14:00

It appears that your property c.UlmsCourseImage contains only the id of the media item. In this respect, it isn't a media object - but rather a plain int.

In order to get the media URL, you'll need to use something like Umbraco.TypedMedia to retrieve the actual media item using the id. From there, you'll be able to access additional properties such as .Name and .Url

Something like the following should hopefully work:

 <div class="article-image" data-background="@Umbraco.TypedMedia(c.UlmsCourseImage).Url"></div>

Copy Link

Stefan Turcanu 8 posts 101 karma points

Apr 24, 2019 @ 14:04

Hi Rhys!

Thanks for your quick reply. Tried this and results into a server error

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Am I lacking using or inherits statements?

Copy Link

Rhys Hamilton 140 posts 942 karma points

Apr 24, 2019 @ 14:25

It looks to me like you're getting a null exception, which might indicate that the c.UlmsCourseImage is empty.

When you implemented the following:

<div class="article-image" data-background="@Umbraco.TypedMedia(c.UlmsCourseImage).Url"></div>

Did you only apply this within the if statement?

Copy Link

Stefan Turcanu 8 posts 101 karma points

Apr 24, 2019 @ 14:31

Yes as it's the only property not being retrieved. I'm a total beginner so yeah, for sure some things are not very obvious to me :D

Copy Link

Stefan Turcanu 8 posts 101 karma points

Apr 24, 2019 @ 14:38

Changed the following:

<div class="article-image" data-background="@c.UlmsCourseImage">

to

<div class="article-image" data-background="@courseHasImage.Url">

and background url changred from "1296" to "background-image: url("/media/1004/mel-233281-unsplash.jpg");

yet still not a full path

&& updated media with freshly uploaded image, mediaId change to a corresponding one. So querying seems to be working fine.

Copy Link

Rhys Hamilton 140 posts 942 karma points

Apr 24, 2019 @ 14:46

Ah, that makes sense then - it looks like c.UlmsCourseImage is returning a media object afterall (my mistake!).

In which case, you won't need to turn it into a media object, so you can ignore the Umbraco.TypedMedia stuff.

Just to clarify then, does your image render properly now?

The .Url will give the relative path, so is there any particular reason why you need the absolute path?

Copy Link

Stefan Turcanu 8 posts 101 karma points

Apr 24, 2019 @ 14:53

So it seems that the solution indeed to try with a newly uploaded media file. Though it could retrieve the mediaId from the db, it didn't update for whatever reason.

The solution was to change c.UlmsCourseImage.Url to courseHasImage.Url plus var courseHasImage = c.UlmsCourseImage;

enter image description here

Copy Link

Rhys Hamilton 140 posts 942 karma points

Apr 24, 2019 @ 14:55

I'm glad everything is working now! #h5yr

Copy Link

Stefan Turcanu 8 posts 101 karma points

Apr 24, 2019 @ 15:03

Many thanks for your help! The solution came through thanks to your assistance 🙌

Copy Link

Stefan Turcanu 8 posts 101 karma points

Apr 24, 2019 @ 15:00

To others in need:

this code worked

<!-- START courseList -->
@{
  foreach (Course c in courseList)
  {
    if (c.UlmsCourseVisibility.ToString() == "Published")
    {
        var courseHasImage = @c.UlmsCourseImage;

        <div class="col-12 col-md-4 col-lg-4">
            <article class="article article-style-c">
              <div class="article-header">
                @if (courseHasImage != null)
                {
                    <div class="article-image" data-background="@courseHasImage.Url"></div>


                    <div class="article-badge">
                        <div class="article-badge-item bg-info"><i class="fas fa-fire"></i> Image ID @c.UlmsCourseImage </div>
                    </div>

                }
                else
                {
                    <div class="article-image" data-background="httpum://picsum.photos/500/200"></div>
                    <div class="article-badge">
                        <div class="article-badge-item bg-danger"><i class="fas fa-fire"></i> Image ID NOT FOUND </div>
                    </div>
                }
              </div>

              <div class="article-details">
                <div class="article-title">
                  <h2><a href="@c.Url">@c.UlmsCourseFullTitle</a></h2>
                </div>
                <p>@c.UlmsCourseSummary</p>

                <!--
                <div class="article-user">
                    <img alt="image" src="../assets/img/avatar/avatar-1.png">
                    <div class="article-user-details">
                        <div class="user-detail-name">
                            <a href="#">User Usersen</a>
                        </div>
                        <div class="text-job">Web Developer</div>
                    </div>
                </div>-->

              </div>
            </article>
        </div>
    }
    else
    {
      @Html.Partial("_ContentNotFound")
    }
  }
}
<!-- End courseList -->

TIP

when in doubt freshen up your media files with new ones ;)

enter image description here

Copy Link

is working on a reply...

Flag this post as spam?

Media Id conversion to Url