diff --git a/Add-ons/UmbracoForms/Developer/Custom-Markup/index.md b/Add-ons/UmbracoForms/Developer/Custom-Markup/index.md index 651fcb9203e..13192dc5a86 100644 --- a/Add-ons/UmbracoForms/Developer/Custom-Markup/index.md +++ b/Add-ons/UmbracoForms/Developer/Custom-Markup/index.md @@ -214,7 +214,7 @@ Contents of the FieldType.Textfield.cshtml view: @{if (Model.Validate) { data-val-regex="@Model.InvalidErrorMessage" data-regex="@Model.Regex"}} /> -By default the form makes uses of jquery validate and jquery validate unobtrosive that's why you see attribute like data-val and data-val-required again this can be customized but it's important to keep the id of the control to @Model.Id since that is used to match the value to the form field. +By default the form makes uses of jQuery validate and jquery validate unobtrosive that's why you see attribute like data-val and data-val-required again this can be customized but it's important to keep the id of the control to @Model.Id since that is used to match the value to the form field. ### Customizing for a specific form diff --git a/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md b/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md index f778d21f9e5..07f31cf20b1 100644 --- a/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md +++ b/Add-ons/UmbracoForms/Developer/Extending/Adding-a-Fieldtype.md @@ -54,7 +54,7 @@ Then we will start building the view at `Views\Partials\Forms\Fieldtypes\FieldTy The view simply takes care of generating the UI control and setting its value. -On the view, it is important to note that the id attribute is fetched from @Model.Id. You'll also see that we are using jquery validate unobtrusive to perform client side validation so that's why we are adding the data* attributes. +On the view, it is important to note that the id attribute is fetched from @Model.Id. You'll also see that we are using jQuery validate unobtrusive to perform client side validation so that's why we are adding the data* attributes. ## Umbraco backoffice view diff --git a/Development-Guidelines/Coding-Standards/index.md b/Development-Guidelines/Coding-Standards/index.md index b36e28be2aa..c12d051e863 100644 --- a/Development-Guidelines/Coding-Standards/index.md +++ b/Development-Guidelines/Coding-Standards/index.md @@ -18,7 +18,7 @@ _Coding standards and naming conventions for all languages used in the Umbraco c ### File names * All file names throughout the solution will be **ProperCase/PascalCase** - this is extremely important for Visual Studio so that the generated class names follow the correct c# naming conventions -* **However**, there is one exception to this rule and in v7 the AngularJs project (*Umbraco.Web.UI.Client*) all files names need to follow the convention for that project which is that all file names are **lowercased** +* **However**, there is one exception to this rule and in v7 the AngularJs project (*Umbraco.Web.UI.Client*) all file names need to follow the convention for that project which is that all file names are **lowercased** ### C# When developing new Class Libraries we will be adhereing as closely as possible to the official guidelines as proposed by Microsoft [http://msdn.microsoft.com/en-us/library/ms229042.aspx](http://msdn.microsoft.com/en-us/library/ms229042.aspx) diff --git a/Development-Guidelines/Coding-Standards/jquery-guidelines.md b/Development-Guidelines/Coding-Standards/jquery-guidelines.md index e66b98c3621..3faf0a8d2a2 100644 --- a/Development-Guidelines/Coding-Standards/jquery-guidelines.md +++ b/Development-Guidelines/Coding-Standards/jquery-guidelines.md @@ -1,16 +1,16 @@ -# JQuery coding guidelines +# jQuery coding guidelines -_Ensure that you have read the [JavaScript Guidelines](js-guidelines.md) document before continuing. As documented in [JavaScript Guidelines](js-guidelines.md) method names are named in "camelCase" and therefore jQuery plugins (since they are methods) are named as "camelCase"._ +_Ensure that you have read the [JavaScript Guidelines](js-guidelines.md) document before continuing. As specified in the [JavaScript Guidelines](js-guidelines.md) document, method names are named in "camelCase" and therefore jQuery plugins (since they are methods) are named as "camelCase"._ -Just like with other JavaScript in the Umbraco back-office, you need to wrap your class in the jQuery self executing function if you want to use the dollar ($) operator. +Just like other JavaScript in the Umbraco back-office, you need to wrap your class in the jQuery self executing function if you want to use the dollar ($) operator. ## Simple jQuery plugins Simple jQuery plugins don't require an internal class to perform the functionality and therefor do not expose or return an API. These could be as simple as vertically aligning something: (function($) { $.fn.verticalAlign = function(opts) { - //were not using opts (options) for this plugin - //but you could! + // we are not using opts (options) for this plugin + // but you could! return this.each(function() { var top = (($(this).parent().height() - $(this).height()) / 2); $(this).css('margin-top', top); @@ -27,46 +27,46 @@ There are many different ways to expose an API for a jQuery plugin, in Umbraco t * `$("#myId").myFirstJQueryPlugin();` = to instantiate the plugin * `var pluginApi = $("#myId").myFirstJQueryPluginApi();` = to retrieve the plugin API for that selector -So essentially, we'll be creating 2 plugins, one to instantiate it and one to retrieve the API. The naming conventions are obvious, create your plugin name and then append the term *Api* to it to create your API plugin name. +So essentially, we'll be creating 2 plugins, one to instantiate it and one to retrieve the API. The naming conventions are obvious, create your plugin name and then append the term *Api* to create your API plugin name. ### Creating the plugins -//using the same vertical align concept but we'll expose an API for it -//( not that this is very useful :) ) +// using the same vertical align concept but we'll expose an API for it +// ( not that this is very useful :) ) Umbraco.Sys.registerNamespace("MyProject.MyNamespace"); (function($) { - //create the standard jQuery plugin + // create the standard jQuery plugin $.fn.verticalAlign = function(opts) { - //were not using opts (options) for this plugin - //but you could! + // we are not using opts (options) for this plugin + // but you could! return this.each(function() { - //create the aligner for the current element + // create the aligner for the current element var aligner = new MyProject.MyNamespace.VerticalAligner($(this)); }); }; - //create the Api retriever plugin + // create the Api retriever plugin $.fn.verticalAlignApi = function () { - //ensure there's only 1 + // ensure there is only one if ($(this).length != 1) { throw "Requesting the API can only match one element"; } - //ensure this has a vertical aligner applied to it + // ensure this has a vertical aligner applied to it if ($(this).data("api") == null) { throw "The matching element had not been bound to a VerticalAligner "; } return $(this).data("api"); } - //Create a js class to support the plugin + // create a js class to support the plugin MyProject.MyNamespace.verticalAligner = function(elem) { - //the jQuery selector + // the jQuery selector var _e = elem; var api = { align: function() { @@ -74,10 +74,11 @@ Umbraco.Sys.registerNamespace("MyProject.MyNamespace"); _e.css('margin-top', top); } } - //store the api object in the jquery data object for - //the current selector + // store the api object in the jQuery data object for + // the current selector _e.data("api", api); - //return the api object + + // return the api object return api; } @@ -87,7 +88,7 @@ Umbraco.Sys.registerNamespace("MyProject.MyNamespace"); To use the plugin and api is very easy: -NOTE: this is an example plugin, i realize this is not really that useful as a non-simple plugin! +NOTE: this is an example plugin, I realize this is not really that useful as a non-simple plugin! $("#myId").verticalAlign(); //now to get the api and do the alignment diff --git a/Development-Guidelines/Coding-Standards/js-guidelines.md b/Development-Guidelines/Coding-Standards/js-guidelines.md index 7c0cef06fb5..b4009d9be66 100644 --- a/Development-Guidelines/Coding-Standards/js-guidelines.md +++ b/Development-Guidelines/Coding-Standards/js-guidelines.md @@ -15,7 +15,7 @@ The above code will require a reference to the NamespaceManager.js file which sh If you are going to use jQuery and its dollar ($) operator, you will need to wrap your code in a self executing function, this is to ensure that your code will still work with jQuery.noConflict() turned on. Example: (function($) { - //your code goes here + // your code goes here alert($); })(jQuery); @@ -23,42 +23,42 @@ To create jQuery plugins, see the [jQuery Plugin Guidelines](jquery-guidelines.m ## Creating classes -There are actually quite a few different ways to create classes in JavaScript. For Umbraco we have opted to use the 3rd party, classical inheritance library, [Base2](http://base2.googlecode.com/svn/version/1.0.2/doc/base2.html#/doc/!base2) to make class declarations simple and extendable: +There are actually quite a few different ways to create classes in JavaScript. For Umbraco we have opted to use the 3rd party, classical inheritance library, [Base2](http://base2.googlecode.com/svn/version/1.0.2/doc/base2.html#/doc/!base2) to make class declarations simple and extendable: Umbraco.Sys.registerNamespace("MyProject.MyNamespace"); MyProject.MyNamespace.NamePrinter = base2.Base.extend({ - //in order to make private methods/variables accessible - //to derived types, everything actually has to be public - //so to identify private variables, just prefix with an underscore + // in order to make private methods/variables accessible + // to derived types, everything actually has to be public + // so to identify private variables, just prefix with an underscore - //private methods/variables + // private methods/variables _isDebug: true, _timer: 100, _currIndex: 0, _log: function (p) { - //this is a private method that can only be - //accessed inside of this class + // this is a private method that can only be + // accessed inside of this class if (this._isDebug) { console.dir(p); } } - //public methods/variables + // public methods/variables name: ctorParams, start: function() { this._log("start method called"); - //need to create a closure so we have a reference to our - //current this object in the interval function + // need to create a closure so we have a reference to our + // current this object in the interval function var _this = this; - //this will write the name out to the console one letter - //at a time every _timer interval + // this will write the name out to the console one letter + // at a time every _timer interval setInterval(function() { if (_this._currIndex < _this.name.length) { console.info(_this.name[_this._currIndex]); @@ -74,8 +74,8 @@ Using the class above is easy: var printer = new NamePrinter("Shannon"); printer.start(); - //or since we exposed the name property publicly, - //we can set it after the constructor + // or since we exposed the name property publicly, + // we can set it after the constructor var printer2 = new NamePrinter(); printer2.name = "Shannon"; printer2.start(); @@ -90,15 +90,15 @@ Define a singleton class: MyProject.MyNamespace.NamePrinterManager = base2.Base.extend({ - //in order to make private methods/variables accessible - //to derived types, everything actually has to be public - //so to identify private variables, just prefix with an underscore + // in order to make private methods/variables accessible + // to derived types, everything actually has to be public + // so to identify private variables, just prefix with an underscore - //private methods/variables + // private methods/variables _registeredPrinters: [], - //public methods/variables + // public methods/variables registerPrinter: function(printer) { this._registeredPrinters[printer.name] = printer; @@ -107,9 +107,9 @@ Define a singleton class: return this._registeredPrinters[printer.name]; } - }, { //Static members + }, { // Static members - //private methods/variables + // private methods/variables _instance: null, // Singleton accessor @@ -121,7 +121,7 @@ Define a singleton class: }); -Defining a singleton is the same as defining a regular class, except that we also define a static "getInstance" accessor for accessing the entity in a controlled mannor. By providing the static accessor we can ensure only one instance of the class is created per request. +Defining a singleton is the same as defining a regular class, except that we also define a static "getInstance" accessor for accessing the entity in a controlled manner. By providing the static accessor we can ensure only one instance of the class is created per request. Using the singleton is very easy: @@ -130,7 +130,7 @@ Using the singleton is very easy: ## Static classes -Sometimes its useful to have static classes that require no constructor. Before you make one of these, definitely make sure that you wont require different instances of one. +Sometimes its useful to have static classes that require no constructor. Before you make one of these, definitely make sure that you won't require different instances of one. Static classes are very easy: @@ -153,6 +153,6 @@ Both singleton and static classes allow you access methods directly without havi A singleton class can hold information which can be manipulated and retrieved via its public methods and will be stored between method calls, where as static methods should only manipulate and return values which it can gather from its parameters and should not be persisted between individual method calls. -A good example of a Singleton is the one highlighted above, "NamePrinterManager". Here printers can be registered using the registerPrinter method for storage, and later retrieved using the getPrinter method. Here, a singleton is used as you will only want one central repository of printers. +A good example of a Singleton is the one highlighted above, "NamePrinterManager". Here printers can be registered using the registerPrinter method for storage, later retrieved using the getPrinter method. Here a singleton is used as you will only want one central repository of printers. A good example use of a Static class is for helper methods, where each method will perform a single self contained task based upon the parameters passed in and will return a immediate response. diff --git a/Development-Guidelines/building-angular-project.md b/Development-Guidelines/building-angular-project.md index d74d36e7b40..297a0f32adf 100644 --- a/Development-Guidelines/building-angular-project.md +++ b/Development-Guidelines/building-angular-project.md @@ -3,25 +3,21 @@ ## Overview Umbraco 7 has a slightly unorthodox project structure, compared to a normal asp.net project. This is by design, a choice from the beginning to embrace a much larger group than "just" the developers who know how to use Visual Studio. -As a result, the Umbraco UI is not a Visual Studio project, but simply a collection of folders and files, following certain conventions, and a small configuration file called `gruntfile` - we will get to the grunt part in a moment. +As a result, the Umbraco UI is not a Visual Studio project, but simply a collection of folders and files, following certain conventions, and a small configuration file called `gruntfile` - we will get to the Grunt part in a moment. This means that anyone with a text editor can open the UI source, make changes and run the project, without having Visual Studio installed - we will get into how to do that in a moment as well. -The bottom line is the UI project has zero dependencies on asp.net or Windows. However you will need node.js installed, but don't worry we will get into that in a second. +The bottom line is the UI project has zero dependencies on asp.net or Windows. However you will need Node.js installed, but don't worry we will get into that in a second. ## Prerequisites Umbraco 7 needs a couple of things to run: ### Node.js -To compile and run the UI project you need Node.js installed, which is available for both Windows and OSX. - -[Read more at the official **Node.js** website](https://nodejs.org/) +To compile and run the UI project you need Node.js installed, you can get that at [http://nodejs.org](nodejs.org) for both Windows and OSX. ### Grunt -When you have node.js installed, you need to install Grunt. Grunt is a simple JavaScript task runner, basically like Nant, Msbuild or any traditional build system. - -[Read more at the official **Grunt** website](https://gruntjs.com/) +When you have Node.js installed, you need to install Grunt. Grunt is a simple JavaScript task runner, basically like Nant, Msbuild or any traditional build system [http://gruntjs.com](more about grunt here). To install, open a terminal and run: @@ -34,7 +30,7 @@ For OSX users, you will most likely need to do: This installs a `grunt` command into your terminal so you can run Grunt scripts with simple commands. That might sound scary, but really it isn't, while working with Umbraco 7, you will become really good friends with `grunt` and your terminal. ### Project dependencies -Now its time to install all the dependencies that the project requires to compile, debug, test, minify and so on. Luckily this is all automatic and is done with the node.js package manager (which you already have installed with node) +Now its time to install all the dependencies that the project requires to compile, debug, test, minify and so on. Luckily this is all automatic and is done with the Node.js package manager (which you already have installed with node) In your terminal, browse to the `Umbraco.Web.Ui.Client` folder and run the command: diff --git a/Development-Guidelines/umbraco-web.ui-client.md b/Development-Guidelines/umbraco-web.ui-client.md index d87ee9953a5..8b40a518121 100644 --- a/Development-Guidelines/umbraco-web.ui-client.md +++ b/Development-Guidelines/umbraco-web.ui-client.md @@ -3,17 +3,17 @@ _This is the AngularJS back office UI project_ ## Overview -This document outlines where the different files in the Umbraco 7 source code is. +This document outlines the location of different files in the Umbraco 7 source code. The Client-side part of Umbraco 7 is located in the project folder: `Umbraco.Web.Ui.Client ## Root folders -The folders found in the root of the client-side project and what they contain: +The folders found in the root of the client-side project and their contents: */assets* This folder contains various client-side assets, most of them are obsolete by now and will over time be merged into the source */build* -The folder containing the compiled and minified bits outputted by grunt +Folder containing the compiled and minified bits outputted by Grunt */docs* Automated documentation files by ngdoc project from inline comments in source files as well as from .ngdoc files in /docs/src/ @@ -22,7 +22,7 @@ Automated documentation files by ngdoc project from inline comments in source fi Folder containing all 3rd party dependencies used by the Umbraco web application */node_modules* -Dependencies used by nodejs and grunt to build the project +Dependencies used by Node.js and Grunt to build the project */src* The source code of Umbraco 7 UI @@ -31,46 +31,46 @@ The source code of Umbraco 7 UI Test configuration and test files used by the karma testrunner to unit-test the project. ## Source folders -Inside the /src folder, the Umbraco 7 source code is devided into 3 groups of code: +Inside the /src folder, the Umbraco 7 source code is divided into 3 groups of code: - Less files - Common / shared JavaScript - Views ### Less files -Everything is loaded into the belle.less which specifies what files to include, the variables.less contains global variabls +Everything is loaded into the belle.less which specifies what files to include, the variables.less contains global variables ### /views -The Views folder contains all the html for the application as well as the Controllers used on those views. The convention for views and controllers are: +The Views folder contains all the HTML for the application as well as the controllers used on those views. The convention for views and controllers are: -- /views/section/Viewname.html +- /views/section/viewname.html - /views/section/section.viewname.controller.js -So if you are looking for the html and JavaScript used by the content editor look in /src/views/content/edit.html and `/src/vies/content/content.edit.controller.js` +So if you are looking for the HTML and JavaScript used by the content editor look in /src/views/content/edit.html and `/src/views/content/content.edit.controller.js` ### /common -The Common folder contains all the items that are share between multiple parts of the application, such as Services, Directives and Filters. +The Common folder contains all the items that are shared between multiple parts of the application, such as Services, Directives and Filters. -So if you want to access the navigationService look in `/src/common/services/navigation.service.js` +If you would like to access the navigationService look in `/src/common/services/navigation.service.js` -For the Umbraco 7 application, we also have introduce the concept of a `Resource`, this term is used for a shared service which primarily is used to access data from the database and perform crud operations on this data. +For the Umbraco 7 application, we have also introduced the concept of a `Resource`, this term is used for a shared service which primarily is used to access data from the database and perform CRUD operations on this data. Example resources could be: - /src/common/resources/media.resource.js - /src/common/resources/entity.resource.js -All resources returns a promise when data is fetched, they use the same pattern for errors and generally require a http backend to work. +All resources return a promise when data is fetched, they use the same pattern for errors and generally require a HTTP backend to work. On our serverless setup, we use a mocked http backend to simulate data. ### Packages -Folder containing various sample projects on how to use the external api, good for referencing how the package.manifest and property editors work. +Folder containing various sample projects on how to use the external API, good for referencing how the package.manifest and property editors work. ### app.js and app.dev.js -The central application script, which handles what modules to inject, app.js is for production, app.dev.js is for testing +The central application script handles which modules to inject, app.js is for production, app.dev.js is for testing ### loader.js -yepnope.js based loader for async loading JavaScript files, this file specifies what files to load on application start +yepnope.js based loader for async loading JavaScript files, this file specifies which files to load on application start ### routes.js -Routing setup for /umbraco/ pages, by default it contains a mvc-like convention based pattern, which means that we not very often need to modify this. \ No newline at end of file +Routing setup for /umbraco/ pages, by default it contains an mvc-like convention based pattern, which means that we seldom need to modify this. \ No newline at end of file diff --git a/Development-Guidelines/working-with-code.md b/Development-Guidelines/working-with-code.md index 38ea2627586..5e81b987ae3 100644 --- a/Development-Guidelines/working-with-code.md +++ b/Development-Guidelines/working-with-code.md @@ -5,24 +5,24 @@ _Guidelines for creating and updating code in the Umbraco core_ ## General Guidelines * All new code goes in either *Umbraco.Core* or *Umbraco.Web* - * Depending on what type of code you are writing. If it has to do with the web, then of course it goes in Umbraco.Web. If you could use it in a console app or something like that, then it goes in Umbraco.Core + * Depending on the type of code you are writing, if it has to do with the web, then it goes in Umbraco.Web. If you could use it in a console app or something like that, then it goes in Umbraco.Core * *Umbraco.Web.UI* is **only** for rendering files: *JS, CSS, ASPX, ASCX, CSHTML* * Any new *ASPX, ASCX* will also put their code behind files here too * All old code behind files exist in *Umbraco.Web*, these can be migrated over to *Umbraco.Web.UI* if and when you work on them * If you are updating existing code, you should consider moving it to the correct project and namespace, refactoring it to have consistent and correct naming conventions and code reviewing the legacy code to bring it up to date (i.e. removing what isn't needed and fixing what you see) - * This is however not a requirement as in some cases this may take more time than you wish to commit to which is ok. Eventually this code will be moved and refactored, we don't have to do it all at once + * However this is not a requirement as in some cases this may take more time than you wish to commit to which is ok. Eventually this code will be moved and refactored, we don't have to do it all at once * If you are updating existing code you should still put any new classes that are created for the legacy code into the new projects/namespaces * All folders no matter what content exists in it should be *Proper* cased **not** lower cased or cAmel cAsed, see [Naming Conventions](Coding-Standards/naming-conventions.md) for full details. * New code should be written as unit testable code, you should always use constructor dependencies where possible instead of relying on global singletons to access services. Of course this is not always possible when you don't have control over instantiating objects but when it is you should always use constructor dependencies. This forces you to write clean and unit testable code. -* New and updated code should have unit tests written for them in the Umbraco.Tests project which uses Nunit, by writing unit tests for your code you realize how to improve the APIs you are writing and of course create something that we can test. +* New and updated code should have unit tests written for them in the Umbraco.Tests project which uses NUnit, by writing unit tests for your code you realize how to improve the APIs you are writing and of course create something that we can test. * When obsoleting old code be sure to remove references throughout the codebase to this obsolete code and update the codebase to use the new classes and methods * All new classes should be marked 'internal' until we decide we want to publicly expose the APIs. -## Developing for the v7 AngularJs back office +## Developing for the v7 AngularJS back office Describes how to work with the code for building the v7 back office UI -* [Building v7 AngularJs backoffice project](building-angular-project.md) +* [Building v7 AngularJS backoffice project](building-angular-project.md) * [Test driven development flow](test-driven-flow.md) ## Potential issues diff --git a/Extending/Embedded-Media-Provider/index.md b/Extending/Embedded-Media-Provider/index.md index 75cbe7072ea..dbb80739ed7 100644 --- a/Extending/Embedded-Media-Provider/index.md +++ b/Extending/Embedded-Media-Provider/index.md @@ -4,7 +4,7 @@ The Rich Text Editor in Umbraco has an 'Embed' button, that when pressed, slides ![The Rich Text Editor Embed Button](images/Embed-Button.png) -For example, a You Tube Video... +For example, a YouTube Video... ![Embedding a music video from YouTube](images/Embed-YouTube.png) @@ -46,8 +46,8 @@ OEmbedJson, OEmbedPhoto, OEmbedRich, OEmbedVideo, OEmbedResponse ### Configuration Example -Let's allow our editors to embed artwork from the popular DeviantArt website - the world's largest online social community for artists and art enthusiasts. We can see they have information on using oembed: https://www.deviantart.com/developers/oembed -and the format of their OEmbed implementation returns a Json format, from a url http://backend.deviantart.com/oembed?url=[urltoembed] , so we'll need to use the OEmbedJson provider, we can see 'links' to media shared on deviantart are in the format: http://fav.me/[uniquemediaidentifier] so we'll need a regex to match any urls pasted into the embed panel that start with *fav.me* +Let's allow our editors to embed artwork from the popular DeviantArt website - the world's largest online social community for artists and art enthusiasts. We can see they have information on using OEmbed: https://www.deviantart.com/developers/oembed +and the format of their OEmbed implementation returns a JSON format, from a url http://backend.deviantart.com/oembed?url=[urltoembed] , so we'll need to use the OEmbedJson provider, we can see 'links' to media shared on deviantart are in the format: http://fav.me/[uniquemediaidentifier] so we'll need a regex to match any urls pasted into the embed panel that start with *fav.me* The configuration would look like this: @@ -57,22 +57,22 @@ The configuration would look like this: -Recycle the application pool, and the new provider should be available for editors to use: +Recycle the application pool, the new provider should be available for editors to use: ![Embeddeding a Media Item from Deviant Art website](images/deviantart-embedded-media.png) ## Custom Embedded Media Providers -But if your third party media provider does not support oEmbed or there is some quirk with the content being embedded that you cannot use the existing Umbraco generic OEmbed providers, then you can create your own custom implementation of an Embedded Media Provider! +If your third party media provider does not support OEmbed or there is some quirk with the content being embedded that you cannot use the existing Umbraco generic OEmbed providers, then you can create your own custom implementation of an Embedded Media Provider! -Umbraco provides an AbstractProvider class (or AbstractOEmbedProvider) to get your custom implementation started, and you need to implement pnly two methods: +Umbraco provides an AbstractProvider class (or AbstractOEmbedProvider) to get your custom implementation started, and you need to implement only two methods: * SupportsDimension - whether the third party provider supports the concept of dimensions (eg images and videos). * GetMarkUp - the method responsible for writing out the markup to embed based on the Url the editors have pasted into the embed panel. ### Custom Embedded Media Provider Example -Azure Media Services - https://azure.microsoft.com/en-gb/services/media-services/ - provide 'broadcast-quality' video streaming services, and you can embed the Azure Media Player into your site to play a video using an IFrame: +Azure Media Services - https://azure.microsoft.com/en-gb/services/media-services/ - provide 'broadcast-quality' video streaming services, you can embed the Azure Media Player into your site to play a video using an IFrame: http://ampdemo.azureedge.net/azuremediaplayer.html We can create a custom Embedded Media Provider to do the job of taking the Url of the Media asset and writing out the markup required to embed the IFrame in your content. @@ -88,9 +88,9 @@ We can create a custom Embedded Media Provider to do the job of taking the Url o public override string GetMarkup(string url, int maxWidth, int maxHeight) { - //format of markup + // format of markup string videoFormat = "
"; - //pass in encoded Url, with and height, and turn off autoplay... + // pass in encoded Url, with and height, and turn off autoplay... var videoPlayerMarkup = string.Format(videoFormat, HttpUtility.UrlEncode(url) + "&autoplay=false", maxWidth, maxHeight); return videoPlayerMarkup; } diff --git a/Umbraco-Cloud/Troubleshooting/index.md b/Umbraco-Cloud/Troubleshooting/index.md index 94f908c01ed..ffab6e9af7f 100644 --- a/Umbraco-Cloud/Troubleshooting/index.md +++ b/Umbraco-Cloud/Troubleshooting/index.md @@ -63,7 +63,7 @@ Umbraco Cloud uses web sockets to communicate between your browser session and t #### I have a package.json file in the root of my website and my deploys keep failing -With the package.json file in place, our service will take that to mean: "Look, I'm a node.js project, don't treat me as an ASP.NET site!". In order to remedy this you can go into your local clone of the website and find the `.deployment` file and make it look like this: +With the package.json file in place, our service will take that to mean: "Look, I'm a Node.js project, don't treat me as an ASP.NET site!". In order to remedy this you can go into your local clone of the website and find the `.deployment` file and make it look like this: [config] SCM_SCRIPT_GENERATOR_ARGS = --basic