The ajax locator package I’ve been working on the last couple of freedom fridays is available as a package on our.umbraco.org today

If you haven’t seen it in action make sure to check out this quick preview video.

Here is a quick overview of it’s features

Dashboard control

It features a dashboard control (in the developer section) that can install the google maps datatype, add a new property of that type to your doc type(s) and then geocode existing content based on the address you have stored. So you should be up and running in a couple of minutes (even if you don’t have any coordinates on your content documents yet).

Fully Customizable AJAX Locator control

By inserting the macro you have a working locator in a couple of clicks but of course it’s output is fully customizable just by updating the Partial View Macro File associated with the Macro. So you can tailor it to your needs! If you want custom google map markers check out (http://www.webiconset.com/map-icons/ and http://www.cycloloco.com/shadowmaker/shadowmaker.htm)

More

The locator control includes some nice features, it loads a default location based on the users IP address, you can set it in street view mode and there is also a directions mode.

Download

So the package is available for download on http://our.umbraco.org/projects/developer-tools/seek-and-destroy

If you are interested in the sourcecode that’s available on github

Please not that since this pacakge uses an UmbracoAPIController you’ll need at least Umbraco v6.1 to run this package

If you’ve been following the latest blog posts you know I’ve been working on Optimus (bundling and minification for Umbraco built on top of the web optimization framework). In the comments Dima Stefantsov pointed out that there is another nice framework out there called  Request reduce.

Request reduce

Compared to the web optimization framework request reduce creates bundles automaticity, this means it’s just a matter of installing and your site performance is immediately improved.

For full overview please check out http://requestreduce.org/ 

Of course all credits for this package goes to the Request reduce creator Matt Wrock

The only change I made was to make sure it ignores the umbraco backoffice since that had some side effects.

Demo

To see it in action check out this screenr

Package

Package is available on http://our.umbraco.org//projects/developer-tools/optimus-lite

We are done with the finishing touches to the Optimus package for Umbraco and are glad to announce that the 1.0 release is available today!

If you haven’t seen it in action yet, be sure to check out this quick overview

What’s new?

web optimization framework 1.1.0

The web optimization framework has been updated to the latest version (1.1.0), so you can make use of the Element template strings if you want full control over the link/script tag that will be inserted (this one’s for you James South)

@Scripts.RenderFormat(“<script src=’{0}’ async></script>”,”~/bundles/jquery”)

No empty trees

You’ll only get the dynamic scripts/stylesheet tree if you have at least 1 of the providers installed

Minification

Possible to disable minification on a bundle with the bundle editor UI

Bundle dynamic stylesheets/scripts directly

As requested by Jeavon Leopold it’s now possible to include less/sass/typescript/coffeescript files directly in a bundle (needs to be enabled in the \App_Plugins\Optimus\config\bundles.config file)

Caching

Some code refactor has been done to speed up several parts of the core

Installer

And finally the installer now handles the necessary files updates (thanks to the package action contrib team for the helpful snippets)

Dowload

The package is available at http://our.umbraco.org//projects/developer-tools/optimus

If you are interested in the sourcecode that can be found at https://github.com/TimGeyssens/BundlingAndMinificationForTheMasses

In collab with Mr Warren Buckley we are glad to announce the beta release of a new Umbraco package.

Meet Optimus

In essence Optimus is a UI layer on top of  the Asp.net Web Optimization framework for Umbraco, making it possible to create script and style bundles from within the backoffice.

Why should you bundles those resources? Well in short: bundling and minification improves request load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript), for a good intro check http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

After installing Optimus you’ll end up with some new bits in the Settings section that allow you to create both script and style bundles by simply selecting the available files in the /css or /scripts folder

In addition to manually creating these bundles you’ll also find a new option in the edit template toolbar (for both views and masterpages) that allows you to simply select script/link tags and auto create a bundle from those (can’t get any easier).

more than meets the eye

Besides being able to bundle your resources Optimus also features a provider model for dynamic stylesheet and script languages.

The providers available today are:

• Less http://lesscss.org/
• Sass http://sass-lang.com/
• Coffeescript http://coffeescript.org/
• TypeScript http://www.typescriptlang.org/

As a final step of the installation you’ll be able to choose the providers you want to include (thanks to Matt Brailsford for letting us lend some code from the Universal Media Picker project).

Depending on the ones you installed you’ll be able create files of that type

In the new dynamic scripts tree

And dynamic stylesheets tree

Once created you can start writing code in the editor, the editor will check for errors and highlight the linenumber in case of an error.

