Use an image field directive

Feather's sfImageField directive enables you to select and display an image from the existing libraries in your website. In addition you can also use this directive to upload an image to a library.

After you select an image, the default template lists information about its base properties such as type, size and upload date. To change the selected image press the Change image button which fires an image selector. For more information see, Use an image selector. To edit the selected image press the Edit all properties button, which opens the Edit image dialog.

You can use the directive 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 Use content selectors outside of a widget designer's view.

The sfImageField is a directive with an isolated scope that is defined in a module with the same name: sfImageField.

The following image is an example of an image field:

Attributes

The sfImageField directive exposes the following attributes:

Attribute	Description
sf-model	Accepts a scope variable that holds the selected id of the image.
sf-image	Accepts a scope variable that holds the selected image item.
sf-provider	Accepts a provider name to use when retrieving the items to display.
sf-template-url	Allows you to override the template of the image field.
sf-template-assembly	Specifies the assembly where the template of the image field is located.

Add the image field directive

The following example demonstrates how to add a image field directive in a widget designer's view.

To enable AngularJs to link the sfImageField directive in your custom designer view, you must load the script of the directive and add a dependency to the module:

1. In your DesignerView.YourView.json file, add a scripts array. As a result, the file content should be similar to the following:

   {
    "priority": 1,
    "scripts": [
    	"Mvc/Scripts/Angular/angular-resource.min.js",
    	"Mvc/Scripts/expander.js",
    	"Mvc/Scripts/ng-tags-input.min/ng-tags-input.min.js",
    	"client-components/fields/sf-fields.js",
    	"client-components/fields/html-field/sf-html-field.js",
    	"client-components/fields/flat-taxon-field/sf-flat-taxon-field.js",
    	"client-components/collections/sf-infinite-scroll.js",
    	"client-components/collections/sf-collection.js",
    	"client-components/collections/sf-tree.js",
    	"client-components/sorting/sf-sort-box.js",
    	"client-components/search/sf-search-box.js",
    	"client-components/selectors/common/sf-services.js",
    	"client-components/selectors/common/sf-selectors.js",
    	"client-components/selectors/common/sf-list-selector.js",
    	"client-components/selectors/common/sf-items-tree.js",
    	"client-components/selectors/common/sf-selected-items-view.js",
    	"client-components/selectors/multi-site/sf-multi-site-service.js",
    	"client-components/selectors/multi-site/sf-multisite-page-selector.js",
    	"client-components/selectors/multi-site/sf-site-selector.js",
    	"client-components/selectors/localization/sf-language-selector.js",
    	"client-components/selectors/localization/sf-language-service.js",
    	"client-components/selectors/pages/sf-page-service.js",
    	"client-components/selectors/pages/sf-page-selector.js",
    	"client-components/selectors/tools/sf-link-service.js",
    	"client-components/selectors/tools/sf-link-selector.js",
    	"client-components/selectors/tools/sf-link-selector-modal.js",
    	"client-components/selectors/taxonomies/sf-flat-taxon-service.js",
    	"client-components/selectors/taxonomies/sf-hierarchical-taxon-service.js",	
    	"client-components/selectors/taxonomies/sf-taxonomy-service.js",
    	"client-components/selectors/taxonomies/sf-hierarchical-taxon-selector.js",
    	"client-components/selectors/media/sf-media-service.js",
    	"client-components/selectors/media/sf-media-markup-service.js",
    	"client-components/selectors/media/sf-image-selector.js",
    	"client-components/selectors/media/sf-image-selector-modal.js",
    	"client-components/selectors/media/sf-media-filter.js",
    	"client-components/selectors/media/sf-library-selector.js",
    	"client-components/selectors/media/sf-thumbnail-size-selection.js",
    	"client-components/fields/drag-drop/sf-drag-drop.js",
    	"client-components/fields/image-field/sf-image-field.js",
    	"client-components/selectors/common/sf-provider-service.js",
    	"client-components/selectors/common/sf-provider-selector.js"
        ]
    }

2. In your designerview-yourview.js file, right before the definition of your custom view controller, place the following code snippet:

   var designerModule = angular.module('designer');
   angular.module('designer').requires.push('sfImageField');

3. In your DesignerView.YourView.cshtml file, place the following tag where you want to render the sfImageField directive:

  <sf-image-field 
      sf-model="selectedImageId"
      sf-image="selectedImage"
      sf-provider="imageProvider"/>

4. In your designer's controller, add the following code:

   designerModule.controller('YourViewCtrl', ['$scope', function ($scope) {
       $scope.selectedImageId = null;
       $scope.selectedImage = null;
       $scope.imageProvider = null;
   }]);

   Since there is no selected image when first initialized, the code above opens an image selector. After you perform a selection the image and its Id are kept in their respective scope variables: selectedImage and selectedImageId. The imageProvider variable holds the name of the provider from which to load the image libraries.
   NOTE: The image selector can load images from different providers.