The module code is already available on Epicode SVN, the relevant wiki pages will be following as soon as documentation is complete.

The use case is as follows:

  • The client wants the site to look exactly as in a template provided as a image,
  • the text is using a non standard font that is not available on 60% of Windows machines,
  • the site does not use flash.
  • the site needs to be equally good looking in IE6 (more about it later)

The solution was to generate images, but how to do it the right way? This has presented us with a once-in-a-lifetime :) opportunity to create a virtual path provider, do something good and learn something new & cool in the process.

Creating a new virtual path provider.

this functionality in itself is fairly well documented on MSDN one thing to pay attention to is to remember to pass the control to the next provider in the provider queue if your provider does not want to serve the request, so in my case:

public override VirtualFile GetFile(string virtualPath) { if (IsPathVirtual(virtualPath)) VirtualFile file = new TextImageVirtualFile(this, virtualPath); return file; else return Previous.GetFile(virtualPath); }

this is necessary so you don’t have to have all-or nothing solution (your provider either serving everything the user requests or not being accessible at all) and honestly I’ve spent quite a while before I found out that… I was just being silly – thinking the technology by itself will resolve that ;)

If your Virtual path provider does not actually implement directories you don’t have to make the very provider to do a lot of complicated things. you are perfectly fine to limit the implementation to providing a custom constructor so that EPiServer passes you the configuration data and a couple of methods to tell whether a file is what you want to handle or not

// this one is actually really cool - whatever values you set in your web.config // will be passed to you in the collection so you can really make your VPP
// as configurable as necessary public TextImageVirtualPathProvider(string name, NameValueCollection configAttributes)
// This one resolves if the file can be generated public override bool FileExists(string virtualPath) { /* ... */ } // Pretty much only passes the info that directory was not found // found if the virtual path matches a path that we should handle public override bool DirectoryExists(string virtualDir) { /* ... */ } // Retrieves the virtual file that generates the image if the // Virtual path matches our pattern or disregards the request if it doesn't public override VirtualFile GetFile(string virtualPath) { /* ... */ } // Again this is only a pass through method as we don't support directories public override VirtualDirectory GetDirectory(string virtualDir) { /* ... */ }

Now that we have ASP passing the request to us we need to wonder how to format the request in a way that is intuitive to the user, I wanted the URL to be straightforward and follow the path of EPiServer’s friendly URL-S so that they are easily formed by editors. So how about:

http://my.server.com/color/font-name/font-size/The%20text%20i%20want%20to%20print.gif

Ok.. well…, that won’t fly for GIFs – the font will be plain ugly if I don’t use antialiasing and if I do I will have an ugly black background underneath it. The solution to that would be using translucent PNG (which the VPP supports) but IE6 does not support those with transparency without ugly hacks. So I need to replace the blacks with a hint so that it generates a background colour when it merges the background with the font for antialiasing. For the sake of this article let’s assume it was an easy switch (IT WASN’T!) and let’s extend the URL to:

http://my.server.com/color/antialias-hint-color/font-name/font-size/The%20text%20i%20want%20to%20print.gif

But I need the font to be bold! Ok… ok…

http://my.server.com/color/antialias-hint-color/font-name/font-size/font-formatting/The%20text%20i%20want%20to%20print.gif

Can I have the image rotated too? Sigh….

http://my.server.com/color/antialias-hint-color/font-name/font-size/font-formatting(optional)/transformatio(optional)/The%20text%20i%20want%20to%20print.gif

The image rotation follows the RotateFlipType enumeration so you can specify any string that is defined in the MSDN documentation for the enumeration.

A sample result for the URL:

http://my.server.com/TextImages/Blue/white/Courier%20New/40/BUI/rotate270flipnone/Hello$eol$from$eol$Cognifide!.gif

Will look as follows

Hello$eol$from$eol$Cognifide! 

For the curious

The final string format matching regular expression looks as follows:

