The Sitecore media library stores (per default) all assets (images, documents, …) in its own database rather than on disk. All assets are then streamed using an HttpHandler. All image links goes to an *.ashx handler which then returns the image. You can apply parameters to this handler, allowing you to modify the output (sizing, scaling, …).
The possibility to resize the output is especially useful as you allow users to upload images in any size and still stream the image in the size you need.
Same image scaled to different sizes.
The example above demonstrates how to get the same uploaded image in different sizes. Sitecore caches the modified image so sizing only has a minor performance impact the first time you request the image.
You can apply parameters directly to the URL.
Here is an example with using an image called “brian.ashx”:
This will give you the original image: http://yourwebsiite/~/media/brian.ashx
This will give you the image with width = 50 px: http://yourwebsiite/~/media/brian.ashx?w=50
The most common parameters are:
- w = Image width
- h = Image height
- as = Allow stretch. Set as=1 to allow image to be larger than original. Set as=0 to disallow image to be upscaled, filling any space with a color (default is black).
- bc = The background color of the fill when as=0. bc=000000 is black and bc=ffffff is white.
- sc = scale image. Use decimal numbers. sc=1 is the original size. sc=1.5 is 150% above normal size.
You can see all parameters here: http://sdn.sitecore.net/Articles/XSL/5%203%20Enhancements/Image%20Enhancements.aspx
If you use XSLT to render your images, you can apply the parameters on the sc:image directly:
<sc:image field="MyImage" width="150" height="100" bc="ffffff"/>
If you use UserControls (.ascx) to render your images, you can register the following tagprefix to access sc:Image and sc:FieldRenderer:
<%@ Register TagPrefix="sc" Namespace="Sitecore.Web.UI.WebControls" Assembly="Sitecore.Kernel" %>
The namespace Sitecore.Web.UI.WebControls contains controls for rendering many different Sitecore types directly, including images.
Unfortunately the The sc:Image only supports MaxWidth, MaxHeight and Scale:
<%@ Control Language="c#" AutoEventWireup="true" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %> <%@ Register TagPrefix="sc" Namespace="Sitecore.Web.UI.WebControls" Assembly="Sitecore.Kernel" %> <div> <sc:Image ID="image" Field="MyImageField" MaxWidth="100" runat="server" /> </div>
But you can use the sc:FieldRenderer and apply the parameters to the Parameters field:
<%@ Control Language="c#" AutoEventWireup="true" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %> <%@ Register TagPrefix="sc" Namespace="Sitecore.Web.UI.WebControls" Assembly="Sitecore.Kernel" %> <div> <sc:FieldRenderer ID="field" FieldName="MyImageField" Parameters="w=100&h=200&as=1" runat="server" /> </div>
