Thumbnail
buildfire.components.images
#
This component simplifies the development of the management controls when adding images. Typically used on the Control side of a plugin, it allows the app owner to add, edit and delete images.
This name space consists of one major class:
thumbnail
which is the class that instantiates an image component typically used on the control side to add, edit and delete images
#
Requirements#
Controlthumbnail
#
Class instance for image thumbnail. Typically used on the control side to add, edit and delete images.
For full example see https://github.com/BuildFire/textPlugin/blob/master/src/control/design/index.html
In your controller body create an html container element for thumbnail component
#
Methodsthumbnail()
#
let thumbnail = new buildfire.components.images.thumbnail(selector, options);
Thumbnail class constructor method.
#
ArgumentsName | Type | Required | Description | Default |
---|---|---|---|---|
selector | string | no | Css selector of element that will contain the sortable list | |
options | string | object | no | Image url or options object |
options
#
If options is not string (image url) it can be an object with following properties
Name | Type | Required | Description | Default |
---|---|---|---|---|
imageUrl | string | yes | A string holds a background image URL to load | |
title | string | no | Label for the image | "Background Image" |
dimensionsLabel | string | no | A label to show under the image to give the user indication about the optimal image size to upload | "750x1334" |
thumbnail.init()
#
thumbnail.init(selector)
Initializes the thumbnail component
selector
#
Name | Type | Required | Description | Default |
---|---|---|---|---|
selector | string | yes | Css selector of element that will contain the thumbnail component |
thumbnail.loadbackground()
#
thumbnail.loadbackground(imageUrl)
Loads an image into the component
imageUrl
#
Name | Type | Required | Description | Default |
---|---|---|---|---|
imageUrl | string | yes | Image url to be loaded into thumbnail component |
thumbnail.clear()
#
thumbnail.clear()
Removes the image from thumbnail component
#
Handlersthumbnail.onDelete()
#
thumbnail.onDelete(imageUrl)
An overridable handler that is called when the image is deleted
thumbnail.onChange()
#
thumbnail.onChange(imageUrl)
An overridable handler that is called when the image is changed