Photo Sources

The photo sources on the image upload/selection page can be turned on/off and sorted. The following code sample demonstrates setting custom sort values as well as disabling selected photo sources. The isInitiallyOpen property allows you to set which “tab” should be open by default when the user first gets to the upload page.

Note that documentation on passing images into the widget is available here.

PIO.open({
  recipeId: "6cfb4f30-34c7-4cf6-9490-f51925650811",
  url: "https://widget.print.io/widget/",
  photosources: {
    local: {
      enabled: true,
      sortOrder: 1,
      isInitiallyOpen:false
    },
    facebook: {
      enabled: false,
      sortOrder: 2,
      isInitiallyOpen:false
    },
    instagram: {
      enabled: true,
      sortOrder: 2,
      isInitiallyOpen:false
    },
    photobucket: {
      enabled: true,
      sortOrder: 3,
      isInitiallyOpen:false
    },
    flickr: {
      enabled: false,
      sortOrder: 5,
      isInitiallyOpen:false
    },
    google: {
      enabled: false,
      sortOrder: 6,
      isInitiallyOpen:false
    },
    dropbox: {
      enabled: false,
      sortOrder: 7,
      isInitiallyOpen:false
    },
    custom: {
      sortOrder: 8,
      enabled: false,
      iconUrl: '',
      isInitiallyOpen:false
    }
  }
});

Custom Photo Sources

One can easily implement their own custom photo source that supports both paging and nested folders.

Note that the steps for implementing a custom photo source are:

  • Set enabled: true in the photosources.custom object literal
  • Implement a function to handle image requests in fns.onPhotoSourceReq; it is in this function that one receives requests for folders/images and passes a response back to the widget
  • Implementing the onPhotoSourceReq Function

The onPhotoSourceReq function has two parameters:

  • A request object
  • A callback used to send image info back into the widget

The request object has the following structure:

{
  // the page
  page:1,
  // the id of the folder requested
  folder : ""
}

The “root” or default folder is always passed as an empty string(“”).

The Reply Structure

The format of a reply is as follows – note that all the fields are required:

{
  // the folder id used to identify the folder
  id: "",
  // current page
  page: 1,
  // total pages
  totalPages: 1,
  // array of items
  items: [ ]
}

The structure of an item is as follows:

{
  // id. optional for photos, req'd for folders
  id: '',
  // the picture, full size URL
  // req'd if not an folder
  picture: '',
  // smaller image URL or folder thumb, optional
  thumb: '',
  // highest-quality print image URL, optional
  printUrl: '',
  // photo/folder name or desc, optional
  name: '',
  // if this is a folder, optional
  isFolder: false
}

Full Custom Photosource Example

Here is an example where we create a custom photo source for two folders– the root folder (“”) and a folder that we have id-ed as f1.

PIO.open({
  recipeId: "6cfb4f30-34c7-4cf6-9490-f51925650811",
  url: "https://widget.print.io/widget/",
  photosources: {
   dropbox: {
     // have to turn off one of the existing photo sources to make room for the custom one--
     enabled: false
    },
    custom: {
      sortOrder: 8,
      enabled: true,
      // an icon for the tab, should be 48x48 px
      iconUrl: 'http://placehold.it/48.png/09f/fff'
   }
  },
  fns: {
    // function that handles custom photo source data
    // request is an object like { page: 1, folder: "" }
    // replyFn is a callback that takes an object like
    /// { id:"", page: 1, totalPages: 1, items: [] }
    /// where items contains objects like
    /// { picture: "http://hi.com/hi.jpg" }  for images
    /// { id: "", isFolder: true, name: "" } for folders with default thumbnail
    /// { id: "", isFolder: true, name: "", thumb: "http://hi.com/hi.jpg" } for folders with custom thumbnail
    onPhotoSourceReq: function (request, replyFn) {
      // if the request is for the root
      if (request.folder === "") {
        replyFn({
         id: "",
         page: 1,
         totalPages: 1,
         items: [
           // pass in that there is a folder
           {id: "f1", isFolder: true, name: "fave pics"},

           // pass in three images
           {picture: "http://img.ffffound.com/static-data/assets/6/8fc3b482de5086f5f6bb64b75805b3413936c49a_m.png"},  
            {picture: "http://img.ffffound.com/static-data/assets/6/c9c55336befdeae882e2d1794fc13888053e7f66_m.png"}, 
           {picture: "http://img.ffffound.com/static-data/assets/6/6dc8a64f665183d97a37e44cac72410531ec0978_m.png"} 
         ]
       });
       // if the request is for a folder with id "f1"
     } else if (request.folder === "f1") {
       replyFn({
         id: "f1",
         page: 1,
         totalPages: 1,
         items: [
           {picture: "http://26.media.tumblr.com/tumblr_m2kydgV4JK1qazg3ko1_1280.jpg"},
           {picture: "http://40.media.tumblr.com/35afa2ee2287cc203901b9291c0ea7ac/tumblr_nerhm0PWK91qkuo26o1_1280.jpg"} 
         ]
       });
     }
    }
  }
});