Anders G. Nordby

Senior Systems Consultant at CGI

Rendering Images in EPiServer 7.x

As I’ve been “trapped” in an EPiServer CMS 6 R2 project for quite long, there’s a lot that’s new to me in EPiServer 7.x, and even simple stuff like rendering images correctly takes a while to get the hang of. Please bear with me if this is old news to you… 🙂

I’ve set up my Image media as follows:

[ContentType(GUID = "3E622C25-76DB-4866-999C-843ABBDE4C95")]
[MediaDescriptor(ExtensionString = "jpg,jpeg,jpe,ico,gif,bmp,png")]
public class ImageFile : ImageData
{
    public virtual string Copyright { get; set; }

    [ImageDescriptor(480, 640)]
    public virtual Blob Default { get; set; }

    [ImageDescriptor(580, 1024)]
    public virtual Blob Medium { get; set; }

    [ImageDescriptor(640, 1920)]
    public virtual Blob Large { get; set; }
}

For newbies (like myself), notice how this lets us get three differently sized versions of each image file automatically.

In my aritcle pagetype model, I specify the TopImage property like this:

[UIHint(UIHint.Image)]
[Display(Name = "TopImage", Description = "", GroupName = SystemTabNames.Content, Order = 40)]
public virtual Url TopImage { get; set; }

In my Views/Shared folder, I’ve created a new folder called DisplayTemplates, and there I’ve placed a new view called Image.cshtml:

@model EPiServer.Url
@if (Model != null && !Model.IsEmpty())
{
    if (ViewData["Size"] != null)
    {
        <img src='@Url.ContentUrl(Model)/@ViewData["Size"]' alt='@ViewData["Alt"]' />
    }
    else
    {
        <img src='@Url.ContentUrl(Model)' alt='@ViewData["Alt"]' />
    }
}

In my article page razor template, I can now specify how the image should be rendered; here are four versions:

@model CourseViewModel
    
<h1>@Model.CurrentPage.PageName</h1>

@Html.PropertyFor(m => m.CurrentPage.TopImage, new { Size = "Default", Alt = "TopImage" })
@Html.PropertyFor(m => m.CurrentPage.TopImage, new { Size = "Medium" })
@Html.PropertyFor(m => m.CurrentPage.TopImage, new { Size = "Large" })
@Html.PropertyFor(m => m.CurrentPage.TopImage)

The result renders like this:

<h1>Anders-test-kurs2</h1>
<img alt="TopImage" src="/contentassets/8f8125478b7b4765950fa3635d78b145/chrysanthemum.jpg/Default">
<img src="/contentassets/8f8125478b7b4765950fa3635d78b145/chrysanthemum.jpg/Medium">
<img src="/contentassets/8f8125478b7b4765950fa3635d78b145/chrysanthemum.jpg/Large">
<img src="/contentassets/8f8125478b7b4765950fa3635d78b145/chrysanthemum.jpg">

And, again for us newbies, EPiServer now automatically renders the various correct sizes of the image.

Advertisements

5 responses to “Rendering Images in EPiServer 7.x

  1. vyan024 2014-05-14 at 03:45

    I like this nice idea and solution. One problem I found yesterday was the image has to be jpg, png, if the image is gif, it throws the following exception

    Must specify a palette when using an indexed pixel format.

    I believe this is episerver bug

  2. John 2014-09-02 at 11:31

    I like this implementation but it comes with one major flaw: the resized images are converted to png, which makes the whole thing practically unusable. Take a look at the content-type header and the filesize of your “Large” file…

    Any suggestion as to how to keep the existing image format would be greatly appreciated.

  3. Marcus Forsberg 2014-11-12 at 13:22

    The fact that the images are converted to PNGs is a major issue, as John states. Uploading a JPG file will sometimes result in resized PNGs that are more than twice as large in file size, pretty much removing the point of resizing them in the first place. Any thoughts on how that can be fixed?

  4. John 2014-11-12 at 13:27

    Hi!
    I managed to solve this by overriding ThumbnailManager and the CreateImageBlock method, see here: http://world.episerver.com/Modules/Forum/Pages/Thread.aspx?id=90850&epslanguage=en
    I found some good example code here: https://github.com/markeverard/Chief2moro.ImageDataExtensions

    Good luck!

  5. Marcus Forsberg 2014-11-12 at 17:56

    Thanks, John. I did read something along those lines on my hunt for solutions today, but I was hesitant to dive in to it. The fact that you solved it inspired me, though, so I guess I’ll have to give it a try if time allows. We’re basically looking for exactly what you describe in the forum topic you linked.

    In an ideal world, it would also be possible to crop from the centre too force a given width and height, but I’m not going to get in to that as a EPiServer first-timer. 😉 What I’m ultimately after is to get as close to possible to WordPress’ custom image sizes, powerful as they are. I really think EPiServer is lacking in this area. I did give Parrot (https://github.com/PeachFront/Parrot) a quick try today but for one I couldn’t get it to actually crop anything, and besides, while it does send the images as JPGs, they’re still friggin huge in size. Also, it doesn’t feel right to specify exact sizes in query parameters, for obvious reasons.

    That said, as I final little rant about EPiServer’s image handling, I’m extremely annoyed by the fact that URL:s end up looking like image.jpg/MySize. Should the visitor try to (or be supposed to, even) save the image, it would be downloaded as “MySize”. That, and it just looks wrong. WordPress, on the other hand, renames it’s images to image-800×600.jpg, for example. Am I the only one who’d prefer that? 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: