How To Get The Url For An Image In Episerver

When you create new sites, allowing content editors to add images to your site is kind of like building websites 101. Adding images in Episerver is, handily, equally as easy, and you can get up and running very quickly.

Defining A Property

The first thing you need to do is define an image property either on a page, or, a block. This property is the thing that the content editor will see. Out of the box, this is a standard image file selector.

using System.ComponentModel.DataAnnotations;
using EPiServer.Core;
using EPiServer.DataAnnotations;
using EPiServer.Shell.ObjectEditing;
using EPiServer.DataAbstraction;
using EPiServer.Web;
namespace JonDJones.Com.Core.Pages
{
[ContentType(
DisplayName = "Start Page",
GUID = "6671aa96-0a1b-4618-88e3-c98e1a78dcb4",
Description = "Start Page",
GroupName = "Standard")]
public class StartPage : GlobalBasePage
{
[UIHint(UIHint.Image)]
[Display(Name = "MainLogo",
Description = "Main Sites Logo",
GroupName = SystemTabNames.Content)]
public virtual ContentReference MainLogo { get; set; }
}
}

Note, I’ve set the UIHint attribute on the MainLogo property. This tells Episerver that this reference is an image. It’s this attribute that will display the Episerver image picker to the user, instead of the generic media picker.

Displaying an Episerver Friendly Image Url in Code

var urlHelper = ServiceLocator.Current.GetInstance<UrlHelper>();
var friendlyUrl = urlHelper.ContentUrl(currentPage.MainLogo);

To get the friendly Url of an image is pretty easy. In the older days of Episerver you used the UrlResolver, but, this was a static singleton class that couldn’t be easy injected. If you want your code to be unit testable, then I would always recommend injecting the API that you need to use

Displaying an Episerver Friendly Image Url in an MVC View

If you are using Razor and you want to display your code in MVC then you can use the :

@Url.ContentUrl(Model.CurrentPage.MainLogo)

Displaying an Episerver Friendly Image Url in Web Forms

var mainLogo = currentPage.GetPropertyValue<ContentReference>("MainLogo");
var urlHelper = ServiceLocator.Current.GetInstance<UrlHelper>();
var friendlyUrl = urlHelper.ContentUrl(mainLogo);

Unfortunately, every now and again we have to deal with legacy systems. My current project is web forms based. It’s the first time I’ve used web form in 5 years and I remember how much I dislike it. If you’re reading this section, then you have my sympathies. If you are not using web forms, skip this. As you can’t use strongly type models as easily it’s sometimes better to query the current page object directly. You can use the GetPropertyValue<> to get the reference instead.

Getting the file name for an Image in code

var repo = ServiceLocator.Current.GetInstance();
var image = repo.Get(currentPage.MainLogo);
var fileName = image.Name;

If you use the UIHint.Image attribute as mentioned above on your property, then you will be able to cast it to an ImageData. You can use IContentRepository, or, IContentLocator to type your Image reference and then get the Filename for it.

Conclusion

In today’s tutorial, I’ve covered some of the basic API calls you might need when you want to display images on your webpage. In most instances, I usually render images directly on my MVC views. Sometimes, when I’m dealing with responsive images, or, custom blocks I might need to do some form of image manipulation first. In these instances understanding the full extent of what is available to you is handy.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *