Ever been trying to work out if a media item is used within your site? And if it is, where are all the places that it’s being used?

Here at TheFARM we had this problem and we set about solving it, and once solved we thought it’d be a great idea to share it with the community.
To this extent we’ve put together a handy little Umbraco Data Type which you can attach to any media type and then find out its usages.

It’ll look up based on:

• Media Pickers (or DataTypes which store the media node ID)
• Usage within the WYSIWYG editor (based on the file-system path)

Version 1.0 of the package (released today) supports Umbraco 4.0.x.

When Umbraco 4.1 is released we’ll be producing an updated version of the Data Type which will have some nifty new features which it can leverages from the new 4.1 features.

So what can you do with it?

• When the Data Type locates an instance of the media item attached to a media picker you have the option to directly disconnect it!
  • This will modify the document, but leave it in a unpublished state, so you can go review your change before putting it live
• When the Data Type locates an instance of the media item in a WYSIWYG field it will allow you to view the full path to the document in the content tree, so you can navigate there and address it

But really, a picture is worth a thousand words, so since there’s a lot of pictures in a video I guess this is worth a hell of a lot - http://www.screencast.com/t/ZDcxNjQ2ND

So now that you’re excited why not jump over to the project section of Our.Umbraco and grab a copy!

I recently worked on a project for a client which the deployment environment was only to have .NET 2.0 installed. This is a rarity these days, after all .NET 3.5 was released in November 2007 (http://en.wikipedia.org/wiki/.NET_Framework#.NET_Framework_3.5), so having chosen to not install it is a bit of an effort.

But fine, what ever floats your boat I guess, but there is a problem, pretty much all the libraries which we’ve developed at The FARM are .NET 3.5 libraries, generally because they use features like LINQ or Extension Methods.
Damn, that’s going to be a pain in the ass, I’d either have to forgo our libraries, or make custom versions of them.

Or, I could be a bit ninja-esq and make a .NET 2.0 website, which has .NET 3.5 assemblies in it, now that sounds like fun.

But let’s step back a bit, what is .NET 3.5 in relation to .NET 2.0?
Well really .NET 3.5 is a super-set of the .NET 2.0 framework (well, technically a super-set of .NET 3.0, which itself was a super-set of .NET 2.0, but you get the idea). But why is that? Well .NET 3.5 is built on top of the same CLR (Common Language Runtime) which powers .NET 2.0.

Since most people associate .NET 3.5 with Visual Studio 2008 so I’ll talk about them in a combined manner.

In addition to the .NET 3.5 release we also received the C# 3 compiler. This nifty little bugger brought along the translation of => to being either a Func, Action or Predicate, and it also introduced the var keyword.
But the fun thing is that because C# 3 is targeted at the 2.0 CLR all the compiled IL is perfectly valid for .NET 2.0! This is actually how (and why) multi-targeting in Visual Studio 2008 works (well, how and why at a very high level :P) and why you can use var, lambda, etc in a .NET 2.0 project provided it’s made in Visual Studio 2008.

But back to our original topic, how do I use .NET 3.5 without installing it on the server? (Note – you’ll still need it installed on the dev environment)

Putting the pieces together

So we’ll create a new ASP.NET web application, still choosing .NET 3.5 as the framework version and do everything as per normal. The tricky part is when we come to wanting to deploy the site onto our target environment, which doesn’t have .NET 3.5 installed.
Before we can do this there is one last thing we need to change within Visual Studio, you need to change the way the Visual Studio handles the referenced assemblies. Framework assemblies (well, any assembly which is in the Global Assembly Cache (GAC)) are set to Copy Local=False, you need to change this to True, so right-click the assembly and go to Properties:

Now what will happen is that when the compile is done the assembly/ assemblies will be copied into the /bin folder of your site, meaning now they are loaded into memory, but not loaded there from the GAC!

You can then take all the files and deploy them to the target environment, with the .NET 3.5 assemblies in the /bin folder, but not installed.

Really a great trick with Shared Hosting ;)

Come on down to TheFARM to share in some beers and take part in the global Umbraco 5^th birthday festivities.

