Cette galerie utilise Piwigo, un logiciel libre de galeries photos, et le service d'hébergement http://piwigo.com qui s'occupe pour moi du serveur, des sauvegardes, des mises à jour et fait du très bon support technique.

Configuration de la galerie

• Thème: modus
• Plugins (par ordre décroissant d'importance) :
  • Fotorama : pour le mode diaporama plein écran (l'option « Remplacer la page de l'image » est activée pour aller directement à l'image en plein écran, et « Ajouter un bouton "Information sur l'image" » pour que la page détaillé par image reste accessible)
  • LocalFiles Editor : pour retoucher le CSS du thème Modus, cf. modus-rules.css.
  • GThumb+ : remplace la vue par défaut des miniatures par une vue plus "moderne". J'aime bien.
  • PWG Stuffs : Ajout de texte et d'une image en haut de première page, photos et commentaires récents en bas de première page.
  • Batch Downloader : pour que les visiteurs puissent télécharger tout un album d'un coup. Un must pour moi, je veux que mes visiteurs puissent accéder aux images et les conserver.
  • Share Album : pour pouvoir envoyer un lien vers un album privé par email.
  • Community : pour que les visiteurs puissent uploader des photos.
  • Additional Pages : qui me permet d'écrire cette page.
  • Advanced Menu Manager : qui donne la barre de menu en haut de chaque écran.
  • RV Menu Tree : pour l'affichage des albums en arbre dans le menu.
  • RV Thumb Scroller : pour charger les miniatures à la volée quand on arrive en bas de page.
  • User Collections : pour que les utilisateurs puissent faire leur propres sélections d'images (pas certain que mes visiteurs l'utilisent vraiment en fait ...).
  • Panorama : pour les panoramiques comme celle-ci, mais noter qu'avec Fotorama le plugin ne sert pas à grand chose vu qu'en pratique on ne voit presque jamais la page de présentation de l'image sur laquelle l'effet est visible.

Intégration d'images aléatoires sur un autre site: Piwigo-random

Sur chaque page de mon site (pas de la galerie, d'un autre site), j'ai une image aléatoire qui s'affiche. Le morceau de code qui permet ça est publié ici : https://github.com/moy/piwigo-random.

Image aléatoire sur la page d'accueil: PWG Stuffs

L'image sur la page d'accueil est obtenue avec le plugin PWG Stuffs, avec un bloc de type « Bloc personnel » qui a le contenu ci-dessous. Les points importants :

• Du CSS conditionnel pour que l'image remplisse l'écran, ou la moitié de l'écran pour laisser la place au texte en 2 colonnes sur les grands écrans.
• Encore du CSS conditionnel pour choisir une image de la bonne taille (.wideimage qui choisit une image L, M ou S). Du coup l'image est affichée via <div class="wideimage"> et non via une balise <img>.
• Utilisation du plugin ExtendedDescription pour récupérer l'image (notation [random album=<album dans lequel chercher> size=<taille> html=no]).
• Du Javascript pour faire du parallax scrolling via skrollr.js. On est libre d'aimer ou pas, j'ai fait ça surtout pour m'amuser ;-). Notez que scrollr n'est plus maintenu, c'est un peu fragile donc.

<style type="text/css"> 
.two-columns-left {
    width: 49%;
    float: left;
}
.two-columns-right {
    width: 49%;
    float: right;
}
.wideimage {
    width: 100%;
    padding-bottom: 33.33%;
    background-image: url([random album=23 size=L html=no]);
    background-size: cover;
    background-repeat: no-repeat;
}
/* Not too big screens => smaller resolution */
@media all and (max-device-width: 2048px),
       all and (max-width: 2048px)
{
.wideimage {
    background-image: url([random album=23 size=M html=no]);
}
}
@media all and (max-device-width: 1152px),
       all and (max-width: 1152px)
{
.wideimage {
    background-image: url([random album=23 size=S html=no]);
}
}

/* Small screen => abandon 2-columns */
@media all and (max-device-width: 899px),
       all and (max-width: 899px)
{
.two-columns-left {
    width: 100%;
    float: none;
}
.two-columns-right {
    width: 100%;
    float: none;
}
.wideimage {
    background-image: url([random album=23 size=M html=no]);
}
}

</style>
<div>
  <div class="two-columns-left">
<!--    <div class="wideimage" data-30="height:100%;background-position: 0px 0px;" data-1030="height:100%; background-position: 0px 500px;"> -->
   <div class="wideimage" data-top="background-position: 0px 0px;" data--500-top="background-position: 0px 270px;" data-smooth-scrolling="off">
      <!-- <img src="http://mmoy.piwigo.com/action.php?id=725&part=e" alt="Accueil" style="width: 100%" > -->
    </div>
  </div>
  <div class="two-columns-right"> <!-- Too ugly ;-).  style="height:0px" data-10="padding-top: 0px;" data-1000="padding-top:1000px;" > -->
    <h1>Les photos de Matthieu</h1>

<p>Bienvenue dans ma galerie photos.</p>

<p>Vous trouverez ici des photos que j'ai trouvé assez sympa pour être partagées. Les photos contenant des personnes reconnaissables ne sont pas visible sans mot de passe. Demandez-moi si vous voulez un accès privé.</p>

<p>N'hésitez pas à laisser des commentaires ou à voter pour les images qui vous plaisent.</p>

<p>Bonne visite !</p>
  </div>
</div>
<!-- Released version doesn't support skrollrBody as I write, but will be in next release.
<script type="text/javascript" src="//prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script> -->
<script type="text/javascript" src="//matthieu-moy.fr/webtools/skrollr.js"></script>
<script type="text/javascript">
    var s = skrollr.init({skrollrBody: 'theCategoryPage'}); 
</script>

<div class="titrePage" style="clear:both;">

</div>
<!-- <div style="float:left; height: 0px; "><h2><a href="/index?/category">Albums</a></h2></div> -->

<script type="text/javascript">
$('#content').ready(function () { $('#content .titrePage h2').html('<a href="/index?/category">Albums</a></h2>'); } );
console.log($('#content .titrePage h2').html());
</script>

<style type="text/css"> 
#content > div:nth-child(1) > h2:nth-child(3) > a:nth-child(1) {
/* #content .titrePage h2 { */
/* content: 'Albums'; */
}
</style>