Skip to content

Link picker property editor for Umbraco 7

Notifications You must be signed in to change notification settings

Gibe/Umbraco-Link-Picker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

84 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build status

Umbraco Link Picker

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

Quick links

About the package

This package is for Umbraco 7.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

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

Screenshot 1

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

Screenshot 2

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

Screenshot 3a

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

Screenshot 3b

Step 4: View or remove the link

Screenshot 4

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.