Your hosts will be core Umbraco team developers Shannon Deminick & Aaron Powell, both of whom work for TheFARM (http://www.thefarmdigital.com.au).

The plan is for Shan and Aaron to run a Q&A session with some demo’s of the fun stuff TheFARM has been doing with Umbraco 4.1 and the work they have been doing on this next release.

• They'll have a look at all of the new features/fixes for 4.1 (are there are TONS)
• They'll go into a bit more in detail on some of the new things that we've integrated into the core such as LINQ to Umbraco, Umbraco Examine, new controls, enhancements, preview, etc…
• They’ll show you some of the sites we’ve built and talk through some of the implementation’s with things like Flash

Hopefully, with two of the core team on hand we should be able to answer most questions thrown at us – give us a go!

Once we're out of beers... TO THE PUB!

All of the details, address, etc.. is on the Our Umbraco website. Have a look and RSVP now!

http://our.umbraco.org/events/umbraco-5th-birthday-meetup-in-sydney

Just in case you don’t want to click through here’s the event details:

Tuesday, February 16, 2010 - 6:00 PM
Suite 101, 4 - 14 Buckingham st Surry Hills, NSW

In a previous post Shannon explained how to customise TinyMCE for what HTML elements Flash actually supports, and he finished off the post with showing how to cleanup line breaks.

To do this he used an XSLT function called normalize-space, which is great if you’re using XSLT!

I was writing a service today which was using LINQ to XML to generate the XML for Flash, but that posed a problem, how do you deal with Flash wanting to do hard breaks on new line constants?

Easy, string.Replace to the rescue!

Here’s a handy little extension method you can drop into your code libraries:

public static string NormalizeSpace(this string s) {
	if(s == null) throw new ArgumentNullException("s");
	return s.Replace("\r\n", string.Empty)
		.Replace("\r", string.Empty)
		.Replace("\n", string.Empty);
}

Nice and easy (and unsurprisingly logical!).

Currently the codebase in Umbraco 4.0.x uses quite a few iframes to render ‘controls’ as this functionality has existed this way from way back in the day and had never been upgraded… until now!

IFrames should be used sparingly, they have their uses but to render an iframe instead of a User Control is just adding overhead to the page, the client and server cpu/memory consumption and is not so cool. Here’s a nice benchmark on iframe performance: http://www.stevesouders.com/blog/2009/06/03/using-iframes-sparingly/ . As you can see, you should use iframes ONLY when completely necessary.

So on to the good news… Here’s some new controls that have been created in 4.1 (which will remove many of these iframes and make things a whole lot nicer to use)

• /umbraco/controls/Tree/TreeControl.ascx
  • Will render a new tree based on the properties set
  • This makes the following Obsolete: treeInit.aspx, treePicker.aspx  (though, these pages are still used to load trees in modal windows for pickers but shouldn’t be used directly in your code)
    • Both of these pages now simply wrap the TreeControl
  • Example usage:
    

    <umb2:Tree runat="server" ID="DialogTree" 
        App="media" TreeType="media" IsDialog="true" 
        CustomContainerId="TinyMCEInsertImageTree" ShowContextMenu="false" 
        DialogMode="id" FunctionToCall="dialogHandler" />

    
    
  • There’s quite a few other properties that allow you to customize the tree to your needs
  • There’s also a very in-depth JavaScript API
• /umbraco/controls/Images/ImageViewer.ascx
  • This is a nifty ajax control that will take a media item id and display the image
  • There’s a simple JavaScript library attached to it that allows you to dynamically update the media id to force an ajax request to refresh the image (amongst other methods)
  • This makes the following Obsolete: /umbraco/dialogs/imageViewer.aspx
    • The old codebase for imageViewer has been retained (though it should probably just wrap this control :)
  • Example usage:
    

    <umb3:Image runat="server" ID="ImageViewer" 
        ViewerStyle="ThumbnailPreview" LinkTarget="_blank" 
        ClientCallbackMethod="onImageLoaded" />

    
    
• /umbraco/controls/UploadMediaImage.ascx
  • This control is essentially what you see when you load up TinyMCE, select the insert image button, then click on the ‘Create New’ tab. It contains the logic to enter a name, select a file to upload and select the media tree node to upload it to.
  • There’s a handy JavaScript callback method you can define so that it’s executed once the upload is complete. Tons of parameters are passed to the callback containing all of the information about the file/image.
  • This makes the following Obsolete: /umbraco/dialog/uploadImage.aspx
  • Example usage:
    

    <umb4:MediaUpload runat="server" ID="MediaUploader" 
        OnClientUpload="onFileUploaded" />

    
    

Now, on to the ‘pickers’! There’s quite a few picker controls in the codebase that all essentially do the same thing but the code for them was pretty much replicated everywhere, so i decided to streamline the whole thing which should make it quite easy for anyone to make their own pickers!

• umbraco.controls.BaseTreePicker.BaseTreePicker (in the umbraco.controls assembly)
  • (yes i know the namespace and control are the same name, but that’s the way it is currently! :)
  • From the name, you would probably determine that this control is an abstract control… and you’d be correct.
  • This control implements: IDataEditor (so that it can be used as the data editor for Umbraco data type controls), and INamingContainer for obvious reasons.
  • This control exposes many properties and methods for you to modify and override to customize the picker.
  • The abstract properties are ModalWindowTitle (the title of the window that gets displayed) and TreePickerUrl (the URL to load in the modal window that is displayed)
  • This pretty much handles everything for a basic tree picker and the JavaScript has been refined to use real classes! Wow! ;)
