Using ImageUltimate in an ASP.NET MVC project

To use ImageUltimate in an ASP.NET MVC Project, do the following in Visual Studio:

Make sure you have added references to ImageUltimate assemblies as described here.

Optionally set ImageUltimate's global configuration (if overriding a default value is required). For example, you may want to set the license key, the default path for finding source images and image cache location.

You can specify the configuration in <appSettings> tag of your Web.config.

XML

<appSettings>
  <!--
    Set this property only if you have a valid license key, otherwise do not
    set it so ImageUltimate runs in trial mode.
  -->
  <add key="ImageUltimate:LicenseKey" value="QQJDJLJP34..." />

  <!--
    The default SourcePath value is "~/App_Data/ImageSource"
    Both virtual and physical paths are allowed.
    Note that using a path under "~/App_Data" can have a benefit,
    for instance if you want to protect your original source files, i.e.
    prevent them from being downloaded directly, you can use this special 
    folder which is restricted by ASP.NET runtime by default.
  -->
  <add key="ImageUltimateWeb:SourcePath" value="~/Content" />

  <!--
    The default CacheLocation value is "~/App_Data/ImageCache"
    Both virtual and physical paths are allowed (or a Location instance for one of the supported 
    file systems like Amazon S3 and Azure Blob).
    However it's recommended that you use a path inside your application folder 
    (e.g. "~/SomeFolder", "/SomeFolder" or "C:\inetpub\wwwroot\MySite\SomeFolder")
    so that ImageUltimate can use RewritePath to pass download requests directly
    to IIS for higher throughput.
  -->
  <add key="ImageUltimateWeb:CacheLocation" value="~/App_Data/ImageCache" />
</appSettings>

As you would notice, ImageUltimate: prefix maps to ImageUltimateConfiguration.Current and ImageUltimateWeb: prefix maps to ImageUltimateWebConfiguration.Current.

Alternatively you can specify the configuration in code, in Application_Start method of your Global.asax.cs:

protected void Application_Start(object sender, EventArgs e)
{
    //Set this property only if you have a valid license key, otherwise do not
    //set it so ImageUltimate runs in trial mode.
    ImageUltimateConfiguration.Current.LicenseKey = "QQJDJLJP34...";

    //The default SourcePath value is "~/App_Data/ImageSource"
    //Both virtual and physical paths are allowed.
    //Note that using a path under "~/App_Data" can have a benefit,
    //for instance if you want to protect your original source files, i.e.
    //prevent them from being downloaded directly, you can use this special 
    //folder which is restricted by ASP.NET runtime by default.
    ImageUltimateWebConfiguration.Current.SourcePath = "~/Content";

    //The default CacheLocation value is "~/App_Data/ImageCache"
    //Both virtual and physical paths are allowed (or a Location instance for one of the supported 
    //file systems like Amazon S3 and Azure Blob).
    //However it's recommended that you use a path inside your application folder 
    //(e.g. "~/SomeFolder", "/SomeFolder" or "C:\inetpub\wwwroot\MySite\SomeFolder")
    //so that ImageUltimate can use RewritePath to pass download requests directly
    //to IIS for higher throughput.
    ImageUltimateWebConfiguration.Current.CacheLocation = "~/App_Data/ImageCache";
}

Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs)
    'Set this property only if you have a valid license key, otherwise do not
    'set it so ImageUltimate runs in trial mode.
    ImageUltimateConfiguration.Current.LicenseKey = "QQJDJLJP34..."

    'The default SourcePath value is "~/App_Data/ImageSource"
    'Both virtual and physical paths are allowed.
    'Note that using a path under "~/App_Data" can have a benefit,
    'for instance if you want to protect your original source files, i.e.
    'prevent them from being downloaded directly, you can use this special 
    'folder which is restricted by ASP.NET runtime by default.
    ImageUltimateWebConfiguration.Current.SourcePath = "~/Content"

    'The default CacheLocation value is "~/App_Data/ImageCache"
    'Both virtual and physical paths are allowed (or a Location instance for one of the supported 
    'file systems like Amazon S3 and Azure Blob).
    'However it's recommended that you use a path inside your application folder 
    '(e.g. "~/SomeFolder", "/SomeFolder" or "C:\inetpub\wwwroot\MySite\SomeFolder")
    'so that ImageUltimate can use RewritePath to pass download requests directly
    'to IIS for higher throughput.
    ImageUltimateWebConfiguration.Current.CacheLocation = "~/App_Data/ImageCache"
End Sub

Create a new View (eg. Index.cshtml) and insert these lines:

@using GleamTech.ImageUltimate
@using GleamTech.ImageUltimate.AspNet
@using GleamTech.ImageUltimate.AspNet.Mvc

<!DOCTYPE html>
<html>
    <head>
        <title>Image Resizer</title>
    </head>
    <body>

        @this.ImageTag("SomeImage.jpg", task => task.ResizeWidth(300))

    </body>
</html>

@Imports GleamTech.ImageUltimate
@Imports GleamTech.ImageUltimate.AspNet
@Imports GleamTech.ImageUltimate.AspNet.Mvc

<!DOCTYPE html>
<html>
    <head>
        <title>Image Resizer</title>
    </head>
    <body>

        @Me.ImageTag("SomeImage.jpg", Function(task) task.ResizeWidth(300))

    </body>
</html>

This will resize width of the source image ~/Content/SomeImage.jpg to 300 pixels (keeping aspect ratio), cache the resulting image and render a <img> tag in your page. For consecutive page views, the image will be served directly from the cache and no processing will be done. This is the reason the task (second parameter) is specified as a lambda function, it will be only called when necessary for maximum performance. Note that as we specified a non-rooted path for the image path (first parameter), the image is considered relative to ImageUltimateWebConfiguration.Current.SourcePath (as set in step 2). This allows you to write image commands as short lines and avoids parent path repetition.

Sometimes you may need to render a url instead of a <img> tag, then use:

@this.ImageUrl("SomeImage.jpg", task => task.ResizeWidth(300))

@Me.ImageUrl("SomeImage.jpg", Function(task) task.ResizeWidth(300))

For example, consider you want to add a background image to a CSS class:

<style>
    .someCls
    {
        background-image: url(@this.ImageUrl("SomeImage.jpg", task => task.ResizeWidth(300)));
    }
</style>

<style>
.someCls
{
    background-image: url(@Me.ImageUrl("SomeImage.jpg", Function(task) task.ResizeWidth(300)));
}
</style>

Tip

Alternatively you can add the namespaces globally in Views/Web.config under <system.web.webPages.razor>/<pages>/<namespaces> tag to avoid adding namespaces in your pages every time:

XML

<system.web.webPages.razor>
  <pages pageBaseType="System.Web.Mvc.WebViewPage">
    <namespaces>
      <add namespace="GleamTech.ImageUltimate" />
      <add namespace="GleamTech.ImageUltimate.AspNet" />
      <add namespace="GleamTech.ImageUltimate.AspNet.Mvc" />
    </namespaces>
  </pages>
</system.web.webPages.razor>