Skip to main content

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/src/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);
};