The image selector enables you to display and retrieve one or several selected images.
Using the image selector, you can:
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:
The sfImageSelector directive exposes the following attributes:
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:
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.
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.
Back To Top