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.
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
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 :
Displaying an Episerver Friendly 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 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
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.
In today's tutorial, I've covered some of the basic API calls you might need when you want to display images on your web pages. 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.