Bonsoir,
Le plugin Babar utilise l'image favorite d'un album pour en faire une entête de l'album. Un onglet dans l'administration de l'album permet de régler la zone de la photo favorite à prendre pour entête. La description de l'album apparait en superposition sur l'entête.
Visualisez ici : https://battle.deheme.com/
et donnez votre avis sur ce fil.
Daniel Malherbe [DéHème]
Hors ligne
Babar est époustouflant : ça donne un header spécifique à chaque album. Et quel header ! Comme j'utilise aussi Bootstrap Darkroom, j'aimerais bien essayer. Est-ce que ce serait compatible avec mes petites adaptations du thème ?
Hors ligne
Bonjour,
Babar est maintenant disponible sur piwigo extensions :
https://piwigo.org/ext/index.php?eid=1040
Hors ligne
Bonjour Daniel !
J'ai installé, mais rien ne s'affiche. Faut-il une config particulière du thème ? (Bootstrap Darkroom)
Hors ligne
Bonjour,
Il faut activer 'image à la une' dans le theme et choisir une image.
Celle ci sera l'image par defaut quand il n'y a pas de representative.
et moi , c'est Didier, le petit frère de Daniel ;-)
[DeHèmeJr]
Hors ligne
D, D et toujours D. Merci Didier.
Ça le fait, pas mal du tout... Ça me plait bien bien bien.
Deux questions. Ou trois.
- Est-ce possible de retirer 'Entrez" sur la page d’accueil ?
- Les photos sont assombries, la netteté atténuée et ce n'est pas la meilleure qualité / taille disponible qui est utilisée. Est-ce modifiable ?
J'ai bien compris qu'il faut aller dans chaque album pour éditer la zone de la photo par défaut qui sera utilisée pour le bandeau.
Hors ligne
Il n'est pas prévu de supprimer 'entrez' mais on doit pouvoir tricher en remplaçant ce mot par une chaîne vide dans le fiche de traduction.
Concernant l'opacité de la bannière, c'était le fonctionnement par défaut du thème. Ça peut être une correction...
Hors ligne
Merci Didier.
J'ai trouvé dans le fichier de langue du plugin à supprimer "Entrez" en vidant la chaîne de langue de sa substance.
J'ai décoché dans l'admin du thème "descendre la barre de navigation" qui me mettait le ouaille en dessous du header.
Mais je ne trouve pas où agir pour obtenir un header plus lumineux. Ce serait peut-être une histoire de opacity: 1 qu'il faudrait neutraliser, mais je n'arrive pas à trouver sur quoi. Peut-être sur .page-header-image ???
Sur certaines images représentantes, la découpe ne correspond pas à ce que j'ai configuré et se pose trop haut. Peut-être un souci similaire à celui que je rencontrer parfois avec la sélection du centre d'intérêt sur des photos en orientation portrait (pas toutes). Ou une histoire de cache.
Je critique, je chipote, mais en vrai, je trouve ça génial !
Hors ligne
Concernant la luminosité de la bannière, c'est l'effet de z-index: -1 sur page-header-image.
Mais l'annuler nuit à la lisibilité du menu principal.
Concernant le centrage, je pense plutôt à un problème de définition d'écran. Quelle est la tienne ?
Hors ligne
C'est sur mon écran de 27" que je vois le souci (1920x1080). Mais si je regarde le site avec les modèles adaptatifs de WebDeveloper, j'ai autant de formats du header que de modèles, allant du presque carré pour le mobile portrait à un très long bandeau assez mince pour ma résolution. Ce semble bien difficile dans ces conditions de trouver une découpe adaptative et une image assez neutre pour être universelle.
Quant au z-index: -1, on pourrait pas le mettre à zéro et mettre du z-index positif pour les éléments de dessus (le logo, le titre, le menu ...) J'ai pas essayé.
Merci de ton aide et de tes suggestions.
Hors ligne
Bonjour
J'ai testé le plugin Babar sur un piwigo 14.5 php5 personnalisé (dont j'active les fonctions) et j'ai constaté 2 warnings, l'1 sur main.inc.php qui référence à la première ligne vide dont j'ai essayé de la supprimer. C'est résolu et l'autre est fr_Fr/plugin.lang.php ligne 13 dont j'ai supprimé la ligne.
Sur un piwigo 15 PHP 8 aucun problème.
Le plugin Babar et très intéressant dans le concept d'une demie bannière en haut.
Où dois-je mettre des étoiles ?
A très vite
Hors ligne
Bonjour !
J'adore Babar qui personnalise l'image en bannière selon l'album.
Ma question, déjà soulevée plus haut relève du traitement CSS de la bannière par Bootstrap Darkroom dans son option Image à la une, qu'utilise Babar. Pour rendre la zone logo/titre/menu bien lisible quelque soit l'image, Bootstrap accentue le contraste en mettant un z-index: -1 sur l'image. C'est très efficace, mais assombrit et ternit l'image qui perd beaucoup en luminosité et en netteté, et nuit à l'esthétique du développement.
Comme Didier à attiré mon attention sur le z-index, j'ai essayé plusieurs solutions pour améliorer le rendu. J'ai supprimé le z-index négatif et l'image retrouve sa beauté et son attrait, mais selon les photos, le texte logo/titre/menu devient quasi illisible. Alors je lui ai mis un background bleu dégradé identique à ce qui existe quand on configure le thème sans la bannière. Mais ça ne couvre pas tout le fond, il y a des manques en haut et sur les côtés. Et surtout, cela mange la partie supérieure de l'image.
J'ai essayé plusieurs solutions css, comme de déplacer la zone logo/titre/menu au-dessus de l'image, mais cela démolit toute l'architecture des zones du dessous qui alors se superposent.
Avec une seule image en bannière, on peut imaginer un aménagement du contraste texte/image, mais l'image change selon l'album, certes je n'ai que 260 albums, mais leur cadrage est déjà délicat, je ne vois pas de solution universelle pour le contraste.
Les pros du style auraient-ils des suggestions ? Merci d'avance.
Katryne
PS :Comme ma question porte dur le style du thème, même s'il s'agit de son application au plugin, faut-il que je crée un fil distinct, pour ne pas encombrer celui du plugin ?
Dernière modification par Katryne (2025-07-20 07:16:49)
Hors ligne
Je crois que j'ai trouvé, c'est presque parfait : l'image du header est en qualité originale et le menu, collé en haut est bien lisible avec son background d'origine. Pour ceux que cela passionne, voilà le code css entré dans Local Files Editor :
.page-header .page-header-image {z-index:0;}
nav.navbar.navbar-expand-lg.navbar-main.bg-dark.navbar-dark.navbar-transparent.fixed-top div.container-fluid {
background: #14153a; background: linear-gradient(#14153a, #2a2d7a); width:100%;z-index:100;position: absolute;top: 0;left: 0;right: 0;
}Hors ligne
Bonjour Katrine,
ton code css presente 2 pb :
- il change le centrage de la photo représentative car il se place par dessus la bannière.
- sur la page album, un scrolling vers le bas et le menu principal écrase le menu secondaire.
Concernant la luminosité, je suis de ton avis.
J'ai fait une version 1.1 qui devrait te satisfaire. Je teste et met en ligne des que possible.
Cordialement,
Didier Malherbe
Hors ligne
Merci Didier, je suis impatiente : je ne suis qu'une bricoleuse du dimanche, moi, et je pratique le code en mode itératif sans trop comprendre, en essayant tout et n'importe quoi jusqu'à que par miracle une solution semble coller à ce que je recherche. Plutôt abeille qu'architecte, quoi.
Hors ligne