SaaS CMS has officially launched! Learn more now.

Display image on page


I've just started out working in a new 7.5 project and was about to render the first image. The code seems to have changed and I suspect it has to do with the new ImageData class. Earlier I used the code below so what do I need to alter it to make it work?

PropertyData logoProp = startPage.Property["Logotype"];

if (logoProp != null && !logoProp.IsNull)
    logotype.ImageUrl = logoProp.Value.ToString();

Apr 28, 2014 21:22

Suppose you're using MVC.

You can use this code block in your view:

@if (!ContentReference.IsNullOrEmpty(Model.CurrentPage.PageImage))
    <img src="@Url.ContentUrl(Model.CurrentPage.PageImage)"/>


Where Model is PageViewModel<T>. You can install an Alloy MVC Sample Site using EPiServer Deployment Center which contans a lot of examples.

Edited, Apr 28, 2014 22:00

You can use the UrlResolver class as well:

Apr 28, 2014 22:55

No, this project is made in web forms at this point. I tried the UrlResolver.GetUrl() (sounded right) but I still get this strange image url like /views/shared/12 and 11 instead of the global/logotypes/logotype.png that I expected. What am I missing here?

Apr 29, 2014 20:38

I should add that the url is the same wether I use UrlResolver or not.

Apr 29, 2014 20:44

What type is logoProp?

This is how I render an image if my image property is a content reference:

img.src = UrlResolver.Current.GetUrl(StartPage.Logotype)

Apr 29, 2014 21:28

I tried it and logotype.ImageUrl = UrlResolver.Current.GetUrl(logoProp.Value.ToString()); renders "/Views/Shared/12".

logoProp is the a PropertyData, an instance of my Logotype property on my start page, and that property type is an ImageFile that inherits from ImageData.

Apr 29, 2014 22:10

I think you should try to do like this instead:

logotype.ImageUrl = UrlResolver.Current.GetUrl(logoProp);


Apr 29, 2014 22:21

I tried that and I get "cannot convert from 'EPiServer.Core.PropertyData' to 'EPiServer.Core.ContentReference'".

Is this really suppose to be this hard? :/

Apr 30, 2014 20:30

No it should not be that hard. Can you show the whole code for that page/control?

Apr 30, 2014 20:59

Look at this blog, should point you in the right direction.

Apr 30, 2014 21:04

My code looks the same as in the link you provided, I'm just not sure how to translate the MVC DisplayTemplate to web forms. In the case of UrlResolver.Current.GetUrl(logoProp) that you mentioned above, what property type is logoProp? GetUrl expects a ContentReference while I've got a PropertyData. How do I get a ContentReference from PageData?

May 01, 2014 4:04
<asp:Image runat="server" ImageUrl="<%=UrlResolver.Current.GetUrl(CurrentPage.ImagePropertyName)%>"/>
<img src="<%=UrlResolver.Current.GetUrl(CurrentPage.ImagePropertyName)"/>


Edited, May 01, 2014 4:28

I tried your suggestion, Joshua. It gave me this URL. Sooo strange...


May 01, 2014 5:22

Whats strange is where is the Views/Shared/ coming from?

Can you do me a favor, can you post your aspx and aspx.cs or .vb files.  That will help us all a bit more see whats going on.

May 01, 2014 15:44

Could it be because that's where I store the ascx file? It's my header for the page. Here's the code for it and below is my ImageFile.cs. What's interesting is that if I just use <episerver:property runat="server" property="Logotype" /> at least the url for it is correct and if I click the link I get to see the file. I should add that I can't use the markup to render it though because the logo is stored as a property on the start page so a reference in code behind is the way to go.

Here's the code. Not much to look at since it's in the middle of my testing, but the uncommented part is what renders the "views/shared/12" url. That's the code I've used in v 5-7 but it doesn't work in 7.5 for some reason...

publicpartialclassHeader : System.Web.UI.UserControl


        protected void Page_Load(object sender, EventArgs e)


            PageData startPage = DataFactory.Instance.GetPage(PageReference.StartPage);

            UrlResolver urlRes = new UrlResolver();


            //PropertyData logoProp = startPage.Property["Logotype"];

            //if (logoProp != null && !logoProp.IsNull)


            //    logotype.ImageUrl = UrlResolver.Current.GetUrl(logoProp);

            //    logotype.AlternateText = Page.Translate("/magazine/name");



            PropertyData headerProp = startPage.Property["CoverImage"];

            if (headerProp != null && !headerProp.IsNull)


                coverImage.ImageUrl = urlRes.GetUrl(headerProp.Value.ToString());

                coverImage.AlternateText = Page.Translate("/global/cover");




        new public PageBase Page




                return (PageBase)base.Page;






namespace BmEPi.Models.Media


    [ContentType(DisplayName ="Image", GUID ="0A89E464-56D4-449F-AEA8-2BF774AB8730", Description ="")]

    [MediaDescriptor(ExtensionString ="jpg,jpeg,jpe,gif,bmp,png,svg")]

    publicclassImageFile : ImageData





            Name = "Alternate text",

            Description = "Description of the image",

            GroupName = SystemTabNames.Content,

            Order = 1)]

        public virtual string Description { get; set; }



May 01, 2014 18:18

I think i see your problem. ImageFile is a type.  your concerting it to a string.  do this

Instead of This:

PropertyData headerProp = startPage.Property["CoverImage"];

Do this

var coverItem = startPage.GetPropertyValue<ContentReference>("CoverImage");

converImage.ImageUrl = UrlResolver.Current.GetUrl(coverItem)

This assumes ConverImage is a ContentReference in you StartPage Model
you can also do this .  StartPage startPage = DataFactory.Instance.Get<StartPage>(ContentReference.StartPage);
this will give you the property now so  you can just do     coverImage.ImageUrl = UrlResolver.Current.GetUrl(startPage.CoverImage);

May 01, 2014 18:38

Out of curiousity, What does you StartPage Model Look Like

May 01, 2014 18:39

Thank yoy, Joshua! It's finally working! I suspected it had something to do with a ContentReference but had no idea of how to actually use it. I owe you one!

Here's the two properties in the StartPage model:

[Display(Name = "Header", Description = "", GroupName = "SiteSettings")]
public virtual ContentReference CoverImage { get; set; }

[Display(Name = "Logotype", Description = "", GroupName = "SiteSettings")]
public virtual ContentReference Logotype { get; set; }

May 01, 2014 18:55

No Problem.  Glad You Got It To Work.  If you only want images to be selected, just a helpful hint, you can add allowed types.

[AllowedTypes(new [] {typeof(ImageFile)}]


public virtualContentReference Logotype{get;set;}

May 01, 2014 19:24

Good that it is working. This thread is going to be a help to others who will have the same problem. Good thread! 

Happy coding!

May 02, 2014 10:56

A, nice! Thanks again, Joshua!

Henrik: Yeah, it seems like there's not that much out there in web forms left. I'll convert it to MVC later on, just need to get this site out as soon as possible.

May 05, 2014 19:55

While on the subject, how do I get the file name from a contentreference? I can't find anything on this subject. To use the code from above, how would I go about getting the file name from this:

var coverItem = startPage.GetPropertyValue<ContentReference>("CoverImage");

May 29, 2014 4:56
var loader = ServiceLoactor.GetInstance<IContentLoader>();
var image = loader.Get<ImageFileMedia>(coverItem);
var fileName = image.Name;

it's possible to change name of the file (actually just a ordinary EPi content), better to check for value in address:

var fileName = image.URLSegment;
May 29, 2014 5:42

Thanks again, Valdis!

May 29, 2014 12:32
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.