If the transformation is successful you’ll end up with a plain js/css file that you can then use (also in bundles)

Demo

For a quick demo check out this screencast

It’s a beta

So today the beta is available on http://our.umbraco.org/projects/developer-tools/optimus

In addition to installing the package you’ll need to do some manual web.config updates outlined here:
https://github.com/TimGeyssens/BundlingAndMinificationForTheMasses/blob/master/OptimusBetaInstallation.md(of course this will be done automatically by the final release)

It’s only been tested on Umbraco v6 but for the final release we’ll try to include the latest v4 (eta next friday).

As a result of freedom fridays at the umbraco HQ I’ve made a new little umbraco package.

Make sure your content editors don’t end up editing the same document and overwriting each others changes with this addon for umbraco.

In environments with multiple editors the editors will see in the umbraco content tree which documents are currently being edited.

Also on the content page there will be a notification when another editors are viewing/editing the same document.

For a quick demo check out this video

You can download the package on the project page at http://our.umbraco.org/projects/backoffice-extensions/look-who’s-editing-now

I’ve created my share of umbraco packages and thought I’d try to share some tips/insights.

Creating packages is easy, the built-in package creator makes it super simple and with package actions you can perform additional common tasks (like updating the xsltextensions) without having to write a single line of code.

It really takes a minimal effort to package something up that you made, even if it’s very project specific it should be possible to isolate the functionality and package it up.

Dare to share

Even a simple package can be a great help, so don’t hesitate and share

Naming

To avoid conflicts and overwriting other existing items when installing a package, make sure you have unique and meaningful names

• Assemblies

Starting these with your name or company name followed by a project name should be enough to make them unique
FE: Nibble.Umb.Poll

• Stylesheets, Scripts, Document types, Templates, XSLT files, Macros

A unique and meaningful name that links them back to the package, so it easy to see that they are part of a package
FE: not style.css but starrating.css
not list.xslt but bloglistposts.xslt       

• Usercontrols

placing these in a new unique folder inside the /usercontrols folder makes it easy to see that they are part of a package
FE: /usercontrols/Nibble.Umb.Poll/poll.ascx

• Config files

place these in the /config folder (again, with a unique and meaningful name)

Installation

Package are really easy to install but in some cases the package installation might fail. So it’s always great to provide some manual installation instructions, just in case.

Think ahead

You might have created a package with a simple site in mind, but don’t forget they can/will also be used on multilingual sites, site running a different database engine. Or in case it’s a datatype, will be used with Canvas, autoform, doc2form. It’s a great plus if this is taken into account.

What doesn’t work

If the package only works with a certain umbraco version and up or if it only works on sql server, don’t forget to mention this to avoid that people install it on non supported installations.

I’ve also added this post to the wiki on our.umbraco.org, if you have anything to add/change (or correct my bad spelling) please do so .

I finally got round to polish and package the umbraco poll I made some time ago. So here it is …

The package installs the following:

The document types (Polls, Poll, Poll Answer) will be used to setup the polls.

So you’ll have a Polls document that will contain several Poll documents and these will have several Poll Answer documents beneath it.

After you have setup a poll with some answers in your content area you can get the poll on your page.

First add a reference to the installed stylesheet (/css/Nibble.Umb.Poll.css) and then place the Poll macro on your template.

Please note that:

• The macro will have to be placed inside a form with runat=”server” attribute
• There has to be a scriptmanager on the page

The poll macro has several parameters:

• Poll Node Id: This is the id of the Poll content node that you want to display
• Display Only: Check this if you only want to display the results of a poll
• Submit On Select: Check this if you want to submit the vote when a user selects a answer
• Hide Submit: Check this if you want to hide the submit button
• Sort Results: Check this if you want that the results are sorted by number of votes
• Width Total Votes: Instead of the highest number of votes being equal to 100% width, the total number of votes is 100%
• Hide Question: Check this if you want to hide the question
• Random Poll: Check this if you want to display a random Poll, you’ll also have to update the Poll Node Id to the Polls document (containing the different polls)

So depending on the parameters (Submit On Select and  Hide Submit) your poll can look like:

or (with submit button)

The Results can look like this:

Sorted:

Width Total Votes:

You can download the package here: http://our.umbraco.org/projects/poll

I recently got a comment from a person that downloaded a package but didn’t know what steps to take to installing it.
So here is a small how to.

After you have successfully logged into umbraco go to the developer section (section menu is on the bottom left, if you don’t see the developer icon you don’t have permission to view that section).

Then expand the Packages tree

