Web Widget

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.

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 pagepage:1,// the id of the folder requestedfolder:""}

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 folderid:"",// current pagepage:1,// total pagestotalPages:1,// array of itemsitems:[]}

The structure of an item is as follows:

{// id. optional for photos, req'd for foldersid:'',// the picture, full size URL// req'd if not an folderpicture:'',// smaller image URL or folder thumb, optionalthumb:'',// highest-quality print image URL, optionalprintUrl:'',// photo/folder name or desc, optionalname:'',// if this is a folder, optionalisFolder: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 pxiconUrl:'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 thumbnailonPhotoSourceReq:function(request,replyFn){// if the request is for the rootif(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"}elseif(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"}]});}}}});

Contact Us

It seems that you do not have a default email client set up in your browser. Don’t worry, you can still contact us – Simply copy the address below to your email client of choice.