Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more
AI OnAI Off
Render image properties with the PropertyFor helper
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
Hi
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.
Regards
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
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.
I have a page type property called "Portrait" which is of type Url with an image UI hint:
[UIHint(UIHint.Image)] 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:
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? :)