Regex regex = new Regex( @"^(?<colour> # The first match - starting form the beginning of the string
([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[a-zA-Z]*)) # match either a 6 hex digit string or a name of a known color - this is for text color / # now we expect the first separating slash (?<hint> # next match group is about background hint for antialiasing ([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[a-zA-Z]*)) # match either a 3 or 6 hex digit string or a name of a known color - this is for antialiasing color hint / # again separating slash (?<font>[\w\s]*) # font family name - accept white spaces / # yet another separating slash (?<size>[\d]{0,3}) # font size / # oh noes! another slash! ((?<style>[BIUSRN\s]*) # font style Bold, Italic, Underline, Strikethrough /){0,1} # this group is optional. ((?<transform>[\w]*) # transformation name as specified with System.Drawing.RotateFlipType - this group is optional /){0,1} # this group is optional too. (?<text>[\s\S]*[^\.]) # the text to render - basically anything but a dot - use relacement strings for dots [\.] # separating dot - now that's a nice change! (?<extension>(png|gif)) # the file extension - so that we know whether to generate png or gif $ # everything comes to an end ", RegexOptions.Compiled | RegexOptions.IgnoreCase | RegexOptions.IgnorePatternWhitespace | RegexOptions.CultureInvariant);

 

Usability concerns

The Colours can be provided as both named Colours (red, green, etc..) or html hex formatted colours (e.g. ff00bb, fob, fff, badfoo) both 6 and 3 hex digits strings are accepted.

The URL accepts spaces, and whatever text string that cannot be passed as a part of the url or is invalidated by EPiServer can be escaped by defining a token for it in web.config so for example as you can see in the above url the end of line “\n” character has been escaped into $eol$.

Obviously the font selection is limited to what is installed on your server.

Performance concerns

The basic concern that comes to mind is – how does this impact the server performance if the image is generated every time? Even though the performance impact seemed to be negligible I’ve decided to cache content. These things simply pile up if you have a high load site so why take the chance? Once an URL is called it is saved on first generation asserting the uniqueness of each parameter. Colours like black and 000 will be treated as same colour and cached only once.

Security concerns

So what was done to prevent our server to be an open server for generating images for everyone on the Internet? The VPP only allows for the images to be generated if the request referrer is in a domain or a host that is specified in the web.config. Additionally for testing you can enable the referrer to be null (direct call to images, as opposed to referring to them from a page).

Also as a seconds line of defence, it’s wise to define the cache folder on a share with a quota so we don’t get our server filled up with images should the referrer limiting measure fail for some reason.

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Loading...



This entry (Permalink) was posted on Monday, June 23rd, 2008 at 7:00 pm and is filed under .Net Framework, ASP.NET, C#, EPiCode, EPiServer, Internet Information Services, Open Source, Software, Software Development, Web applications. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response , or trackback from your own site.



  • Nice post and very cool module. Especially I like the flexibility which it offers.
    I have to mention about the regular expression – impressive! ;)

    One question … how do you determine image width and height?

  • Size textSize = TextRenderer.MeasureText(text, renderingFont);

    at first, but it still generates an image with a bit of margins on sides, so I need to explicitly go around it and clip all the transparency, but the initial image size is a fair aproximation of what’s needed.

  • Mikael

    This is a great idea for all of us tired of flash headers! :)
    One thing though, from a SEO standpoint this isn’t the best solution since replacing header text (eg h1 text) with an image with an alt/title attribute doesn’t give the same weight of the text. Is there any way of handling this? With flash we have fallback.

  • Mikael, the module does not really do anything much over what it says. The file it provides you probably should not embed directly but rather write a control that wraps around it. Custom property perhaps? that will pull a file, set the image’s alt text and possibly do some SEO magic around it.

    It’s just that sometimes you encounter clients that will not settle on flash (like an iPhone enabled site) and yet they absolutely demand their custom font to be used. This might be a solution for you on those occasions.

  • Richard

    Hi

    We are trying to use this nice module on a IIS7 in a 64 bits environment but we cant get it working, its actually a Episerver CMS R2. We dont understand how to configure the Web.config to get this working ?

    Any suggestion ?

  • Mateusz Juszkiewicz

    @Mikael
    You could do something like this:

    h1.replaceWithImage {
    background-position: 0 0;
    background-attachment: scroll;
    background-repeat: no-repeat;
    text-indent: -9999px;
    }

    ...
    Keep SEO guys happy

    You can still use h1 and provide text in it, while your users will see the image.

    Hope this helps.

  • Mateusz Juszkiewicz

    Sorry, sth went wrong with formatting:

    h1.replaceWithImage {
    background-position: 0 0;
    background-attachment: scroll;
    background-repeat: no-repeat;
    text-indent: -9999px;
    }
    ...
    <h1 class="replaceWithImage" style="background-image:url('img.jpg');">SEO-visible header text</h1>