slimresponse: A C# repository from Imazen

SlimResponse

Effortless reponsive images powered by ImageResizer and Slimmage.js

Dual-licensed by Imazen under the MIT and Apache licenses.

Install-Package Imazen.SlimResponse

(Well, actually, you may also need to run Install-Package HtmlAgilityPack) The current release forgot to specify that dependency.

###What does it to?

SlimResponse looks through outgoing HTML for <img> tags with a slimmage class applied, such as

<img class="slimmage" src="image.jpg?width=150" />

<img class="thisclass slimmage thatclass" src="image.jpg?width=150" />

or for "slimmage=true" in any image URL

<img src="image.jpg?width=150&slimmage=true" />

Slimmage requires "width=[number]" be present in the URL. This value specifies the image size when javascript is disabled, but is modified by slimmage.js under normal circumstances.

It then adds the appropriate markup to allow slimmage.js to turn them into responsive images.

Requirements

ASP.Net 4.0
ImageResizer must be installed
slimmage.js must be included in your page's javascript.

Spin it up quickly for a test!

Use WebMatrix or VisualStudio (Open Web Site) and fire it up on the "www"-folder, that's all!

Notes & Caveats

This parses all outgoing HTML. This may increase CPU usage slightly.
Outgoing HTML is only modified if a responsive image is present.
SlimResponse may mess up invalid HTML even further during parsing/serialization.
If you're only using responsive images in limited situations, an HTML helper that spits out slimmage markup may be more appropriate.
SlimResponse does not include the slimmage.js javascript file, that's your responsibility.

Your web.config file must have both ImageResizer and SlimResponse installed

<?xml version="1.0"?>
<configuration>
  <system.web>
    <httpModules>
      <!-- This is for IIS5, IIS6, and IIS7 Classic, and Cassini/VS Web Server-->
      <add name="ImageResizingModule" type="ImageResizer.InterceptModule"/>
      <add name="SlimResponseModule" type="Imazen.SlimResponse.SlimResponseModule, Imazen.SlimResponse"/>
    </httpModules>
  </system.web>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true">
      <!-- IIS7+ Integrated mode -->
      <add name="ImageResizingModule" type="ImageResizer.InterceptModule"/>
      <add name="SlimResponseModule" type="Imazen.SlimResponse.SlimResponseModule, Imazen.SlimResponse"/>
    </modules>
  </system.webServer>
</configuration>

Thanks to esn303 for creating ImageResizer.ResponsivePresets and being the inspiration behind this project.