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 :
  • LocalFiles Editor : pour retoucher le CSS du thème Modus, cf. modus-rules.css
  • 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
  • GThumb+ : remplace la vue par défaut des miniatures par une vue plus "moderne"
  • Batch Downloader : pour que les visiteurs puissent télécharger tout un album d'un coup
  • Community : pour que les visiteurs puissent uploader des photos
  • 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)
  • Additional Pages : qui me permet d'écrire cette page
  • Advanced Menu Manager : qui donne la barre de menu en haut de chaque écran
  • User Collections : pour que les utilisateurs puissent faire leur propres sélections d'images
  • 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
  • Panorama : pour les panoramiques comme celle-ci

Intégration d'images aléatoires sur un autre site

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

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(./_datas/9/2/c/92c0o9s0qi/i/uploads/9/2/c/92c0o9s0qi//2015/12/21/20151221140917-1e3ed4e1-la.jpg);
    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(./_datas/9/2/c/92c0o9s0qi/i/uploads/9/2/c/92c0o9s0qi//2015/07/05/20150705235501-8f774de6-me.jpg);
}
}
@media all and (max-device-width: 1152px),
       all and (max-width: 1152px)
{
.wideimage {
    background-image: url(./_datas/9/2/c/92c0o9s0qi/i/uploads/9/2/c/92c0o9s0qi//2016/01/04/20160104211549-b7f1889c-sm.jpg);
}
}

/* 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(./_datas/9/2/c/92c0o9s0qi/i/uploads/9/2/c/92c0o9s0qi//2014/08/14/20140814100259-f363adac-me.jpg);
}
}

</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>