Create a category list view showing the last x images for each category

Demo: https://pwgdemo.kuther.net/index/page/category_list

Full code for the page below. This needs to go into the "Additional Pages" page. The example uses Bootstrap's default thumbnail view.

<style type="text/css">
.jumbotron { display: none; }
#categories { display: none; }
</style>

<h2>Category list</h2>
<p>This example shows the latest 5 images per category, using the webservice API.</p>
<a href="https://github.com/tkuther/piwigo-bootstrap-darkroom/wiki/Create-a-category-list-view-showing-the-last-x-images-for-each-category" class="btn btn-primary">See how it's done</a>

<div id="categories" class="mt-2">
</div>

<script type="text/javascript">
var pwg_api = "/ws.php?format=json";
$.getJSON(pwg_api + '&method=pwg.categories.getList&recursive=true', function (json) {
    categories = json.result.categories;
    $.each( categories, function ( i, cat ) {
       $('#categories').append('<div id="cat-' + cat.id + '"><h3><a href="' + cat.url + '">' + cat.name + '</a></div>');
       $.getJSON(pwg_api + '&method=pwg.categories.getImages&per_page=5&recursive=true&order=date_available%20desc&cat_id=' + cat.id, function (json) {
          var images = json.result.images;
          $.each( images, function ( i, image ) {
              var src = image.derivatives.square.url;
              var name = image.file;
              var url = image.categories[0].page_url;
              $('#cat-' + cat.id).append('<a href="' + url + '"><img class="rounded mr-2" src="' + src + '" alt="' + name + '"></a>');
          });
       });
    });
    $('#categories').fadeIn(1000);
});
</script>