Rendering Image in epi server cms 7.5

Mattias Olsson

Vote:

Add a user control: ~/Views/Shared/DisplayTemplates/Image.ascx

If the image property is of type EPiServer.Url then this is what you need:

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

<img src="<%: Url.ContentUrl(Model) %>" alt="" />

Or if it's EPiServer.Core.ContentReference:

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

<img src="<%: Url.ContentUrl(Model) %>" alt="" />

Then in your view just use EPiServer:Property web control:

<EPiServer:Property PropertyName="NameOfImageProperty" runat="server" />

Oh, and you need to decorate your property with a UI hint:

[UIHint(UIHint.Image)]
public virtual ContentReference NameOfImageProperty { get; set; }

#120650

Edited, Apr 22, 2015 8:50

suresh davala

Vote:

<p>yes , i know but i want to code behind  code  supose  we want disply multiple pages data display on single page so i want to code for aspx.cs page</p>

#120651

Apr 22, 2015 9:00

suresh davala

Vote:

plase tell me guys urgent need

#120654

Apr 22, 2015 9:21

Henrik Fransas

Vote:

For multiple images use this multiple times:

<EPiServer:Property PropertyName="NameOfImageProperty" runat="server" />

Or explain more detail on what you are trying to do

#120660

Apr 22, 2015 11:05

suresh davala

Vote:

using System;using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

using EPiServer.SpecializedProperties;

using EPiServer.Core;

using EPiServer.DataAbstraction;

using EPiServer.Framework.DataAnnotations;

using EPiServer.Web;

using EPiServer.Web.WebControls;

using EpiserverCMS8.Models.Pages;using EPiServer.ServiceLocation;

using EPiServer.Web.Routing;

using System.Text;using EPiServer.Framework.Web;

namespace EpiserverCMS8

{

[TemplateDescriptor(Path = "~/Default.aspx")]

public partial class Default : EPiServer.TemplatePage<DefaultTemplate>

{
public string head, head2, Xtml, image;

public StringBuilder sb = new StringBuilder();

protected override void OnLoad(EventArgs e)

{
head = Convert.ToString(CurrentPage["Heading"]) ?? string.Empty;

head2 = Convert.ToString(CurrentPage["ShortDesc"]) ?? string.Empty;

image = Convert.ToString(CurrentPage["BannerImage2 "]) ?? string.Empty;

sb.Append("<div id=\"id1\"><h1>" + head + "</h1><h2>" + head2 + "</h2>" + Xtml + " <img src=" + image + " \" alt=\"\" /></div>");
}

}

Above code imgage property not working

i can write the code in page type

public virtual string Heading { get; set; }
public virtual string ShortDesc { get; set; }

[Display(Name = "Background Image")]
[UIHint(UIHint.Image)]
public virtual ContentReference BannerImage2 { get; set; }

heading and shortdesc property are working image property show url reference number like 762

so can u tell me how can write the code

#120662

Edited, Apr 22, 2015 11:19

Henrik Fransas

Vote:

<p>You can use it like Geta has done in their extension:</p> <p>https://github.com/Geta/EPi.Extensions/blob/master/Geta.EPi.Extensions/ContentReferenceExtensions.cs</p> <p></p> <pre class="brush:csharp;auto-links:false;toolbar:false" contenteditable="false"> /// <summary> /// Returns friendly URL for provided content reference. /// </summary> /// <param name="contentReference">Content reference for which to create friendly url.</param> /// <param name="includeHost">Mark if include host name in the url.</param> /// <param name="urlResolver">Optional UrlResolver instance.</param> /// <returns>String representation of URL for provided content reference.</returns> public static string GetFriendlyUrl(this ContentReference contentReference, bool includeHost = false, UrlResolver urlResolver = null) { if (contentReference.IsNullOrEmpty()) return string.Empty; if (urlResolver == null) { urlResolver = ServiceLocator.Current.GetInstance<UrlResolver>(); } var url = urlResolver.GetUrl(contentReference); if (!includeHost) { return url; } return url.GetExternalUrl(); }</pre> <p>So after you have created this extension method you could use it like this:</p> <p><strong>image = CCurrentPage.BannerImage2.GetFriendlyUrl</strong></p>

#120664

Apr 22, 2015 11:31

Henrik Fransas

Vote:

You can use it like Geta has done in their extension:

https://github.com/Geta/EPi.Extensions/blob/master/Geta.EPi.Extensions/ContentReferenceExtensions.cs