Since we’ll install a local (downloaded) package select ‘Install local package’, the install local package page will load.

Then just choose the package from your machine and hit the load package button (it won’t be installed yet) .

Now (if it’s a valid package) you’ll see the next step. Here you’ll need to accept the license and hit the install package button

If the package contains a custom usercontrol with some custom installation steps that will be loaded next (like in this case with the datefolder package).

Once these custom steps have been completed (if there are any) the package should be installed.

You should now be able to view the installed package in the ‘installed packages part’ of the packages tree.

There you’ll also be able to uninstall the package.

Based on the related links datatype that’s been added to umbraco v4.

This is a similar datatype but for selecting media, so a multiple media picker.

You can add media by setting a caption and selecting a media item. Very similar to the related links.

The package will also install a xslt and marco that shows how to use xslt to display the stored media.

<?xml version=”1.0″ encoding=”UTF-8″?>

<!DOCTYPE xsl:stylesheet [

  <!ENTITY nbsp “ ”>

]>

<xsl:stylesheet

    version=”1.0″

    xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”

    xmlns:msxml=”urn:schemas-microsoft-com:xslt”

    xmlns:umbraco.library=”urn:umbraco.library”

    exclude-result-prefixes=”msxml umbraco.library”>

  <xsl:output method=”xml” omit-xml-declaration=”yes” />

  <xsl:param name=”currentPage”/>

  <!– Input the related links property alias here –>

  <xsl:variable name=”propertyAlias” select=”string(’relatedmedia’)”/>

  <xsl:template match=”/”>

    <!– The fun starts here –>

    <ul>

      <xsl:for-each select=”$currentPage/data [@alias = $propertyAlias]/media/item”>

        <li>

          <xsl:element name=”a”>

                <xsl:attribute name=”href”>

                  <xsl:value-of select=”umbraco.library:GetMedia(./@id,’false’)/data [@alias = ‘umbracoFile’]”/>

                </xsl:attribute>

            <xsl:value-of select=”./@title”/>

          </xsl:element>

        </li>

      </xsl:for-each>

    </ul>

  </xsl:template>

</xsl:stylesheet>

This is a first version of a new mailer for umbraco v4. It’s similar to the ultrasimplemailer but one main difference is that it isn’t a datatype but it’s a new item in the context menu. Since it needs rendertemplate support it’s only possible to use it with v4.0.1 and upper versions.

Intro

After Installation you’ll have a new item in the context menu: send as mail.

Hitting this option will open a new modal. Where you’ll be able to send a published document as a mail.

The document needs to be published because the mail contents will be fetched from the rendered document output. Trying this on an un-published document will result in an error message.

In the first step you’ll need to supply:

• From emailaddress
• From display name
• Subject (this will be the document name but can be chanched)

And choose to send it to a single email address or to multiple (mass option).

When sending a single mail you’ll just need to supply an email address. If a member is found with that email address his data will be merged (more about the merging below).

Choosing the mass option will allow to select a membergroup and to supply a filter.

For example if you have a property on your membertype with the alias unsubscribe of the type true/false and you only want to send to members that don’t have this set to true.

You can supply the filter

unsubscribe@,0

Once everything is set it’s just a matter of hitting the send button and you’ll see the progress in the status part.

Merging member data

It’s possible to merge member data. If one of these are found then they will be replaced

• [memberId]
• [memberName]
• [memberLoginName]
• [memberPassword]
• [memberEmail]

Custom properties are also possible

• [custompropertyalias]

So something like

Hi [memberName],

Your password is: [memberPassword]

Will be recieved by the member as

Hi John,

Your password is: 1234

Images

Another detail is that if there are images they will be added as a linked resource.

Extra

The package will also add an xslt extension, making it possible to send a rendered page directly to an email address or a member from xslt (with merging of data).

And it’s also possible to use the methods from .net.

A quick example:

I have setup a forgot password page that looks like this when previewed:

And I would like to use the asp.net PasswordRecovery control to send this mail instead of the regular passwordrecovery mail.

So all I need to do is override the PasswordRecovery mail using the SendingMail event.

 protected void PasswordRecovery1_SendingMail(object sender, MailMessageEventArgs e)

        {

            Library.SendMailFromPageToMember(“test@nibble.be”,

                Member.GetMemberFromLoginName(PasswordRecovery1.UserName),

                “Password recovery Mail”,

                1056);

            e.Cancel = true;

        }

And call the SendMailFromPageToMember method, supply a from email address, the member (using umbraco.cms.businesslogic.member)  , the subject and the id of the page.

The result: