Umbraco Codegarden 2016

Umbraco Codegarden 2016

This years annual Umbraco festival – Umbraco Codegarden 2016 is running from the 15th to the 17th of June and is being held at the Umbraco HQ in Odense.

It’s 3 full days where the Umbraco community gather for cool sessions from the core team and community experts, workshops, dinner, beers and networking.

If you were not able to attend this year, you can watch the live streams, as this years event is being broadcast live.

Umbraco Codegarden 2016 live streams:

Entrance room
Main room
Back room

Read more about Codegarden 2016, or check out the schedule.

Umbraco ImageGen Razor Helper

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 XSLT transformed mail with link

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

Check if member exist Umbraco C#

To check if a user exist in the Umbraco membership section, we use the ASP.NET Membership API.

[csharp]
var userName = "myUserName";
var memberExist = false;

if(Membership.GetUser(userName) != null)
{
memberExist = true;
}
[/csharp]

Umbraco 3.0.6 to 4.7.1.1 Upgrade

As I have been struggling with upgrading Umbraco 3.0.6 to 4.7.1.1, I thought I would post a small guide for later use, as I most likely have to go through this again.

Please be aware of this guide is for Umbraco 3.0.6 to 4.7.1.1
Upgrading from prior version of Umbraco, vil require you to upgrade to 3.0.6 first.

1. Take backup of your binaries and database!

2. Upgrade from Umbraco 3 > 4.0.4.2 (upgrading from 3 > 4.7 will make the upgrade stall at 20%)
2.1 Download the binaries and extract them to your Umbraco dir
Note: Umbraco 3 and 4.0.4.2 must both run on ASP.NET 2.0 Classic Application Pools

Umbraco 4.0.4.2: http://umbraco.codeplex.com/releases/view/37337
Umbraco 4.7.1.1: http://umbraco.codeplex.com/releases/view/73692

3. Upgrade from Umbraco 4.0.4.2 > 4.7.1.1
3.1 Download the binaries and extract them to your Umbraco dir
3.2 Run your site and a automated upgrade will start – looking just like the normal Umbraco 4.7 installation
Note: Change Application Pool to ASP.NET 4.0 (Integrated pipeline mode) before you run the upgrade

Umbraco install screen

4. XML schemes
Umbraco 4.5 and forth uses a new XML shcema, therefor you have to make sure it’s enabled
in /config/umbracoSettings.config

[code]
<!– to enable new content schema, this needs to be false –>
false
[/code]

Love the double meaning aye? ;)

5. Passwords
Version prior to Umbraco 4 used clear typed passwords – therefor your old passwords are stored as clear type in the database.
Umbraco 4.7 however uses hashed passwords, but because your passwords are stored in clear type, we have to enable the feature
in web.config.

Set both the “UmbracoMembershipProvider” and “UsersMembershipProvider” to passwordFormat=”Clear” like shown below

6. If you are using XSLT, which you probably are, since Razor first got introduced in Umbraco 4.7, you have to manually
go through your scrips and and change them to fit the new schema. There are some scripts out there which can help you, but
they don’t work 100%.
I have been lucky though, to get _some_ of my XSLT convertet to the new schema with “XsltUpdater for Umbraco
Use at your own risk – if you dare. ;)

Reference about the new chages:
http://our.umbraco.org/wiki/reference/xslt/45-xml-schema

7. Republishing
Now log in to your Umbraco installation http://site.com/umbraco/

Go through all your nodes and republish them (don’t just hit republish entire site, or it won’t work and you probably will break something)
This step is important to make all your XSLT work again with the new schema.
Please note that you most likely will loose some relations and sort orders in tabs, but not more than it’s pretty fast to fix.

/Paul Sørensen

The create dialog for “Media” does not match anything defined in the “~/umbraco/config/create/UI.xml”

After upgrading an Umbraco installation from 3.0 to 4.7.1.1, I got the error:

[code]"The create dialog for "Media" does not match anything defined in the "~/umbraco/config/create/UI.xml" while trying to upload images.
[/code]

To fix this, simply open UI.xml located in: /umbraco/config/create/
Search for:
[code]
<nodetype alias="media"></nodetype>
[/code]

and rename it to uppercase:
[code]
<nodetype alias="Media"></nodetype>
[/code]
Restart IIS and problem should be solved.

The create dialog for Media...

Individual meta description Umbraco

As for SEO, it’s good practise to have individual meta descriptions for most if not all pages on your site.
A quick and easy way to implement this into Umbraco, is by creating a SEO tab with the property “meta-description” (textstring) for all your document types.

In your template you simply insert following line into your <head></head>
[code]
<meta name="description" content="<umbraco:Item field=’meta-description’ recursive=’true’ runat=’server’/>"/>
[/code]