Skip to content

BuildFire Thumbnail Component

o5faruk edited this page May 2, 2021 · 7 revisions

⚠️⚠️⚠️

This sdk documentation is deprecated and will not be updated. Check out our new docs at https://sdk.buildfire.com/docs/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, 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

The thumbnail

typically used on the control side to add, edit and delete images.

Editor

Requirements

    <!-- 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>

Example

https://github.com/BuildFire/textPlugin/blob/master/control/design/index.html

Constructor

var background = new buildfire.components.images.thumbnail([selector],[settings optional]);

  • selector typical css selection string to identify the containing element
  • settings if settings is a URL (a string holds a background image URL to load) then the image will be loaded from this URL, if settings is object then you can supply the following options in the settings object
    • imageUrl: a string holds a background image URL to load
    • title: a string to show as label for the image (default "Background Image")
    • dimensionsLabel: a label to show under the image to give the user indication about the optimal image size to upload (default "750x1334")

Methods

  • background.init: a secondary method outside of the constructor to initialize the component
  • background.loadbackground(url) use this method to load a new background
  • editor.clear: use this method to remove the image

Handlers

  • editor.onDelete(url) an overridable handler that is called when the image is deleted
  • editor.onChange(newUrl) an overridable handler that is called when an image is changed
Clone this wiki locally