Display Image from Media Library in Umbraco 7

Question

This should be something embarrassingly simple, but I can't get it to work: I'd simply like to display an image that was uploaded to the Umbraco Media Library (Umbraco 7.1.1) within a Partial View template. The code is

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{   
    var imgNode = CurrentPage.BannerBackgroundImage;
    var imgUrl = umbraco.library.NiceUrl(imgNode);
    <div id="banner-wrapper" style="background: url('@imgUrl') center center no-repeat;">
        <!-- some irrelevant content -->
    </div>
}

where BannerBackgroundImage is a custom property of the page. When this is displayed, however, the @imgUrl gets replaced with #.

Other alternatives that I've tried are multiple Media Picker images, how to display a Media Picker image, get image from media with Razor, and display image from Media Picker, to name but a few.

I'd really appreciate if somebody could help me with what I believe is a rookie question!

Hayfield

Answer 1

I found this way easy and clean:

@if (CurrentPage.Image != null && !(CurrentPage.Image is Umbraco.Core.Dynamics.DynamicNull))
{
    var m = Umbraco.Media(CurrentPage.Image);

    <img src="@m.Url" alt="@m.UrlName" />
}

I hope that it helps somebody else

Mordancy

+1 After alot of searching and trying, this was the only answer that worked for me. – Machree

what I can't understand is, why doesn't the media picker already do this? Is there a good reason not to have a different function that outputs the ID as opposed to a call that renders the URL of the desired image? – Cell

WHERE M = WHAT?! – Callant

Answer 2

Thanks Jesus Mogollon,

I've collapsed that to:

<img src="@Umbraco.Media(CurrentPage.headerBackgroundImage).Url" alt="">

I've set the file to mandatory so hopefully I wont need the if statement part.

Artwork

Answer 3

Having had such an unexpectedly hard time for something that I would have thought would be easy, this snipped worked for me.

@if (Model.Content.HasValue("OtherImages"))
{
   var otherImages = Model.Content.GetPropertyValue<List<IPublishedContent>>("OtherImages");
   foreach (var image in otherImages)
   {
      if (image != null)
      {
         <img src="@image.Url" alt="@image.Name" class="img-responsive img-rounded"  />
      }
   }
}

Much of the other postings did not work for me, but I think that the API has changed a bit. I'm using Umbraco 7.6.1. I'm not sure whether the null check is necessary, but it certainly won't do any harm.

Peepul

Answer 4

This worked for me, from the Umbraco 6 Media docs, here

var bannerImage = Umbraco.TypedMedia(Model.Content.GetPropertyValue("plainImage"));

<div class="my-banner-wrapper" style="background-image: url(@bannerImage.GetPropertyValue("umbracoFile"));">
    <!-- some irrelevant content -->
</div>

Sagacious

Answer 5

Try this

@if (CurrentPage.Image != null && !(CurrentPage.Image is Umbraco.Core.Dynamics.DynamicNull))
{
    var m = Umbraco.Media((int)CurrentPage.Image);

    <img src="@m.Url" alt="@m.UrlName" />
}

note: You should cast CurrentPage.Image as int because of Umbraco.Media ambigous constructor

Sarita

Answer 6

 <img src="@Umbraco.Media(Convert.ToString(@Umbraco.Field("image"))).umbracoFile" alt="" />

Cahra

Please add some explanation to your answer to help the OP and others in understanding the code you posted. – Expellant

In answer is correct before give but its too long process.. first Umbraco.Field("Image") which is media picker in page and return id of that. another is same as syntax of img path....i just write in short. – Cahra

Answer 7

Inside the template

umbraco:Macro runat="server" language="cshtml"

img src="@Model.MediaById(Model.photo).umbracoFile" alt=""/

/umbraco:Macro

---Model.photo =photo is a alice name

Alonso

Answer 8

I entered this into the section above the doctype in the template or master being used.

@{
Layout = null;
var regionalPage = Umbraco.Content(this.CurrentPage.Id);
string manangerPhotoUrl = string.Format("https://assets.yourdomain.com{0}", @Umbraco.Media(regionalPage.managerPhoto).Url);
}

Then I added the variable holding the string value to my image source attribute in the markup.

<img class="img-responsive" src="@manangerPhotoUrl" />

Guava