Skybrud.ImagePicker is a package for Umbraco 7+ containing a property editor and a grid editor for selecting a number of images for use in a slider, gallery or similar.
- Installation
- Examples
- Using the property editor
- Using the grid editor
- Using the image picker in your own projects
This package has a few dependencies to some of our other packages, so it's recommended to install via NuGet to have everything run smoothly.
-
NuGet Package
Install this NuGet package in your Visual Studio project. Makes updating easy. -
Umbraco package
Install the package through the Umbraco backoffice. -
ZIP file
Grab a ZIP file of the latest release; unzip and move the contents to the root directory of your web application.
The image picker comes with two different display modes - a list mode where each the items are shows as rows in a list/table for a quick overview (as shown in the screenshot below), and where a row can be expanded to edit the details:
And a tiles mode displaying more details for all items at the same time:
The property can be used a either a single image picker or a multiple image picker, but both having the same model (an instance of ImagePickerList
).
So to get the list, you can use the GetImagePickerList
extension method (with multiImagePicker
being the alias of the property):
ImagePickerList imagePickerList = Model.GetImagePickerList("multiImagePicker");
Using this extension method, you can be certain to get an instance of ImagePickerList
. If the property value is not an image picker, the method will simply return an empty list instead.
If you just need to get the first item, you can use the GetImagePickerItem
extension method instead:
ImagePickerItem imagePickerItem = Model.GetImagePickerItem("singleImagePicker");
In a similar way, you can be certain that this method will always return an instance of ImagePickerItem
, although it may not be valid (eg. if no items have been selected).
Both extension methods are defined in the Skybrud.ImagePicker.Extensions
namespace.
This package also supports adding an image picker as a grid control in the Umbraco grid. Since you most likely want to configure the image picker your self, you have to add your own package.manifest
with the details about the editor.
In it's simplest form (default options), the JSON for the editor can look like this (here with a slider as an example):
{
"name": "Slider",
"alias": "Skybrud.ImagePicker.Slider",
"view": "/App_Plugins/Skybrud.ImagePicker/Views/ImagePickerGridEditor.html",
"icon": "icon-pictures-alt-2",
}
The full configuration for the image picker looks like this:
{
"name": "Slider",
"alias": "Skybrud.ImagePicker.Slider",
"view": "/App_Plugins/Skybrud.ImagePicker/Views/ImagePickerGridEditor.html",
"icon": "icon-pictures-alt-2",
"config": {
"limit": 5,
"layout": {
"initial": "list",
"hideSelector": false
},
"title": {
"show": false,
"placeholder": ""
},
"image": {
"width": 250,
"height": 0
},
"items": {
"title": {
"mode": "required"
},
"description": {
"mode": "required"
},
"link": {
"mode": "optional"
},
"nocrop": {
"mode": "hidden",
"default": false
}
}
}
}
The image picker also works with our Skybrud.Umbraco.GridData package.
Given that editor alias is either Skybrud.ImagePicker
or starts with Skybrud.ImagePicker.
(both case-insensitive) and you have an instance of GridControl
representing a control with the image picker, the Value
property will expose an instance of GridControlImagePickerValue
, while the Editor.Config
property will expose an instance of GridEditorImagePickerConfig
for the editor configuration.
In relation to the backoffice, the main logic of the image picker has been isolated into an Angular directive that can be used in your custom Angular views.
Below is an example of the view for the property editor:
<div>
<skybrud-imagepicker value="model.value" config="model.config.config">Sponsored by omgbacon.dk</skybrud-imagepicker>
</div>
The model of the image picker list is specified through the value
attribute - you can simply pass a variable with an empty JavaScript object, and the image picker directive will make sure to set the correct properties.
In a similar way, the configuration can be specified through the config
attribute. The value specified through this attribute is a JavaScript object similar to the config
object in the grid editor configuration as shown above.