Try our conversational search powered by Generative AI!

Render image properties with the PropertyFor helper


I have a page type property called "Portrait" which is of type Url with an image UI hint:

public virtual Url Portrait { get; set; }


If I render this property with the PropertyFor helper method, the URL will be rendered as a link - not as an image.


I want the property to be rendered as an image (an <img> tag) which can be clicked in OPE mode to select an image. Also, unless in OPE mode, I don't want anything rendered if the property hasn't been set.

I could do something like this to get OPE support for the <img> tag:

<img src="@Model.CurrentPage.Portrait" @Html.EditAttributes(x => x.CurrentPage.Portrait) />

However, I'd also need to hide this if the property hasn't been set - unless in OPE mode... :/ In other words, quite a bit of code for something trivial.

Surely there's some clever way of rendering Url properties differently depending on which kind of URL it is?

What am I missing? :)

Feb 11, 2013 15:10

In the meantime, this is the (rather bloated) code from my view:

@if (Model.Portrait != null || PageEditing.PageIsInEditMode) 
    <img src="@Model.Portrait" alt="@Model.PageName" @Html.EditAttributes(p => p.Portrait) />


Edited, Feb 11, 2013 16:09


The reason for this is that EPiServer doesn't come with a specific display template for image urls, so it will use the Url.ascx for any kind of url property.

The best way to work around this issue is to add a display template named the same as the ui hint with the code for that specific property. In this case dropping an Image.ascx/cshtml into /Views/Shared/DisplayTemplates containing something like the code below should do the trick

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<EPiServer.Url>" %>
<%@ Import Namespace="EPiServer.Web.Mvc.Html" %>

<img src="@Url.PageUrl(Model.ToString())" />

Such a template will be included in future versions of EPiServer.


Per Gunsarfs

Feb 11, 2013 16:15

Ah, didn't realize there was a convention for UIHint-specific display templates! Thanks a lot, appreciate your help!

Feb 11, 2013 16:18

Yeah, that's the way you can differentiate rendering between properties whose value are of the same type. And since UIHint is a .NET thingy, and nothing we've invented, we can simply lean on built in functions in this case :)

Hopefully it should work pretty much straight forward. Let us know if you run into any issues.

Feb 11, 2013 16:24

Yeah, I should have realized that - I confused myself by looking for something EPiServer-specific so it didn't even strike me that MVC already has that mechanism in place! :/

Thanks again!

Feb 11, 2013 16:40
Edited, Feb 12, 2013 11:56
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* 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.