All project content is available for reading, but you need to be a member of the project for Subversion checkout of source code, or to create/modify any information.
Login if you are a member. Apply here to request membership (open to all).

EPiImage Resizer (User Control)

EPiImageResizer provides an out of the box automatic resize functionality to EPiServer. There is nothing to configure (although you can if you want) and it simply works. All resized images are stored in a cache folder for performance, and the resized image has a SEO friendly URL.

So lets see it in action.:

<EPiImage:EPiImageResizer ImageUrl="/images/MyImage.jpg" 
                          runat="server" />

As you can see the original image is resized from 150 x 150 pixels to 100 x 100 pixels. The width and height attributes defines the maximum width and height of the resized image, in this case 100 x 100 pixels. The resized image is cached in the /Globals/Scaled/ folder in VPP, so the next time someone visits the page it simply uses the cached image.

The resizer can also take the image url straight from an EPiServer property, simply specify the Property Name (e.g. "Url to image" property or "EPiImageProperty"):

<EPiImage:EPiImageResizer PropertyName="MyImage" 
                          runat="server" />


The following transformations are supported:

Scale To Fit
This is what you normally want. It simply scales the image perserving the aspect (width/height) ration to fit inside the width and height you specify.

Scale To Fill
This transformation scales the image to fill the specified width and height maintaining the aspect ratio, but crops away anything that ends up outside the width/height box.

This transformation simply scales the image to the specified width and height without preserving the aspect ratio


By using the Rotation attribute you can rotate the image:

The image is rotated 90 degrees clockwise.

Upside Down
The image is rotated 180 degreees.

Counter Clockwise
The image is rotated 90 degrees counter clockwise.


Register the user control on the page:

<%@ Register TagPrefix="EPiImage" 
             Src="~/EPiImage/UserControls/EPiImageResizer.ascx" %>

Then simply specify the image, size and transformation you want:

<EPiImage:EPiImageResizer PropertyName="MyImage" 
                          runat="server" />


  • Caching
  • Clearing old cached images (Scheduled job)
  • Set image url or PropertyName
  • If the image url or property is empty no img tag is outputed
  • Set fallback image if image url or propery is empty
  • Set CSS class, CSS style, Alt tag and Title/Tooltip tag
  • Add optional link url (will surround the img tag in an a href tag)


Attribute:What does it do?
PropertyNameSpecify the name of a property to fetch the image url from instead of using ImageUrl.
FallbackImageUrlIf the ImageUrl or PropertyName is empty, use this image instead.
TransformationHow to scale the image: ScaleToFit, ScaleToFill, Stretch
RotationRotate the image: NoRotation, Clockwise, CounterClockwise, UpsideDown
LinkURLAdds a <a href tag around the rendred img tag.
AltAdds an alt attribute to the rendered img tag
TooltipAdds a title attribute to the rendered img tag for mouse over tooltips in all browsers
CssClassAdds a class attribute to the rendered img tag
CssStyleAdds a style attribute to the rendered img tag
LinkCssClassAdds a class attribute to the a href tag.


How do I resize an image according to just the width ignoring height (or vice versa)?

Answer: By setting just the width (or just the height) the image will be scaled only according to the width while keeping the aspect ratio from the original image. Please note that this only works with Transformation set to ScaleToFit.

<EPiImage:EPiImageResizer PropertyName="MyImage" 
                          runat="server" />