• umbraco.editorControls.mediaChooser (in the umbraco.editorControls assembly)
  • This is the umbraco data type to select a media item from the media tree
  • It’s been upgraded to inherit from BaseTreePicker and overrides the JavaScript rendered to support Tim’s new fandangled media picker (similar to the TinyMCE media picker)
• umbraco.editorControls.pagePicker (in the umbraco.editorControls assembly)
  • This is the umbraco data type to select a content node from the content tree
  • It’s been upgraded to inherit from BaseTreePicker … it really doesn’t have any special functionality apart from setting the title and the tree picker url since all of the required functionality is in the BaseTreePicker
• umbraco.controls.ContentPicker (in the umbraco assembly)
  • This pretty much does the same thing as all of the above controls, actually it’s nearly identical to the pagePicker only you have to specify the AppAlias and TreeAlias to load for the picker.
  • It’s been upgraded to inherit from BaseTreePicker also

So basically, everything will look pretty much the same, but will be a lot faster and MUCH easier to develop with if you’re creating custom packages or whatever. It’s all backwards compatible (apart from the JavaScripting) but under the hood is much different.

So now at least when you load up the TinyMCE insert image dialog, you end up with 1 frame (the modal dialog) instead of 4!

Oh yeah, and this hasn’t been checked in to the 4.1 branch as of today… perhaps next week!

Last year there was an article posted on TechChrunch about the problem of deploying your .snv folder live, it’s a really great way to give everyone your websites source code!

Recently though while tweaking our 2 Click ASP.NET Web Application Deployment with MSBuild to include a static folder consisting of the umbraco/ umbraco_client folders (which we leave excluded from the project to ensure performance of Visual Studio) I noticed that we were including the .svn folders!

We’re generating an ItemGroup like this:

<ItemGroup>
  <Umbraco Include="$(LocationWorkingWeb)\umbraco\**\*.*"/>
  <UmbracoClient Include="$(LocationWorkingWeb)\umbraco_client\**\*.*"/>
</ItemGroup>

Which recursively adds the files from those folder, including .svn.

Balls!

Sure it’s not really a problem, we’ve got no source code stored in those folders (and anyone who is putting their own source in umbraco or umbraco_client is asking for trouble), but by including them you’re pretty much doubling the size of the folder structure too!

Luckily it’s quite easy to solve. MSBuild has a build-in Exclude attribute, so you just need to change it to look like this:

