imazen / slimresponse

Painless responsive images for .Net with Slimmage and ImageResizer

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.

This project is open to collaboration. Fork. Push. Innovate.

slimresponse's Issues

Set `width=value` on slimmages images missing it

SlimResponse does not currently modify image URLs, but this may be desired for users who don't care to manually set a fallback (non-js) image width per image.

Add HtmlAgilityPack as NuGet dependency

SlimResponse depends on HtmlAgilityPack, but does not include it in the nuget descriptor

https://www.nuget.org/packages/imazen.slimresponse

ERR_CONTENT_DECODING_FAILED using SlimResponseModule together with IIS GZip

If I use SlimResponseModule with IIS Compression turned on, I get the following error: ERR_CONTENT_DECODING_FAILED
https://www.screencast.com/t/umpS1c7XYZcG

The html loads fine if I either disable IIS Compression or remove SlimResponseModule.

It seems like SlimResponseModule works on the GZip'ed response which results in invalid response.
Have anyone experienced similar behaviour?