Create a frontpage with a carousel slider showing the 10 most recent images

You can create a frontpage with a large carousel like the "Extended Description" plugin provides with it's built-in nivo slider.

The method explained here uses

• standard bootstrap carousel component (no additional scripts)
• The Piwigo webservice API to fetch the 10 most recent images
• some jQuery voodoo for fetching the data and creating the HTML code
• the AdditionalPages plugin

See it in action on the Demo site: https://pwgdemo.kuther.net/index/page/startpage_with_carousel

The fading transition requires Bootstrap Darkroom >= 1.4.1 (CSS code included since)

How it works

1. Create a new page in AdditionalPages plugin
2. Use following content (see comments for hints on how to customize)

<!-- CSS style -->
<style type="text/css">
.nav-wrapper { display: none; }   /* hide the second navbar*/
#last10items { padding-top: 0px; }
#last10items .item {
   min-width: 100%;
   padding-top: 0px;
   padding-bottom: 15px;
   justify-content: center;
   align-items: center;
}  
#last10items .item>a>img {
   flex: none;
   min-width: 100%;
   max-width: none;
   min-height: 100%;
   box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2);
}
#last10items .carousel-inner { display: flex; }
#last10items .carousel-control { background: none !important; }
#last10items .carousel-indicators { opacity: 0.2; }
#last10items .carousel-indicators:hover { opacity: 0.6; }
.jumbotron {
   height: 150px;
   padding: 15px 0 15px;
   box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2);
}
#content-spacer {
   width: 100%;
   padding: 0px 0px;
}
</style>

<!-- HTML code -->
<div id="last10items" class="carousel carousel-fade slide" data-ride="carousel">
  <!-- placeholder ol for the indicator bullets, remove if you don't want them -->
  <ol class="carousel-indicators">
  </ol>

  <!-- placeholder div for the carousel content -->
  <div class="carousel-inner" role="listbox">
  </div>

  <!-- the left/right buttons -->
  <a class="left carousel-control" href="#last10items" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#last10items" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<!-- Now, the jQuery voodoo -->
<script type="text/javascript">
/* we call the Piwigo API on our server to give us the 10 most recent images from all categories */
var pwg_api = "/ws.php?format=json&method=pwg.categories.getImages&recursive=true&per_page=10&recursive=true&order=date_available%20desc";
/* parse the result */
$.getJSON(pwg_api, function (json) {
    var images = json.result.images;

    /* loop over the results, and append the ol's and div's to above html skeleton */
    $.each( images, function ( i, image ) {
       var src = image.derivatives.large.url; /* replace large with xlarge, medium, square */
       var name = image.file;
       var link = image.page_url;
       if (i === 0) {
          $('#last10items .carousel-indicators').append('<li data-target="#last10items" data-slide-to="' + i + '" class="active"></li>');
          $('#last10items .carousel-inner').append('<div class="item active text-center"><a href="' + link + '"><img class="img-responsive" src="' + src + '" height="' + image.height + '"></img></a></div>');
       } else {
          $('#last10items .carousel-indicators').append('<li data-target="#last10items" data-slide-to="' + i + '"></li>');
          $('#last10items .carousel-inner').append('<div class="item text-center"><a href="' + link + '"><img class="img-responsive" src="' + src + '" height="' + image.height + '"></img></a></div>');
       }
    });

    /* If the header is set to something else in options, you can override it like this */
    $('#theHeader').html('<h1>Make it your own</h1><p>With a little bit of jQuery and CSS.</p>');
    /* center-align the image vertically - didn't get it working with pure CSS :( */
    var $height = window.innerHeight - ($('.jumbotron').outerHeight() + $('.navbar-main').height());
    $('#last10items .carousel-inner').css('height', $height);
    $('#last10items .item>a>img').each(function() {
        $(this).css('margin-top', '-' + (($(this).attr('height') - $height) / 4) + 'px');
    });
});
</script>