<ItemGroup>
  <Umbraco Include="$(LocationWorkingWeb)\umbraco\**\*.*" Exclude="$(LocationWorkingWeb)\umbraco\**\.svn\**\*" />
  <UmbracoClient Include="$(LocationWorkingWeb)\umbraco_client\**\*.*" Exclude="$(LocationWorkingWeb)\umbraco_client\**\.svn\**\*" />
</ItemGroup>

It looks a bit weird, you’ve got to recursively exclude the recursive contents of the .svn folder :P

It’s all about making sure you only deploy what you should have on a production server, and it goes in hand with remembering that PDB != Product Deployable Bits.

Flash doesn’t support most of the html elements of a standard web page. TinyMCE’s creators Moxiecode have thankfully given us the TinyMCE rules for flash here:

http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/valid_elements#Full_FlashMX_2004_rule_set:

So to get Umbraco & TinyMCE working to give your flash application the markup that it needs you need to modify your \config\tinyMceConfig.config file:

<validElements>
    <![CDATA[+a[href|target],
+b,
+br,
+font[color|face|size],
+img[src|id|width|height|align|hspace|vspace],
+i,
+li,
+p[align|class],
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+span[class],
+textformat[blockindent|indent|leading|leftmargin|rightmargin|tabstops],
+u
]]>
</validElements>

Then there’s the issue that flash treats real line breaks and <br/> tags exactly the same! This will probably cause you a few headaches trying to work that out. So to save you that headache, you need to output the rich text markup via XSLT to flash using the XSLT function: normalize-space

Something like:

<xsl:value-of select="normalize-space($myRichTextValue)" />

The other day Shannon was griping about a problem he’d come across when editing a user in Umbraco (a back-office account). When ever he clicked the Save button nothing happened, unless he’d gone and edited the Username field as well.

Today I noticed the same problem, I was trying to edit a user (I was changing the applications they had access to), I’d click save and nothing would happen! There was no error, there was no message from Umbraco.
It was as if the Save button was disabled.

And then it hit me, I was using Firefox and I had saved the username/ password combination when I logged into Umbraco.
That makes sense, the error seemed like some kind of client validation had been failing, but there was nothing obvious to me.
Then I realised that the password fields for the user details were hidden, so I clicked the Change Password link and look there, I have an error saying that my passwords don’t match.

Because I’d saved the username/ password in Firefox it was kind enough to auto-complete one of the password fields (using what ever algorithm Firefox does to detect password fields), but then there was nothing in the confirm field, causing the compare validator to fail.

So I cleared the field and clicked save, and all is well.

But why did it work when we changed the username? Well then Firefox detected that there was no password for that user, so it cleared the field, and the compare validator passed (it don’t compare empty fields).

Lesson learnt – be careful when you’re storing passwords :P

The FARM has just released an exciting icon package for Umbraco. FamFamFam icons have to be one of the most (if not the most) popular icon package on the net. So big thanks to Mark James for his great icons!!! And now, you can have them all in your content tree :)

It’s amazing how happy your clients can be with some really nice icons!

You can download the package from our.umbraco.org:

• our.umbraco.org package

FamFamFam icons are licensed under the Create Commons Attribution 2.5 license.

This version is not using Css sprites so you may notice performance issues if you have your browser cache disabled, but you'll have loads of cool icons to choose from. The next version will use CSS sprites so stay tuned.

A month ago I wrote a post on how to sync data across multiple Umbraco environments, and I thought that I would do an update post on how it is tracking.

Well the short answer is that it is going really quite well. We’ve quite successfully migrated content from the clients content entry environment into their production environment with next to no issues.

The only problem we’ve had is when the same document has been edited on both environments. When this happens you need to work out which is the correct version to maintain, and if it’s published you need to ensure that you’re using the correct version in the cmsContentXml table.

Only thing that needs to be kept in mind is that once the data is merged you need to ensure that the primary key seed is still higher on the content entry environment so that when you next do the synchronization the ID’s don’t clash between environments.

The only other thing that you need to be mindful of is Media, you will need to ensure there is something synchronizing that, either a tool such as SyncToy or you manually manage the Media folder synchronization.