dawoe / OEmbed-Picker-Property-Editor

Property editor for Umbraco CMS to allow embedding 3rd party media like Youtube, Vimeo, ... outside of the rich text editor.
https://our.umbraco.org/projects/backoffice-extensions/oembed-picker-property-editor/
MIT License
10 stars 10 forks source link
datatype hacktoberfest hacktoberfest2020 property-editor umbraco

OEmbed Picker Property Editor for Umbraco

Build status

NuGet Packages Version
Release NuGet download
Pre-release MyGet Pre Release
Umbraco Packages
Release Our Umbraco project page
Pre-release AppVeyor Artifacts

Installation

Package

Download and install the package from : http://our.umbraco.org/projects/backoffice-extensions/oembed-picker-property-editor

Nuget

Install-Package Dawoe.OEmbedPickerPropertyEditor

If you only need the binaries you can install

Install-Package Dawoe.OEmbedPickerPropertyEditor.Core

Usage

CMS Configuration

  1. In Umbraco create a datatype and choose OEmbed Picker as your property editor
  2. If you want to allow embedding of multiple items check the box "Allow Multiple"
  3. Add a property to your documenttype using the newly created datatype

Templates/Views

The package comes with a property value convertor for easy use in your views. The property editor returns a object containing the following properties

For a single embed :

 @using Dawoe.OEmbedPickerPropertyEditor.Core.Models;
 @Model.Value<OEmbedItem>("propalias").EmbedCode

For multiple embeds :

 @using Dawoe.OEmbedPickerPropertyEditor.Core.Models;
 @foreach(var item in Model.Value<IEnumerable<OEmbedItem>>("propalias")) 
 {
     <div>@item.EmbedCode</div>
 }

When you only need the source url of the iframe in the embed code you can do the following

@using Dawoe.OEmbedPickerPropertyEditor.Core.Models
@using Dawoe.OEmbedPickerPropertyEditor.Core.Extensions

@Model.Value<OEmbedItem>("propAlias").GetEmbedSrc()

Changelog

13.0.0

12.1.0

12.0.0

11.0.0

10.0.0

5.1.0

5.0.0

4.3.0

4.2.0

4.1.0

4.0.0

3.0.0

2.0.3

2.0.2

2.0.1

2.0.0

1.0.1

1.0.0

Setting up a test site

The repository only contains the package code and not test website. However a test site can be set up by running the script SetupTestSite.ps1 from the Utilities folder.

For starting the test site you can run StartTestSite.ps1

To deploy new changes made in the source code you can run UpdateTestSite.ps1.

Contact

Feel free to contact me on twitter : @dawoe21