Skip to main content

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#

Control#

<head>
<!-- Load helper.css to use our helper classes -->
<link href="../../../../styles/helper.css" rel="stylesheet" />
<link href="../../../../styles/siteIcons.css" rel="stylesheet" />
<!-- JS -->
<script src="../../../../scripts/buildfire.js"></script>
<script src="../../../../scripts/buildfire/components/images/thumbnail.js"></script>
</head>

thumbnail#

Class instance for image thumbnail. Typically used on the control side to add, edit and delete images.

Thumbnail

For full example see https://github.com/BuildFire/textPlugin/blob/master/control/design/index.html

In your controller body create an html container element for thumbnail component

<body>
<div class=".thumbnail"></div>
</body>

Methods#

thumbnail()
#

let thumbnail = new buildfire.components.images.thumbnail(selector, options);

Thumbnail class constructor method.

let thumbnail = new buildfire.components.images.thumbnail(".thumbnail");

Arguments#

NameTypeRequiredDescriptionDefault
selectorstringnoCss selector of element that will contain the sortable list
optionsstring | objectnoImage url or options object

options#

If options is not string (image url) it can be an object with following properties

NameTypeRequiredDescriptionDefault
imageUrlstringyesA string holds a background image URL to load
titlestringnoLabel for the image"Background Image"
dimensionsLabelstringnoA 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

let thumbnail = new buildfire.components.images.thumbnail();
thumbnail.init(".thumbnail");

selector#

NameTypeRequiredDescriptionDefault
selectorstringyesCss selector of element that will contain the thumbnail component

thumbnail.loadbackground()
#

thumbnail.loadbackground(imageUrl)

Loads an image into the component

let thumbnail = new buildfire.components.images.thumbnail(".thumbnail");
thumbnail.loadbackground("https://placekitten.com/750/1334");

imageUrl#

NameTypeRequiredDescriptionDefault
imageUrlstringyesImage url to be loaded into thumbnail component

thumbnail.clear()
#

thumbnail.clear()

Removes the image from thumbnail component

let thumbnail = new buildfire.components.images.thumbnail(".thumbnail");
thumbnail.clear();

Handlers#

thumbnail.onDelete()
#

thumbnail.onDelete(imageUrl)

An overridable handler that is called when the image is deleted

let thumbnail = new buildfire.components.images.thumbnail(".thumbnail");
thumbnail.onDelete = (imageUrl) => {
console.log("Image was delted", imageUrl);
};

thumbnail.onChange()
#

thumbnail.onChange(imageUrl)

An overridable handler that is called when the image is changed

let thumbnail = new buildfire.components.images.thumbnail(".thumbnail");
thumbnail.onChange = (imageUrl) => {
console.log("Image was changed to", imageUrl);
};