In this tutorial, you will learn how to get the Url for an image using Episerver CMS. Allowing content editors to add images to your site is a website builders 101. Knowing how to correctly render images in code will be a requirement on every Episerver project. In this tutorial, you will get access to all the code required to make you an Episerver imaging BOSS, read on 🔥🔥🔥
Defining A Property
The first step is to define an image property on a page or a block definition. This property is the thing that will allow content editors to upload images into the CMS. Inside of the editor, this property will look like a standard image file picker. The code required to create an image property is shown below:
On Line8, I've set the UIHint attribute on the MainLogo property. The property is set as a ContentReference. This is the format of the data that will be stored in the CMS. The UIHint property defines how the property will look when it is displayed in the editor . UIHint.Image will render an image picker to the user, instead of the generic content picker property.
Displaying an Image Url in Code: The next step is to render the Url on a web page. One thing to understand in Episerver is internal and external Urls. From your website, you always want to render the friendly Url as this will give you SEO mojo. Internal Urls look ugly and non-sensical. For any Url that you need to render, always make sure it is friendly 😊. Rendering a URL is done using this code:
You can render links using UrlHelper. Inject it into your class and use the ContentUrl() method. In the older days of Episerver you used the UrlResolver, however, this API was accessed using a static singleton class. If you want your code to be unit-testable, then I would always recommend injecting the API that you need to use 😊
You can also access the image file name if needed. You can do this using IContentRepository, or, IContentLocator:
As long as your reference is an image (use UIHint.Image), you will be able to cast it to an ImageDataand then get the Filename for it 💥
Displaying The Image Url In A View: If you want to write the code to render an image Url within a view, you can use this HTML helper :
Displaying The Image Url In Web Forms: 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 forms in 5 years and I remember how much I dislike it. If you're reading this section, you have my sympathies. If you find yourself in this unfortunate situation, the code to render a friendly Url is shown below:
As you can't use strongly type models in web forms, it's sometimes better to query the current page object directly. You can use the GetPropertyValue<T> to get the reference instead.
You now know how to do everything image related in Episerver CMS. I recommend you favor adding any image logic in your controllers and pass the image Url down as a view model to keep that nice MVC separation, however, do what makes you happy ❤️. Happy Coding 🤘
