2SexyContent Extensions
DotNetNuke tools to create, design and animate great content
You are here: Home  >  ImageResizer

Image Resizing using ImageResizer

We've included another open-source project in 2SexyContent - the (probably) best image resizing tool available to asp.net today. The ImageResizer is from Imazen, all is documented on http://imageresizing.net/. Here just some basic samples so you understand the potential and how to use it. Raphael also wrote a blog how to use this with tokens and razor.

Original Image

This is the 5 MB original image.

Simple Thumbnails

(shrink to max width 200 or max height 200).

  ?w=200

 ?h=200

Constrained Two Ways

 ?h=200&w=200 (creates a 200x200 pic w/white space)

 ?h=200&w=200&mode=pad (creates a 200x200 pic w/white space, same as no mode)

 ?w=200&h=200&mode=max (creates an image that's 200 wide)

 ?w=200&h=200&mode=stretch (200x200, distorted)

Cropped - The best Choice for Precise Designs

 

  ?w=200&h=200&mode=crop (ensure full 200x200, cuts rest, like facebook)

?w=200&h=200&mode=crop&anchor=middleleft (or topleft, topcenter, topright, middle..., bottom...)

Enlarge if Necessary

?w=200&h=200&mode=crop&scale=both (or down, canvas - here not visible because pic too big)

Change Background Color if not Transparent (jpg)

  ?w=200&h=200&bgcolor=ff0000 (or any other color for non-PNG, non-GIF)

More Features / Documentation

here http://imageresizing.net/docs/basics

Using in your Templates

...is super trivial. First example is Tokens, second is Razor

  • [Content:Photo]?w=200
  • @Content.Photo?w=200
  • [Content:Screenshot]?w=700&h=300&mode=crop
  • @Content.Screenshot?w=700&h=300&mode=crop
2serve . 2invent . 2create is 2be.