Javascript access to Piwigo web API
On the front page of my weg page I usually display the latest three blog entries. But recently I thought I also want to show the latest three galleries. So I went ahead and asked on the Piwigo forum how to access the Piwigo web API programmatically in javascript, and I was pointed to some code in piwigo itself. Based on that, I managed to write code that pulls in the list of categories, sorts them according to the last date, and displays the latest three galleries.
The code uses jQuery and asyncronous loading with ajax.
Of course I am not a real expert in programming JavaScript, and with some digging around and many fail-retry cycles I managed to plug in Google Feed API to display the latest blog entries.
I first tried to do the same on my own laptop’s webserver, but after several trial and error I realized that this json stuff does not work (or not as I thought) when connecting to a different domain. So I started to upload test files to my own server, and finally progress was made.
In the html code I added a div element for the gallery line, and replaced it asyncronously with JavaScript. Here some excerpts from the html code:
....
last galleries:
For the Javascript code I first wrote a function that converts the date strings used in Piwigo to javascript Date objects:
function pwg_date_to_js_date(pwdt) {
out = new Date;
// format: YYYY-MM-DD HH:MM:SS
var foo = pwdt.split(" ")
var a = foo[0].split("-")
var b = foo[1].split(":")
out.setFullYear(a[0]);
out.setMonth(a[1]);
out.setDate(a[2]);
out.setHours(b[0]);
out.setMinutes(b[1]);
out.setSeconds(b[2]);
return out;
}
and then the function that does the whole work. I will explain the details below.
function initializePiwigoLine() {
jQuery.ajax({
url: "/photo/ws.php?format=json&method=pwg.categories.getList&recursive=true",
type: "POST",
success:function(data) {
var data = jQuery.parseJSON(data);
if (data.stat == 'ok') {
var pwgline = 'The whole bunch is just a call to jQuery.ajax, where several arguments are set: url in l.3 gives the full web API call, which can be found with the Piwigo Web API explorer. type in l.4 is necessary, as the default method is GET but the Piwigo Web API requires POST. Two functions for success (l.5-30) and error (l.31-33).
The most interesting part is of course the success function, which first parses the returned data into a javascript object (l.6). If that went ok (l.7) we continue with setting up the output variable pwgline (l.8). Line 10-14 now sorts the list of categories with a special sort function, which pulls out the max_date_last field for each category, converts it into a javascript Date object, and compares the two.
After that we loop through the sorted list of categories (l.17-25). We skip those categories that do not contain any photo (l.18, there are several meta-categories, or folders in my photo gallery), and pull out the name, the url, and the url of the thumbnail (l.19-21). Finally we assemble the output from these information (l. 22) and increase the counter (l.23). If we have reached the maximum number (set in l.15) of galleries to be shown, we break out of the loop.
Finally we close the open tags in the output variable in l.26, get the document element in l.27, and replace the inner html code with the assembled data in l.28, which is all that has to be done.
The error function does nothing but logging an error to the console (l.31-33).
I hope that this small piece of code might help in writing your own code for accessing the Piwigo data.
