IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.
ThesfImageField 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.
sfImageField
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, using the image selector and you can also edit the image's properties. For more information, see Image selector.
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.
The sfImageField is a directive with an isolated scope that is defined in a module with the same name: sfImageField. For more information, see AngularJs Isolated scope.
The following image is an example of an image field:
The sfImageField directive exposes the following attributes:
sf-model
sf-image
sf-provider
sf-template-url
sf-template-assembly
sf-auto-open-selector
Specifies the permissions that allow all users to access this selector. The options are:
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:
DesignerView.YourView.json
JSON
designerview-<yourview>.js
.js
designerview-yourview.js
Since there is no selected image when the controller is initialize for the first time, the sf-auto-open-selector attribute in the code above opens an image selector. After you select an image, the image and its ID are stored in their respective scope variables: selectedImage and selectedImageId. The imageProvider variable holds the name of the provider from which image libraries are loaded.
selectedImage
selectedImageId
imageProvider
NOTE: The image selector can load images from different providers.
DesignerView.YourView.cshtml
Back To Top
To submit feedback, please update your cookie settings and allow the usage of Functional cookies.
Your feedback about this content is important