I try to port an image gallery that I coded once into kirby but I got some problems figuring out how I could do that.
Basically the gallery gets requested once the page is loaded via an ajax post request like this:
/**
* Sends an Ajax request to the server and recieves the gallery
* @return {boolean} true on success false on failure
*/
this.requestGallery = function() {
var request = new XMLHttpRequest();
request.open('POST', 'lib/Gallery.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
// check ajax requests states and show a spinner while request is pending
request.onreadystatechange = function(){
switch(request.readyState) {
... do something
}
};
// handles the ajax onload event
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
/* Success! */
... do something on success
}
else
{
/* We reached our target server, but it returned an error */
return false;
}
};
The server will calculate the gallery and sends back a json object.
But since the gallery is now in a plugin folder I don’t know how I can reach lib/gallery.php
However that was before I did any kirby related work so it was a static page without a cms etc. At the moment the gallery itself is a standalone but as I need a gallery for a recent project, I thought of integrating it to kirby as a plugin (if it is possible ^^).
Yes, ok, but if you want to create a new gallery instance from the class, you would not do it in the plugin but either in your template, in a controller or in a route.
Currently, you have two possibilities to return JSON to your Ajax call: either create a controller or template for an ajax page (so that you get an url) or via a route.
Kirby 2.4 will have content representations, so you can have different templates (and controllers) for different kinds of output.
Content representations are a way to have different templates/controllers for different types of content, e.g. json, rss or whatever. As far as I know, this is not similar to WP, but I’m not that familiar with the intricacies of Wordpress.
Basically, you will be able to create e.g. a blog.json.php template next to your standard blog.php template that returns json, if you call the same URL with a suffix “.json”.
If you check out the kirby develop branch, you can already test it.
You could make the current page part of the ajax url , either by passing it to your javascript via a data attribute or extracting it from the url. Then it would be part of your pattern.
Let’s say your (:any) part in pattern was your current page, you could get it like this:
array(
'pattern' => '(:any)/gallery.php',
'action' => function($uri) {
$page = page($uri);
multicolumn();
},
'method' => 'POST'
)
));
```
But you would still need to pass it as a parameter to your `multicolumn()` function.
Yes, I had the idea nearly two years ago. Since I use the feature on my company site, I thought, “well, why not rewrite it to be compatible with Kirby 2.3’s registry” and so I did.
I found some time to work on this again. I got the ajax request working now but I’m not satisfied with how this is set up at the moment. This is my call:
this.requestGallery = function() {
var request = new XMLHttpRequest();
request.open('POST', 'starterkit/gallery.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
...
..
However I don’t want starterkit in the route. I would like to check if the page has some gallery element and if yes then just call gallery.php.
If I leave starterkit out and just do “gallery.php” I will get a 404. How would I solve such an issue?
You need to somehow tell the route which page you are referring to, so leaving out the page URI from the route pattern is not going to work. You can definitely just add a route with the pattern gallery.php, but how are you going to get the current page in that file?
Also: Why don’t you just include the gallery JSON directly in the HTML file without the second request?
For your second question. I am requesting the gallery via ajax for performance reasons. The gallery will just get requested when the pages content got loaded.
Further the gallery will just request the images that are in the viewport (plus some offset so you wont notice any loading times). If you scroll down the gallery you will queue additional requests to the server, requesting the missing images. This way you can reduce the number of requests on the initial load by a huge amount while also deferring all unnecessary images (this saves bandwidth on mobile because images deep down “below the fold” would not even get requested). It is just a really performance optimized image gallery that I would like to keep the way it works.