Umbraco Link Picker

A simple internal or external link picker property editor for Umbraco 8.x

Quick links

• About the package
• Installation
• Usage
• Screenshots
• License
• Get involved!

About the package

This package is for Umbraco 8.x

Features

• Integrates with Umbraco linkPicker (for internal or external link selection)
• Uses Umbraco linkPicker to define the selected node ID, name, URL and target (for internal links) and name, URL and target (for external links)

Installation

Download

Download and install the package from our.umbraco.org: our.umbraco.org/projects/backoffice-extensions/link-picker

NuGet

PM > Install-Package UmbracoLinkPicker.v8

Create a new DataType in the Developer tab in your Umbraco project, referencing "Link Picker" (alias: "Gibe.LinkPicker"). Add the new DataType to your Document Types to use the Link Picker

Usage

The Link Picker returns JSON like the following example:

{
	id: 1039,
	udi: "umb://document/4fed18d8c5e34d5e88cfff3a5b457bf2"
	name: "Node Name",
	url: "/node-url",
	target: "_blank",
	hashtarget: "",
	classname: ""
}

The url can be used for external URLs and id can be used to get the URL of internal nodes in Umbraco (as URLs can change in Umbraco if the name changes).

If you are using dynamic, you can access the JSON data like this:

// return an external URL
@CurrentPage.propertyName.url

// return an internal URL
@Umbraco.Content(CurrentPage.propertyName.id).Url

If you want to use strongly-typed:

// Strongly typed
LinkPicker link = Model.Content.GetPropertyValue("link");

// ModelsBuilder
var site = Model.Content.Site().OfType();
var link = site.Link;

// From LeBlender grid editor
LinkPicker link = Model.Items.First().GetValue("link");

Screenshots

Step 1: Click the "Choose" link

Step 2: In the Umbraco side menu, choose either an internal or external link

Step 3a: Set the options for external links (URL, title, etc.)

Step 3b: Or, set the options for internal links

Step 4: View or remove the link

License

The Umbraco Link Picker is created by Karl Tynan for Gibe Digital under the MIT License: opensource.org/licenses/MIT

Get involved!

This project is open for collaboration, so please help improve this project.