Display image on page

Vote:
 

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();
}

#85512
Apr 28, 2014 21:22
Vote:
 

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.

#85513
Edited, Apr 28, 2014 22:00
Vote:
 

You can use the UrlResolver class as well:

http://world.episerver.com/Documentation/Class-library/?documentId=cms/7.5/33882e0f-0ae9-2457-f421-7199be92578d

#85516
Apr 28, 2014 22:55
Vote:
 

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?

#85587
Apr 29, 2014 20:38
Vote:
 

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

#85588
Apr 29, 2014 20:44
Vote:
 

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)

#85589
Apr 29, 2014 21:28
Vote:
 

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.

#85590
Apr 29, 2014 22:10
Vote:
 

I think you should try to do like this instead:

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

 

#85594
Apr 29, 2014 22:21
Vote:
 

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

Is this really suppose to be this hard? :/

#85634
Apr 30, 2014 20:30
Vote:
 

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

#85636
Apr 30, 2014 20:59
Vote:
 

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

http://tedgustaf.com/blog/2014/4/render-image-properties-in-episerver-75/

#85637
Apr 30, 2014 21:04
Vote:
 

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?

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

    

#85642
Edited, May 01, 2014 4:28
Vote:
 

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

/Views/Shared/%3C%25=UrlResolver.Current.GetUrl(CurrentPage.ImagePropertyName)%25%3E

#85646
May 01, 2014 5:22
Vote:
 

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.

#85658
May 01, 2014 15:44
Vote:
 

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; }

    }

}

#85674
May 01, 2014 18:18
Vote:
 

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);

#85675
May 01, 2014 18:38
Vote:
 

Out of curiousity, What does you StartPage Model Look Like

#85676
May 01, 2014 18:39
Vote:
 

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; }

#85677
May 01, 2014 18:55
Vote:
 

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;}

#85678
May 01, 2014 19:24
Vote:
 

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!

#85695
May 02, 2014 10:56
Vote:
 

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.

#85786
May 05, 2014 19:55
Vote:
 

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");



#86725
May 29, 2014 4:56
Vote:
 
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;
#86728
May 29, 2014 5:42
Vote:
 

Thanks again, Valdis!

#86741
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.