The Maiko Chooser provides an easy way to integrate Maiko into any web app, blog, or CMS, via a simple JavaScript API.

Setup

Add the following JavaScript snippet to your page:

<script type="text/javascript" src="//www.maikoapp.com/maiko.js"></script>  

You can then call the Maiko.choose() method to open Maiko. The success function will be called when items are chosen.

Maiko.choose({ success: function(items) {} })  

API

The Maiko JavaScript API provides the following methods.

Maiko.choose

Open the chooser. A number of configuration options are available:

options = {    
    success: function(items) {},    // callback when items are chosen
    iframe: false,                  // open in an iframe/overlay
    accountId: integer,             // open in a specific Maiko account
    stackId: integer,               // open in a specific Stack
    usePresets: false               // enable selecting a preset format when choosing items
}

Maiko.choose(options)

// example items returned to success callback: 
[
 {
  "title": "image1",
  "filename": "image1.jpg",
  "maiko_url": "http://cdn.maikoapp.com/3ce2/5d6te",
  "preset": "![image1](http://cdn.maikoapp.com/3ce2/5d6te/200x100.png)" // if usePresets:true
 },
 ...
]

Maiko.image

Generate a Maiko URL in a given format.

// URL as first argument
// Result: http://cdn.maikoapp.com/3ce2/5d6te/p200.png
Maiko.image('http://cdn.maikoapp.com/3ce2/5d6te/700.jpg', 'p200.png') 


// item as first argument
Maiko.choose({
  success: function(items) {
    items.each(function(item) {
      // Result: { url: "http://cdn.maikoapp.com/3ce2/5d6te/600.jpg", width: 537, height: 600, exceeds_asset_size: false }
      Maiko.image(item, '600.jpg')
    }
  }
})

Example

In the following example, we display the data returned from Maiko.choose() in three different formats. The code for the example follows below.

Note: A Maiko account is required. No account? Sign up.

Choose from Maiko

JSON

Choose something from Maiko to see the result.

Gallery

Markdown

Example Code

// Chooser options
var options = {
  iframe: true,
  success: function(items) {
    renderJSON(items)
    renderGallery(items)
    renderMarkdown(items)
  }
}

// Open Chooser on clicking the button
var btn = document.getElementById('example-btn')
btn.addEventListener('click', function(event) {
  Maiko.choose(options)
}, false)

// Render items as JSON
var renderJSON = function(items) {
  var result = document.getElementById('example-1')
  var json = JSON.stringify(items, null, " ")
  result.innerHTML = json
}

// Render items as a gallery
var renderGallery = function(items) {
  var result = document.getElementById('example-2')
  var list = items.map(function(item) {
    var thumb = Maiko.image(item.maiko_url, 'f150x150.jpg')
    return '<li><a href=' + item.maiko_url + ' target=_blank><img src=' + thumb + '></a></li>'
  })
  var gallery = '<ul class="list-inline">' + list.join('') + '</ul>'
  result.innerHTML = gallery
}

// Render items as Markdown
var renderMarkdown = function(items) {
  var result = document.getElementById('example-3')
  var text = items.map(function(item) {
    return '![' + item.title + '](' + item.maiko_url + ')'
  })
  result.value = text.join('\n\n')
}

Bookmarklet

The Maiko bookmarklet enables inserting image links into any textarea or contenteditable region.

Please note the bookmarklet is currently beta and is subject to change.

Insert from Maiko ← drag to your bookmarks bar.