Web development and technologies | egeek

With ImageGen for Umbraco you can automatically resize and cache images server side. I presume you already know ImageGen, why this guide won’t dig more into the concepts and functionality here for.

Instead I’ll show you how to make a Razor Helper, with a helper method which returns a processed image.
A Razor Helper is a helper class with methods you can use across your Razor Views.

1. Create a new .cshtml class and place it in /App_Code

2. Reference the following assemblies
[csharp]
@using System.Web.Mvc
@using umbraco.MacroEngines
[/csharp]

3. Create the following helper method

[csharp]

@helper ImageGenNiceUrl(DynamicNode imageNode, int width, int height)
{
//Get image with ImageGen and return just the URL with set width/height
if (imageNode != null)
{
@MvcHtmlString.Create(String.Format("{0}{1}{2}{3}{4}{5}", "/ImageGen.ashx?image=", imageNode.NiceUrl, "&width=", width, "&height=", height))

}
}
[/csharp]

The method takes the parameters DynamicNode, width and height, and returns the image url as a string.
I assume you have ImageGen installed and placed ImageGen.ashx in the root of your website, otherwise change the first parameter in String.Format to the appropriate.
We need to use MvcHtmlString.Create, otherwise “&” will be returned as: [html]&[/html] and ImageGen won’t recognize the parameters.

ImageGen supports several other parameters, so you can extend the method as desired. This is just to show you the basics.

Our helper method is now done, and we can use it in our Razor Views.

4. Example:
[csharp]
<img src="@LayoutHelper.ImageGenNiceUrl(currentNode.Media("imagePicker"), 128, 256)" />
[/csharp]

currentNode reflects a DynamicNode, which contains a image picker with the property name “imagePicker”.
128 (width), 256 (height) is the proportions we want our image to be.

If you provide width and height with 0 value for both parameters, the image won’t be scaled. Providing 0 for just one of the parameters, will scale the opposite parameter.
You can choose to include [html]<img></img>[/html] in your helper, but I prefer it this way, as it makes it very easy to extend with eg. class, data or other properties.

If you want to read more about Razor Helpers, check out this post by Scott Gu.

Umbraco Contour seem to have a bug when sending mail out with a file upload. You would expect to get a clickable link in the email, but instead Contour inserts the file location without domain – as plain text, making it rather useless. Of course you can see the uploaded file from “Entries” in Contour, but a better and expected UX would be to be able to click the link in the mail.

As for now, this can only be done by using the type “Send xslt transformed email” from “Workflows” in Contour. Using the below XSLT file will give you a clickable link with the filename, in your received email.

When creating a “Workflow”, simply choose the type “Send xslt transformed email” and choose the XSLT file below.

[xml]
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:user="urn:my-scripts"
xmlns:umbraco.library="urn:umbraco.library"
exclude-result-prefixes="xsl msxsl user umbraco.library">

<xsl:output method="html" media-type="text/html" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
doctype-system="DTD/xhtml1-strict.dtd"
cdata-section-elements="script style"
indent="yes"
encoding="utf-8"/>

<xsl:param name="records" />

<xsl:template match="/">
<table style="border-collapse:collapse;border:1px solid black;">
<xsl:for-each select="$records//fields/child::*">
<xsl:sort select="@sortorder" data-type="number"/>
<tr style="border:1px solid black;">
<td valign="top" style="border:1px solid black;padding:5px;font-family:Verdana,Helvetica,Arial,sans-serif;font-size:11px;">
<strong>
<xsl:value-of select="./caption"/>
</strong>
</td>
<td valign="top" style="border:1px solid black;padding:5px;font-family:Verdana,Helvetica,Arial,sans-serif;font-size:11px;">
<xsl:choose>
<xsl:when test="contains(.//value, ‘/umbraco/plugins/umbracoContour/files/’)">
<a href="http://{umbraco.library:RequestServerVariables(‘SERVER_NAME’)}{.//value}">
<xsl:value-of select="substring-after(substring-after(.//value, ‘/files/’), ‘/’)"/>
</a>
</xsl:when>
<xsl:otherwise>
<xsl:for-each select="./values/value">
<xsl:if test="position() &gt; 1">
<br />
</xsl:if>
<xsl:value-of select="umbraco.library:ReplaceLineBreaks(.)"/>
</xsl:for-each>
</xsl:otherwise>
</xsl:choose>
</td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
[/xml]

https://gist.github.com/PaulSorensen/7983503