Nibble

Archive for September, 2014

Using the media picker in your custom Umbraco backoffice pages 1

Posted September 12, 2014

I’ve extended the Custom sections/trees/Pages/Dialogs in Umbraco v7 example project with the use of a media picker. I’ll quickly outline the bits needed.

So first we need a place to store the media id, this will be on the person class

1 [DataMember(Name = "pictureId")]
2 public int PictureId { get; set; }

Then update the view to display a media picker (you have full control over this markup). Important bits here are the openMediaPicker call, the ng-if and the stuff between {{}} 

 1 <umb-control-group label="Picture" description="Person’s picture’">
 2     <ul class="unstyled list-icons" ng-if="node">
 3         <li>
 4             <i class="icon icon-delete red hover-show pull-right" ng-click="removePicture()"></i>
 5 
 6             <i class="icon {{node.icon}} hover-hide"></i>
 7             {{node.name}}
 8         </li>
 9     </ul>
10     <ul class="unstyled list-icons">
11         <li>
12             <i class="icon icon-add blue"></i>
13             <a href ng-click="openMediaPicker()" prevent-default>
14                 Select
15             </a>
16         </li>
17     </ul>
18 </umb-control-group>

Now in the controller we need the openMediaPicker function (it’s using the dialogService here)

1 $scope.openMediaPicker = function() {
2     dialogService.mediaPicker({ callback: populatePicture });
3 }

And the callback method being

1 function populatePicture(item) {
2     $scope.node = item;
3     $scope.person.pictureId = item.id;
4 }

So we set the pictureId property of the person to the id of the returned media entity. To display the node name and node icon we set a node property on the model.

To remove the selected media item

1 $scope.removePicture = function() {
2     $scope.node = undefined;
3     $scope.person.pictureId = 0;
4 }

So this will now work to select and remove an item but we also need to make sure that when the page loads the node property on the model is populated (making use of entityResource so make sure to inject that).

1 if ($scope.person.pictureId > 0){
2     entityResource.getById($scope.person.pictureId, "Media").then(function (item) {
3         $scope.node = item;
4     });
5 }

That’s it, complete example project is available at https://github.com/TimGeyssens/UmbracoAngularBackofficePages/

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

Posted September 12, 2014

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