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">
.navbar-contextual { display: none; }   /* hide the second navbar*/
/* .copyright { display: none; }          hide the footer */
.carousel-item {
  height: 100vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.carousel-caption a {
  color: #eee;
  padding: 1rem 2rem;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}
.carousel-indicators {
  bottom: 2rem;
}
</style>

<!-- HTML code -->
<div id="last10items" class="carousel carousel-fade" 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">
  </div>

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

<!-- Now, the jQuery voodoo -->
<script type="text/javascript">
/* change following to match your Piwigo's root context, e.g. "/", "/gallery/", "/pictures/" or similar, but DO NOT FORGET THE TRAILING SLASH */
var pwg_root = '/';

/* the api URL, no need to change this */
var pwg_api = pwg_root + 'ws.php?format=json&method=pwg.categories.getImages&recursive=true&per_page=10&recursive=true&order=date_available%20desc';

function setHeights() {
    if ($('.jumbotron').length > 0) {
      var height = window.innerHeight - $('.navbar-main').outerHeight() - $('.jumbotron').outerHeight();
    } else {
      var height = window.innerHeight - $('.navbar-main').outerHeight();
    }
    var bottom = window.innerHeight - height + (height * 0.1);
    $('#last10items .carousel-inner').css('height', height);
    $('#last10items').find('.carousel-caption').css('bottom', bottom + 'px');
}

/* 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.xlarge.url; /* replace large with preferred derivative size */
       var dheight = image.derivatives.xlarge.height; /* replace large with preferred derivative size */
       var name = image.file;
       var link = image.categories[0].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="carousel-item active text-center" style="background-image: url(\'' + src + '\')"><div class="carousel-caption"><a href="/index/categories">Enter the gallery</a></div></div>');
       } else {
          $('#last10items .carousel-indicators').append('<li data-target="#last10items" data-slide-to="' + i + '"></li>');
          $('#last10items .carousel-inner').append('<div class="carousel-item text-center" style="background-image: url(\'' + src + '\')"><div class="carousel-caption"><a href="/index/categories">Enter the gallery</a></div></div>');
       }
    });

    $('#last10items').closest('.container').addClass('w-100 h-100 mx-0').removeClass('container');
    setHeights();
});

$(window).on('resize', function() {
  setHeights();
});

</script>

Note: updated for Bootstrap v4.