Unsupported Browser Although our tracking technology supports older browsers, unfortunately our website does not. Please upgrade your browser in order to get the full Tapfiliate experience.

Tapatar
no hassle avatar selection

Made with by the guys at Tapfiliate

Tapatar is a lightweight, extensible jQuery plugin, that lets users pick an avatar from a social network, disk, or other source. By default, Gravatar, Local and Facebook sources are included. Tapatar has been built to make it very easy to add additional sources.

Getting started

First download Tapatar and add it to your project. Next initiate Tapatar, by attaching it to a hidden input:

$('input.tapatar').tapatar({
  sources: {
    gravatar: {
      email: 'foo@bar.com'
    },
    facebook: {
      appId: 1657455811156921
    }
  }
});
After the user has succesfully picked an avatar from one of the sources, the image will be set as a data uri to the value of the input to which Tapatar was bound.

Tapatar options

The Tapatar object provides the following properties and methods.

Properties

Property Type Description
sources object Each object key represents a source
sources.sourceName object Each object key represents a source
sources.sourceName.enabled boolean Wheter or not this source is enabled
sources.sourceName.order int The position at which this source will be showed in the picker
image_url_prefix string The path to the folder that contains the images for Tapatar. Default: 'img/'
default_image string|function Either a path, or a function returning a path to the default image.
templates object An object containing the templates for the widget, overlay, picker and source. See source for more info

Methods

Method Description
registerSource(TapatarSource) Use this method to add a new source at runtime
pickSource(TapatarSource) Set a specific source as the picked source. This is method is usually called from within the actual source (which has the Tapatar object set as its delegate)
imageDataSet(TapatarSource, pick) Set the image data for the input. This is method is usually called from within the actual source (which has the Tapatar object set as its delegate)

Events

Event Description
tapatar.source.image_data.set Triggered when the image data for a source is loaded. Receives the source as its second argument
tapatar.source.picked Triggered whenever a specific source is picked by the user. Receives the chosen source as its second argument

Creating your own avatar source

The TapatarSource object provides a common base to create additional sources.

Tptr.sources.placeKitten = new Tptr.TapatarSource({
  id: 'placeKitten',
  title: 'Placekitten',
  action: {
    content: 'Pick',
    onClick: function(evt) {
        if (this.image_data) {
          this.setImageData(this.image_data, true);
        }
    }
  },
  onAdd: function() {
    var url = 'https://placekitten.com/g/200/300';

    var self = this;
    this.downloadImage(url, function(dataUri){
        if (dataUri) {
          self.setImageData(dataUri);
        } else {
          try {
            self.delegate.options.sources.placeKitten.enabled = false;
          } catch(err) {}
        }
    })
  },
});

Properties

Property Type Description
id string The id for this source. This should correspond to the object key in the options.sources object for this source
title string The source's title
action.content string The text on the "pick" button for this source
action.onClick function The click handler for the "pick" button for this source.
onAdd function This callback is called when the source is added to the inited. Here you can do preliminary work, like checking if an image is available at a certain url
Inherited properties
delegate Tptr A reference back to the Tptr object
image_data string The downloaded image data. This can be set through the setImageData() method
icon string|function Either a path, or a function returning a path to the icon for this source.

Methods

Method Description
setImageData(data, pick) Set the downloaded image data for this source
pick() Set this source as the picked source
downloadImage(url, callback) Download image data from a url