skybrud/skybrud.imagepicker

Extended image picker for various versions of Umbraco.

Skybrud Image Picker

Skybrud.ImagePicker is a package for Umbraco 9 with property editors extending Umbraco's default media pickers.

Installation

The Umbraco 9 version of this package is only available via NuGet. To install the package, you can use either .NET CLI:

dotnet add package Skybrud.ImagePicker --version 3.0.0-alpha003

or the older NuGet Package Manager:

Install-Package Skybrud.ImagePicker -Version 3.0.0-alpha003

Umbraco 8
For the Umbraco 8 version of this package, see the v2/main branch instead.

Umbraco 7
For the Umbraco 7 version of this package, see the v1/main branch instead.

Features

• Allows selecting a type converter on the data type, in which case the type converter will be used for converting the selected items from Umbraco's MediaWithCrops to a desired type.

• Allows selecting a value type on the data type, in which case this type is used instead of Umbraco's MediaWithCrops model.

Documentation

Coming soon ;)

skybrud.imagepicker's Issues

Possibility to overwrite default naming of labels

Hi, it would be nice if we could overwrite the default naming of the labels on the properties in config. Sometimes i use ex. the title property for alt-text, and then the default naming ("Title") is a bit confusing for the editor.

The ImagePickerItem should expose the ID of the selected image

An ImageId property would be helpful, as the current Image property might not always be resolved to an image (eg. if not found).

https://github.com/skybrud/Skybrud.ImagePicker/blob/master/src/Skybrud.ImagePicker/ImagePickerItem.cs

Bug: Documentation is missing ;)

https://packages.skybrud.dk/skybrud.imagepicker/docs/v3.0/imagewithcrops/configuration/#value-type

All labels should be translated and be available in both Danish and English

Currently most labels (if not all) are hardcoded in Danish.

CropType is pad, therefore we can´t use focalpoint

Se this https://github.com/skybrud/Skybrud.ImagePicker/blob/master/src/Skybrud.ImagePicker/Models/ImagePickerImage.cs#L34

ImagePicker broke my site

I had a site with an existing Umbraco Grid implementation, which worked fine. After installing the Skybrud.ImagePicker, none of my grids render.

When I render my node's grid property...
@(Model.Content.GetPropertyValue("genericGrid").ToString())

I get:
Skybrud.Umbraco.GridData.GridDataModel

How do get my Umbraco Grid back?

*Help wanted* Issue - ImagePicker in grid editor

Hi Anders,

First of all, great work with all the Skybrud devs you're envolved :)

I would like to ask you a couple of questions, so this is not really an issue :)

• both ImagePicker and LinkPicker were created as an Angular Directive. It was done like that because of Angular $scope sharing and, so, allowing to use the same code as a property editor and a grid editor?

• when using it (ImagePicker/LinkPicker) as a grid editor, the developers always need to define the render view (cshtml) and configure it in the package.manifest 'render' property? (or alternatively create a cshtml with the same name as the grid editor's view name - like 'ImagePickerGridEditor' as per your example - right?)

Thanks in advance,
And keep the excellent work ;)

Add a bit extra CSS for the list table

As a result of Umbraco's styling for .table, the list gets a double border, which looks a bit wrong. Could be fixed with adding a rule like as shown below to our stylesheet:

.SkybrudImagePickerList > .table {
    border: 0;
}

Before:

After:

Images should use ng-src instead of src

If the URL is specified using the src attribute, the browser will initially try to load the Angular expression, which obviously isn't a valid URL. We should use ng-src instead.

config not working

The following config-options is not working in the datatype when using it in non-grid-context.

• Limit
• Show title field
• Title placeholder
• Hide title
• Hide description
• Hide link

The width of input[type=number] should be increased

Currently the width is 50px - increasing the width to 60px seems sufficient.

Multi image picker

It is currently only possible to insert a single media at a time, since you actually adding an item, which then triggers the image picker dialog.

Instead, when adding a new item, the user should be prompted by the image picker dialog initially, and an item should then be added for each selected image (or an alert should be shown if the total amount of items is greater than the limit).

Remove omgbacon.dk reference form code