 /// <summary>
        ///     Returns friendly URL for provided content reference.
        /// </summary>
        /// <param name="contentReference">Content reference for which to create friendly url.</param>
        /// <param name="includeHost">Mark if include host name in the url.</param>
        /// <param name="urlResolver">Optional UrlResolver instance.</param>
        /// <returns>String representation of URL for provided content reference.</returns>
        public static string GetFriendlyUrl(this ContentReference contentReference, bool includeHost = false, UrlResolver urlResolver = null)
        {
            if (contentReference.IsNullOrEmpty()) return string.Empty;

            if (urlResolver == null)
            {
                urlResolver = ServiceLocator.Current.GetInstance<UrlResolver>();
            }

            var url = urlResolver.GetUrl(contentReference);

            if (!includeHost)
            {
                return url;
            }

            return url.GetExternalUrl();
        }

So after you have created this extension method you could use it like this:

image = CurrentPage.BannerImage2.GetFriendlyUrl(false,null)

#120665

Apr 22, 2015 11:33

suresh davala

Vote:

namespace EpiserverCMS8
{
[TemplateDescriptor(Path = "~/Default.aspx")]

public partial class Default : EPiServer.TemplatePage<DefaultTemplate>
{

public string head, head2, Xtml, image;
public StringBuilder sb = new StringBuilder();
public static string GetFriendlyUrl(this ContentReference contentReference, bool includeHost = false, UrlResolver urlResolver = null)
{
if (contentReference.IsNullOrEmpty())
return string.Empty;

if (urlResolver == null)
{
urlResolver = ServiceLocator.Current.GetInstance<UrlResolver>();
}

var url = urlResolver.GetUrl(BanerImage2);

if (!includeHost)
{
return url;
}

return url.GetExternalUrl();
}
protected override void OnLoad(EventArgs e)
{

head = Convert.ToString(CurrentPage["Heading"]) ?? string.Empty;
head2 = Convert.ToString(CurrentPage["ShortDesc"]) ?? string.Empty;
//image = Convert.ToString(CurrentPage["Image"]) ?? string.Empty;
image = CurrentPage.BannerImage2.GetFriendlyUrl(false, null);
sb.Append("<div id=\"id1\"><h1>" + head + "</h1><h2>" + head2 + "</h2>" + Xtml + " <img src=" + image + " \" alt=\"\" /></div>");

}

}
}

not exist the bold text words will error occurs

#120667

Apr 22, 2015 11:46

Henrik Fransas

Vote:

Did you create the extension method I gave code for in the example?

#120668

Apr 22, 2015 11:54

suresh davala

Vote:

brother i want to display image using page type in page template

so shell u give the code

#120669

Apr 22, 2015 12:00

Henrik Fransas

Vote:

Brother I have given you all the code you need.

You just need to implement it yourself.

If you do not know how to do it EPiServer are doing courses even in India so tell your company that you wan't to attend one of those.

#120670

Apr 22, 2015 12:04

suresh davala

Vote:

thanks but your code not working

#120674

Apr 22, 2015 12:48

Henrik Fransas

Vote:

Have you created this?

/// <summary>
       ///     Returns friendly URL for provided content reference.
       /// </summary>
       /// <param name="contentReference">Content reference for which to create friendly url.</param>
       /// <param name="includeHost">Mark if include host name in the url.</param>
       /// <param name="urlResolver">Optional UrlResolver instance.</param>
       /// <returns>String representation of URL for provided content reference.</returns>
       public static string GetFriendlyUrl(this ContentReference contentReference, bool includeHost = false, UrlResolver urlResolver = null)
       {
           if (contentReference.IsNullOrEmpty()) return string.Empty;
 
           if (urlResolver == null)
           {
               urlResolver = ServiceLocator.Current.GetInstance<UrlResolver>();
           }
 
           var url = urlResolver.GetUrl(contentReference);
 
           if (!includeHost)
           {
               return url;
           }
 
           return url.GetExternalUrl();
       }

#120677

Apr 22, 2015 12:53

Erik Nordin Wahlberg

Vote:

The GetFriendlyURL-method relies on other extension-methods as well. Would suggest you to download the whole file/project.

#120684

Apr 22, 2015 13:36

Henrik Fransas

Vote:

Ahh, that is true Erik, I missed that part, sorry for that!

Surech, do like Erik says and use the whole package, it is great!

#120685

Apr 22, 2015 13:38

suresh davala

Vote:

thanks henrik and erik

#120688

Apr 22, 2015 14:08

Dejan Caric

Vote:

@suresh davala, in case you don't want to download extensions

If you've defined image property like Mattias suggested:

[UIHint(UIHint.Image)]
public virtual ContentReference SampleImage { get; set; }

You can use the following code in backend:

protected override void OnLoad(EventArgs e)
{
    string url = EPiServer.Web.Mvc.Html.UrlExtensions.ContentUrl(null, CurrentPage.SampleImage);
	...
}

But of course, cleaner approach would be to write your own extension or use Geta's extensions as Erik and Henrik have suggested.

#120689

Edited, Apr 22, 2015 14:08

suresh davala

Vote:

<p>thanq very much dejan </p>

#120693

Apr 22, 2015 14:18