Nibble

Archive for October, 2012

Embedding third party media in Umbraco 14

Since Umbraco v4.9 embedding third party media in the RTE has gotten a lot easier, it’ just a matter of supplying the Url to the video/image/sound/poll/… you want to add setting the size and hitting insert!

image

This is done by making use of the oembed format so every site that support the format can be supported by the dialog in a minute  (if it isn’t already) Smile

All this is setup in the new config file /config/EmbeddedMedia.config, for each supported third party site there is an entry in the config file

  <!-- Youtube Settings -->
  <provider name="Youtube" type="Umbraco.Web.Media.EmbedProviders.OEmbedVideo, umbraco">
    <urlShemeRegex><![CDATA[youtu(?:\.be|be\.com)/(?:(.*)v(/|=)|(.*/)?)([a-zA-Z0-9-_]+)]]></urlShemeRegex>
    <apiEndpoint><![CDATA[http://www.youtube.com/oembed]]></apiEndpoint>
    <requestParams type="Umbraco.Web.Media.EmbedProviders.Settings.Dictionary, umbraco">
      <param name="iframe">1</param>
      <param name="format">xml</param>
    </requestParams>
  </provider>

The provider that needs to be used (most of the time it’s oembed), a regex that will match the supported urls, the api endpount for the oembed stuff and some optional request params if needed.

So if a third party site supports oembed and isn’t supported by the insert third party media dialog yet it’s just a case if adding an entry to the config file

But the implementation isn’t fixed to oembed it’s also possible to plug in custom providers that don’t make use of the oembed format

Look at the following entry for twitgoo

  <!-- Twitgoo Settings , not an OEmbed one -->
  <provider name="Twitgoo" type="Umbraco.Web.Media.EmbedProviders.Twitgoo, umbraco">
    <urlShemeRegex><![CDATA[twitgoo\.com/]]></urlShemeRegex>
  </provider>

That makes use of a custom provider that looks like

using HtmlAgilityPack;
 
namespace Umbraco.Web.Media.EmbedProviders
{
    public class Twitgoo : AbstractProvider
    {
        public override bool SupportsDimensions
        {
            get
            {
                return false;
            }
        }
 
        public override string GetMarkup(string url, int maxWidth, int maxHeight)
        {
            var web = new HtmlWeb();
            var doc = web.Load(url);
 
            var img = doc.DocumentNode.SelectSingleNode("//img [@id = ‘fullsize’]").Attributes["src"];
 
            return string.Format("<img src=\"{0}\"/>",
               img.Value);
        }
    }
}

Which will basically search for the element with id full-size and return an image using the src attribute of the full-size element found.

So you can also write your own providers for sites you wish to support Smile

Create/Update COntour forms code first 4

Another result of freedom Fridays at the Umbraco HQ, an addon for Umbraco Contour the official form builder that will allow you to create/update forms from code.

It’s heavily inspired by uSiteBuilder (they did all the hard work).

With this add-on you will be able to design your Contour forms from visual studio, here is a simple example:

   public enum FormPages
    {
        Contact
    }
 
    public enum FormFieldsets
    {
        Details
    }
 
    [Form("Another Contact Form", MessageOnSubmit = "Thank you")]
    public class AnotherContactForm : FormBase
    {
        [Field(FormPages.Contact, FormFieldsets.Details,
           Mandatory = true)]
        public string Name { get; set; }
 
        [Field(FormPages.Contact, FormFieldsets.Details,
            Mandatory = true)]
        public string Email { get; set; }
 
        [Field(FormPages.Contact, FormFieldsets.Details,
           Mandatory = true,
           Type = typeof(Umbraco.Forms.Core.Providers.FieldTypes.Textarea))]
        public string Message { get; set; }
 
    }

This code will result in the following form

image

It’s also possible to attach third party functionality either by attaching workflows from code

        public override List<WorkflowBase> Workflows
        {
            get
            {
                return new List<WorkflowBase> {
                        new Email()
                    };
            }
        }

With the email class being as follows

    [Workflow("Send Email",FormState.Submitted)]
    public class Email: WorkflowBase
    {
 
        public override WorkflowType Type
        {
            get
            {
                return new Umbraco.Forms.Core.Providers.WorkflowTypes.SendEmail
                    {
                        Email = "test@test.com",
                        Subject = "the form Contact Form was submitted",
                        Message = "the form Contact Form was submitted, " +
                                    "this is the list of values it contained, " +
                                    "you can turn this email off under workflows in Umbraco Contour"
                    };
            }
        }
    }

Or by overriding the submit method (form class properties will be populated with the record values Smile )

        public override void Submit()
        {
            
            umbraco.library.SendMail(
                Email,
                "me@company.com",
                "New Contact",
                string.Format("New message from {0} : {1}",Name,Message),
                false);
        }

The main advantages of this code first approach is that forms and workflows can be source controlled, support for unit testing, support for automated deployments, easy form maintenance through code…

The add-ons and some example forms are available on the project page at our.umbraco.org

Full sourcecode is available here

For a quick demo watch:

Look who’s editing now 2

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.

Tree

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

Page

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