Feather: Image selector
The image selector enables you to display and retrieve one or several selected images.
Using the image selector, you can:
- Select and deselect images
- Select one or multiple images
- Upload images by either selecting them from a list, or using drag and drop
- Search for images in the currently opened library or in all libraries
- Select the provider from which to retrieve images
- Filter images by Libraries, Categories, Tags, or Dates
- Sort images by Title, Date created, or Date modified
NOTE: You can change the image selector's behavior by editing its properties in the Advanced settings section.
The images you select are stored in a scope array
variable. The default template visualizes images using the sfCollection
directive. For more information, see Feather: Use a generic collection directive.
You can use the image selector in the frontend, as well as in the backend. For example, on a page, as well as in a widget designer. For more information, see Feather: Use content selectors outside of widget designer views.
The sfImageSelector
is a directive with an isolated scope that is defined in a module with the same name: sfImageSelector
. For more information, see AngularJS Isolated scope.
The following image is an example of an image selector:

Image selector attributes
The sfImageSelector
directive exposes the following attributes:
Attribute |
Description |
sf-model
|
Accepts a scope variable that holds the selected items. |
sf-filter
|
Accepts a filter object to use when filtering displayed items. |
sf-provider
|
Accepts a provider name to use when retrieving the items to display. |
sf-multiselect
|
Specifies whether the image selector allows multiple items to be selected. If not present or set to false, every time you click, the array of selected items will hold only one item - the clicked one. |
sf-deselectable
|
Specifies whether the image selector allows selected items to be deselected when they are clicked again. If an item is deselected, it is removed from the array of selected items. |
sf-template-url
|
Allows you to override the template of the image selector. |
sf-template-assembly
|
Specifies the assembly where the template of the image selector is located. |
Add the image selector directive
The following example demonstrates how to add a image selector directive in a widget's designer view.
To enable AngularJs to link the sfImageSelector
directive in your custom designer view, you must load the script of the directive and add a dependency to the module:
-
Feather automatically registers the scripts you need and, if no other designer view with explicitly set priority exists, Feather sets your designer view priority 1. In case you need to have full control over the scripts that are loaded or you want to set custom priority, you can alternatively create your own
DesignerView.YourView.json
file. If you have a JSON
file that matches the convention (even if empty), this automatic scripts registration will not occur. In your DesignerView.<YourView>.json
file, add ascripts
array. As a result, the file content should be similar to the following:
-
Feather automatically finds all AngularJS modules you rely on and references the widget designer to them. In case you rely on custom AngularJS modules or have logic that needs an AngularJS controller, you can create your own
designerview-<yourview>.js
file. If you have a .js
file that matches the convention (even if empty), this automatic modules referencing will not occur. In your designerview-<yourview>.js
file, place the following code snippet:
The code above displays all images and enables you to select and deselect any of the images. The reason is both the sf-deselectable
and sf-multiselect
attributes are present. The values of the selected images are kept in the selectedItems
array.
-
In your
DesignerView.<YourView>.cshtml
file, place the following tag where you want to render the sfImageSelector
directive:
Subscribe to Image uploaded event
To provide notification when an image is uploaded, the sfImageSelector
directive emits a custom selection event. To subscribe to the selection event, use the code in Step 2 of the procedure above.