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>