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
  
• 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 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.

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:

In your DesignerView.YourView.cshtml file, place one of the following tags anywhere in the HTML code: 

The values of the attributes are scope properties that you define in the MVC widget controller.

You can modify the settings of the sf-image-selector component directly. To do this, edit the sf-image-field.sf-cshtml file and change the following line: