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.
You can use the UrlResolver class as well:
http://world.episerver.com/Documentation/Class-library/?documentId=cms/7.5/33882e0f-0ae9-2457-f421-7199be92578d
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?
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)
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.
I think you should try to do like this instead:
logotype.ImageUrl = UrlResolver.Current.GetUrl(logoProp);
I tried that and I get "cannot convert from 'EPiServer.Core.PropertyData' to 'EPiServer.Core.ContentReference'".
Is this really suppose to be this hard? :/
No it should not be that hard. Can you show the whole code for that page/control?
Look at this blog, should point you in the right direction.
http://tedgustaf.com/blog/2014/4/render-image-properties-in-episerver-75/
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?
<asp:Image runat="server" ImageUrl="<%=UrlResolver.Current.GetUrl(CurrentPage.ImagePropertyName)%>"/>
<img src="<%=UrlResolver.Current.GetUrl(CurrentPage.ImagePropertyName)"/>
I tried your suggestion, Joshua. It gave me this URL. Sooo strange...
/Views/Shared/%3C%25=UrlResolver.Current.GetUrl(CurrentPage.ImagePropertyName)%25%3E
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.
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
{
get
{
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
{
[CultureSpecific]
[Editable(true)]
[Display(
Name = "Alternate text",
Description = "Description of the image",
GroupName = SystemTabNames.Content,
Order = 1)]
public virtual string Description { get; set; }
}
}
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);
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:
[UIHint(UIHint.MediaFile)]
[CultureSpecific]
[Display(Name = "Header", Description = "", GroupName = "SiteSettings")]
public virtual ContentReference CoverImage { get; set; }
[UIHint(UIHint.MediaFile)]
[CultureSpecific]
[Display(Name = "Logotype", Description = "", GroupName = "SiteSettings")]
public virtual ContentReference Logotype { get; set; }
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)}]
[UIHint(UIHint.Image)]
public virtualContentReference Logotype{get;set;}
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!
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.
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");
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;
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();
}