November Happy Hour will be moved to Thursday December 5th.
November Happy Hour will be moved to Thursday December 5th.
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) />
}
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
Ah, didn't realize there was a convention for UIHint-specific display templates! Thanks a lot, appreciate your help!
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.
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!
I have a page type property called "Portrait" which is of type Url with an image UI hint:
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? :)