Nibble

EmbeddedMedia.config , supporting additional third party services in the Umbraco RTE

The RTE in Umbraco 7 (and since v4.9) offers a super simple way of inserting rich content from third party services (videos from youtube, image from flickr, …) but sometimes your editors will try to insert something that isn’t supported…

image

Luckily you can easily plug in additional third party services

If service support oembed

In that case it should just be a matter of adding an additinal entry to the EmbeddedMedia.config file. Let’s say you want to support videos from TED.

The details we get from oembed:

So with those details I can add a new entry to the config file (just look at the existing ones to get an overview of the xml elements you need).

1 <!– TED Settings –> 2 <provider name="TED" type="Umbraco.Web.Media.EmbedProviders.OEmbedVideo, umbraco" supportsDimensions="False"> 3 <urlShemeRegex><![CDATA[ted\.com/]]></urlShemeRegex> 4 <apiEndpoint><![CDATA[http://www.ted.com/talks/oembed.xml]]></apiEndpoint> 5 <requestParams type="Umbraco.Web.Media.EmbedProviders.Settings.Dictionary, umbraco"></requestParams> 6 </provider>

And now content editors can easily insert talks from ted.com

image

If service doesn’t support oembed

Even if the third party service doesn’t offer oembed support it’s still possible to provide this easy way of inserting rich content.

Since you can write custom providers, so if the service has an API you can take advantage of that.

Here is an example of a custom provider, this one adds Giphy support.

1 public class Giphy : AbstractProvider 2 { 3 public override bool SupportsDimensions 4 { 5 get { return false; } 6 } 7 8 public override string GetMarkup(string url, int maxWidth, int maxHeight) 9 { 10 var u = new Uri(url); 11 //Example url http://giphy.com/gifs/reactiongifs-2vA33ikUb0Qz6 12 var id = u.Segments.Last().Split(-).Last(); 13 //using public api key atm 14 var api = string.Format("http://api.giphy.com/v1/gifs/{0}?api_key=dc6zaTOxFJmzC", id); 15 16 using(var apiClient = new HttpClient()) 17 { 18 19 var dataFromAPI = apiClient.GetAsync(api).Result; 20 21 if (dataFromAPI.IsSuccessStatusCode) 22 { 23 var APIresult = dataFromAPI.Content.ReadAsStringAsync(); 24 25 var result = JObject.Parse(APIresult.Result); 26 27 var embedUrl = result.SelectToken("data.images.original.url").Value<string>(); 28 29 return string.Format("<img src=\"{0}\"/>", embedUrl); 30 } 31 } 32 //fall back to a default ‘fail’ gif 33 return string.Format("<iframe src=\"//giphy.com/embed/{0}\" width=\"{1}\" height=\"{2}\" frameBorder=\"0\" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>", 34 "bJAi9R0WWOohO",250,153); 35 } 36 }

So once this provider is in place we also need to add an entry to the config file

1 <!– Giphy Settings , not an OEmbed one –> 2 <provider name="Giphy" type="AnimatedGifs.Giphy, AnimatedGifs"> 3 <urlShemeRegex><![CDATA[giphy\.com/]]></urlShemeRegex> 4 </provider>

And now our content editors can insert gifs Glimlach

image

So that’s how you can use the EmbeddedMedia.config file, sourcecode for the example provider is available on github https://github.com/TimGeyssens/UmbracoExampleEmbedProvider

Leave a Reply