Le thème Bootstrap Darkroom

Présentation du thème Bootstrap Darkroom

Développé par Thomas Kuther, Bootstrap Darkroom est un thème moderne, riche en fonctionnalités et adaptés aux mobiles.

Ses caractéristiques :

• Plus de 30 jeux de couleurs pour personnaliser votre galerie
• Un magnifique diaporama en plein écran qui supporte la lecture automatique
• 100 % responsive, c’est à dire qu’il s’adapte automatiquement à toutes les tailles d’écran
• Une navigation aisée dans vos albums avec un carrousel de photos
• De nombreuses options paramétrables…

Personnaliser les couleurs de Bootstrap Darkroom

Bootstrap Darkroom offre plus de 30 jeux de couleurs différents.

Pour choisir le vôtre, une fois que vous avez activé le thème Bootstrap Darkroom dans l’administration (Configuration> Thèmes), cliquez sur le bouton Configuration.

Vous pouvez alors visualiser les différents jeux de couleur disponibles grâce à la liste déroulante “Thème”. Sélectionnez un jeu de couleur pour voir une prévisualisation s’afficher.

Enregistrez les paramètres : le jeu de couleur choisi est appliqué à votre galerie.

Les options de Bootstrap Darkroom

La configuration du thème Bootstrap Darkroom offre de nombreuses autres options, disponibles dans 3 onglets.

Onglet 1 : Aspect

Pleine largeur

Activer l’option “pleine largeur” permet à votre contenu d’occuper tout l’espace de la page, quelle que soit la taille de l’écran.

Logo du site

Permet d’afficher un logo à la place du nom du site, en haut à gauche.

Si vous activez cette option, vous devrez indiquer dans le champ “Chemin” le chemin relatif d’accès à l’image sur votre Piwigo. Si vous avez besoin d’aide, contactez le support.

En-tête de page (bannière)

Vous pouvez ajouter une bannière sur votre galerie. Vous avez accès à deux styles de bannière :

• Jumbotron : Cette option permet de créer une bannière sur l’accueil de votre galerie de type “Jumbotron”. Le contenu de la bannière est défini en HTML depuis le menu Configuration>Options. Le contenu peut intégrer un titre, du texte, une image, un bouton… Pour en savoir plus sur la zone de création des bannières de page, consultez cet article.

• Image à la une : Cette option vous permet d’utiliser une image présente sur votre Piwigo en arrière plan comme bannière. Vous pouvez si vous le souhaitez afficher cette image en pleine hauteur. Le texte affiché en surimpression est défini depuis le menu Configuration>Options.

Pour en savoir plus sur la création de bannières dans Piwigo, lisez cet article :

Affichage de la page des catégories (albums)

Vous pouvez si vous le souhaitez afficher les albums en liste verticale avec une miniature carrée, comme sur le thème mobile Smart Pocket.

Vous pouvez activer cette option sur tous les écrans ou seulement pour les appareils mobiles.

Affichage de la page des miniatures (photos)

Plusieurs options permettent de modifier l’affichage des photos sur les pages de listes (notamment sur la page d’un album).

• Afficher la légende des images
• Utiliser la description au lieu de titre pour les images

Vous pouvez également modifier le comportement lorsqu’un utilisateur clique sur une image.

Par défaut, le clic sur une image ouvre la page détaillée de l’image. Il est possible, à la place, d’afficher l’image en popin sous la forme d’un diaporama. Cette option peut être activée pour tous les écrans, ou uniquement sur les mobiles.

Affichage de la page image

Les informations détaillées de l’image (note, date d’ajout, tags, données EXIF…) peuvent être affichées de plusieurs manières au choix :

• Grille sous l’image (choix par défaut)

• Onglets sous l’image

• Sidebar (barre d’information à droite de l’image, que l’utilisateur peut afficher ou masquer)

• Désactivé (dans ce cas les informations ne sont pas affichées).

Custom CSS

Le champ Custom CSS permet d’afficher du code CSS personnalisé.

Onglet 2 : Composants

Le deuxième onglet de configuration de Bootstrap Darkroom offre des options supplémentaires pour personnaliser l’affichage de votre galerie.

Slick Carrousel Configuration

Par défaut, Bootstrap Darkroom affiche un carrousel sur la page d’une image, permettant de naviguer parmi les autres images du même album.

Plusieurs options sont disponibles :

• Activer ou désactiver ce carrousel
• Lazyload ou OnDemand : modifier la méthode de chargement des images
• boucle infinie : permet d’activer le défilement infini des images du carrousel
• mode de centrage : permet d’afficher l’image en cours au centre du carrousel

Photoswipe Configuration

Par défaut Bootstrap Darkroom utilise le composant Photoswipe pour visualiser un diaporama en mode plein écran.

Vous pouvez le désactiver si vous souhaitez utiliser un autre composant de diaporama :

• le diaporama par défaut de Piwigo
• le diaporama Fotorama (pour cela vous devez activer le plugin Fotorama)

Vous pouvez également régler l’intervalle de défilement du diaporama (par défaut, 3500 millisecondes).

Recherche rapide

Cette option permet d’afficher un moteur de recherche rapide dans la barre de navigation de votre galerie.

Commentaires

Si vous le souhaitez, vous pouvez utiliser le composant Disqus pour gérer les commentaires sur votre galerie.

Pour cela, vous devez au préalable créer un compte sur le site de Disqus, et créer un nouveau “site” sur Disqus à cette adresse : https://disqus.com/admin/create/

Lorsque vous activez Disqus dans la configuration de Bootstrap Darkroom, vous devez saisir le nom de votre site Disqus (Website name) dans le champ “Disqus shortname”.

Ainsi, les commentaires sur votre Piwigo seront gérés par Disqus.

Sachez que si vous optez pour cette option, vous acceptez que les commentaires soient traités et hébergés sur une plateforme tierce.

Tag cloud

Vous avez le choix entre deux types de nuages de tags pour le menu Tags de votre galerie.

• Basique : ce format affiche les tags en listes horizontales. Il est moins adapté si vous avez peu de tags sur votre galerie.

• HTML5 : ce format prend toute la taille de l’écran et affiche les tags dans différentes directions.

Onglet 3 : Intégration des réseaux sociaux

Le dernier onglet de configuration du thème Bootstrap Darkroom permet de choisir d’activer ou pas les boutons de partage sur les réseaux sociaux sur la page d’une image.

Vous pouvez choisir quels réseaux activer.

Vous pouvez également choisir le mode d’affichage des boutons de partage :

• Icônes par défaut

• Boutons colorés

Pour aller plus loin

Si vous souhaitez aller plus loin dans la personnalisation de votre thème Bootstrap Darkroom, vous pouvez :

• Contacter le support si vous êtes client d’une offre sur piwigo.com
• Contacter le support si vous hébergez vous-même votre Piwigo et que vous avez signé un contrat de maintenance
• Consulter la documentation du thème sur GitHub
• Poser une question sur le forum de Piwigo

Sommaire de l’article

• Présentation du thème Bootstrap Darkroom
• Personnaliser les couleurs de Bootstrap Darkroom
• Les options de Bootstrap Darkroom
• Onglet 1 : Aspect
• Onglet 2 : Composants
• Onglet 3 : Intégration des réseaux sociaux
• Pour aller plus loin

← Précédent

Le thème Modus