Loading...

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).

Making Waves Mobile Image Scaling

Mobile Image Scaling component can rescale images in rendered html, so they does not exceed specified width. It’s important especially for mobile version of web pages - editor can insert big images in rich text property, which will not fit into small mobile device display.

Consider using Mobile Image Scaling with MakingWaves.MobileUrlRewriter. With custom rules configured, editor can edit single page and specify image sizes for regular clients, while Mobile Image Scaling component will be responsible for resizing them for mobile clients.

Features

  • Scales images in rich text content (from EPiServer's property)
  • Scales images from runtime controls (like <asp:Image /> )
  • Scales images from static markup (i.e. <img src="..." /> )
  • Configurable scaled images width

Image scaling in action

Mobile version without image scaling (image is to wide for mobile devices):

Mobile version with image scaling applied:

Download

Usage

<mw:ImageScalingPlaceHolder runat="server" ImageWidth="400">
    <!-- content of episerver rich text property -->
    <%# Model.MainBody  %>

    <!-- same property using episerver control-->
    <EPiServer:Property runat="server" PropertyName="MainBody" />

    <!-- image rendered from asp control -->
    <asp:Image runat="server" ImageUrl="/Content/Images/flower.jpg"/>

    <!-- static html image markup -->
    <img src="/Content/Images/flower.jpg" />
</mw:ImageScalingPlaceHolder>

Setup

In order to enable image transformations you need to register ImageTransoformationService and setup source of files to scale (e.g. episerver store) and where scaled images will be cached (to cache on local drive use LocalVirtualPathStore )

Consider using following snippet:

//as source file use episerver's page folders and static image files in website folder
var sourceFileSystem = new MixedVirtualFileSystem()
    .Add(new EPiServerFileSystem())
    .Add(new LocalFileSystem());

//store/cache scaled images on under website folder "/scaledImages"
var scaledImageStore = new LocalVirtualPathStore(Url.Parse("/scaledImages"));

var resolver = new BasicResolver();
resolver.Register<IImageTransformationService>(
    new ImageTransformationService(sourceFileSystem,scaledImageStore));

ServiceLocator.SetResolver(resolver);

Support

Tickets for this component:

#297
ImageScalingPlaceholder maxWidth option?

Ask a question

Requires login.


Report a bug

Requires login.


Add a feature request

Requires login.


Requirements

Runtime:

  • EPiServer CMS 6
  • .NET 3.5 or 4

If you want to change and compile the source code:

  • Visual Studio 2010

Contributed by

Robert Kęsek (robert.kesek _mail_at_ makingwaves.pl), Mirosław Jedynak (miroslaw.jedynak _mail_at_ makingwaves.pl) from Making Waves (http://www.makingwaves.com)

Attachments